매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있일 수 있으며 틀린 내용은 지적 부탁드립니다. DB의 실행 $ psql -d 데이터베이스명; postgres를 먼저 실행한다. $ psql -d postgres; 만약 비밀번호에서 에러가 발생한 경우 아래의 커맨드와 같이 관리자를 지정하여 패스워드 postgres를 입력하자. $ psql -d postgres -U postgres DB의 생성과 삭제 DB의 생성 기본 구문이다. # CREATE DATABASE 데이터베이스명; 예를 들면 kenko이라는 이름의 DB를 작성한다면 다음과 같다. # CREATE DATABASE kenko; 참고로 이 커맨드로 DB의 목록을 확인할 수 있다. # \l List of databases Nam..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 의역 및 직역, 오역이 있일 수 있으며 내용 오류시 지적해주시면 감사하겠습니다. javascript로 디버그를 할 때, console.log(); 만을 사용하던 과거의 나를 위해 쓰는 포스트입니다. console.log({변수명}); 갑자기 console.log(); 소개하다니라고 생각할 수 있겠지만, 이 방법을 알게 됐을 때 '왜 진작 몰랐을까...' 라고 생각할 정도로 편리했기 때문에 첫 번째로 언급하도록 하겠다. 다음과 같은 HTML이 있다고 가정하자. 각각의 input의 요소와 값을 얻어보자. let nameForm = document.getElementById('name'); let ageForm = document.getElementById('a..

※ 일본의 블로그 글을 번역한 포스팅입니다. 오역 및 직역이 있을 수 있으므로 내용 지적 언제나 환영합니다. 초급편 XPath란? XPath는 XML문장 속의 요소, 속성 등을 지정하기 위한 언어이다. XPath에는 XML문장을 트리로서 다루기 때문에, 요소나 속성의 위치를 지정하는 것이 가능하다. HTML도 XML의 일종으로 간주 될 수 있으므로, XPath를 사용하여 HTML문장의 요소를 지정하는 것도 가능하다. 예를 들어 ... 원피스 iQON 12,000원 10,000원 위와 같은 HTML의 경우라면, 아래와 같이 트리 구조로 나타낼 수 있다. XPath는 이러한 트리 구성으로 부터 요소를 얻어낸다. XPath의 기초 XPath는 로케이션 패스에의해 표현된다. 로케이션 패스란 트리구조로부터 특정 ..

간단 사용법 QueryAPI에서도 QuerySet을 돌려주는 메소드이다. select_related()와 마찬가지로 한 번의 쿼리로 관계 테이블의 객체를 얻을 수 있다 (즉 JOIN가능하다). 차이점이라면 prefetch_related()는 M2M 관계일 때 사용한다는 것이다. 이와 관련해서 조금 더 설명을 덧붙이자면 다음과 같다. ● select_relation()의 경우 select_relation()은 관계 테이블의 객체도 포함해서 SQL로 SELECT를 실행해 객체를 얻고 있다. 따라서 관계 테이블의 객체도 포함해서 한 번의 쿼리로 모든 대상 객체를 얻는다. 따라서 M2M의 관계의 객체를 대상으로 실행했을 경우 엄청난 수의 객체를 얻게 된다. 따라서 select_related는 ForeignKey..

지난번에 작성했던 '테이블(모델)의 JOIN(1)'의 경우 너무 가볍게 보기도 하고 거기서 언급했듯 스스로도 이해를 못했기 때문에 prefetch_related()와 select_related() 각각의 메소드 사용법을 조금 더 살펴보겠습니다. 이번 포스팅에서는 둘 중 먼저 select_related()의 사용 대해 다뤄보고자 합니다. 간단 사용법 쿼리를 실행했을 때에 지정된 외래 키의 개체도 함께 가져온다. 이를 통해 DB에 접근하는 횟수를 줄일 수 있다. 사용예에 대해서 살펴보자면, 첫 번째 코드를 두 번째로 코드로 변경할 수 있다. # DB에 접근 e = Entry.objects.get(id=5) # 아직 DB를 건들이고 있다. b = e.blog # DB에 접근 e = Entry.objects.s..

먼저 Vue.js 자체의 기본적인 구문을 정리해보도록 하겠다. Vue 인스턴스 Vue 인스턴스의 작성법은 아래와 같다. //app.js new Vue({ el: "#app", data: { name: "Kei", age: "30", counter: 0 }, methods: { increase: function() { this.counter += 1; } } }) 이 app.js를 Vue.js와 함께 임포트한다. {{ }} {{ }} 로Vue인스턴스의 요소를 호출할 수 있다. {{ name }} v-bind HTML요소를 Vue.js에 동적으로 지정하고 싶은 경우에 v-bind를 사용한다. Google v-once v-once 를 HTML 태그에 포함하여 1번 그려진 요소의 내용이 변경되지 않도록 할 수 ..

데이터 베이스 관계에 대한 설명 우선 잠시 '1대1', '1대다(多)', '다(多)대다(多)'에 대한 이야기부터 하고자 한다. 1대1관계 양쪽의 레코드가 1대1 대응하는 관계를 의미한다. 다른 말로 하자면, 양쪽의 PK(기본키)가 같다고 할 수있다. 이러한 설계를 하는 예로는 분할하지 않아도 괜찮은 테이블이 분할되는 경우이다. 기존 테이블 구성을 변경하지 않고 항목을 추가하고 싶은 경우 등을 제외하고, 실제로 사용하는 경우는 적을 것이라고 생각한다. 1대다(多)관계 A의 레코드는 B의 복수의 레코드와 관계가 있을 가능성이 있으나, B의 레코드는 A의 레코드와 최대 1개 밖에 관련이 있는 경우이다. 조금 더 자세히 설명하자면, A의 입장에서 봤을 때, A의 1개의 레코드가 동시에 복수의 B의 레코드와 관련..

1. view 단에서 조건 문에 따른 response의 작성 할 때는 if-else 따로 따로 response를 두 개로 나눠 작성하지말고 하나로 작성하자. 2. iterable 객체 안에 최소값이나 최대값을 얻어내는 동작을 수행하는 코드의 경우 python의 min, max 함수를 활용하자. docs.python.org/3/library/functions.html#min 3. 코딩 중에 중간에 출력되는 값을 조사하고 싶을 때 print문 보다는 다음의 logging을 사용하자. docs.python.org/ko/3/howto/logging.html import logging; logger = logging.getLogger(__name__) ... logger.debug(f"foo") 그러나 유효화하기..

request관련한 다양한 메소드들이 있다. 이번 포스팅에서 비교할 메소드는 request.get과 request.GET.get이다. request.get과 request.GET.get의 차이점 한 마디로 request.get은 python의 문법이며, request.GET은 djang의 문법이라는 이미지라고 하면 알기 쉬울 거라고 생각한다. 또한 request.GET을 사용하면 get 리퀘스트를 보냈을 때의 파라미터도 얻을 수 있다는 것이 특징이다. 순서대로 조금 더 자세히 알아보자. request.get에 대해 먼저 request.get이다. 이것은 request라는 이름의 객체에 대해 get 메소드를 실행하는 것이다. 이때의 request객체는 사전형의 데이터인 것을 인식하자. 구체적인 코드로 살펴..

1. JavaScript의 var은 함수 스코프(Scope)이므로 의도에 반하는 결과가 발생할 수 있다. 따라서 var의 사용은 삼가하는 편이 좋다. ( 이번에는 사용하지 않았으므로 영향이 없으나, var로 선언한 변수를 클로저로 사용하면 좋지 않은 결과를 얻을 수 있다.) 1) 좋지 않은 예 const data = JSON.parse(`{ "a": 1, "b": 2, "c": 3 }`); // NG for (var key in data){ // NG: var로는 기대대로 나오지 않는다. // 1초후에 처리하고자함 setTimeout(function(){ alert(key); // 클로저를 사용하여 function의 밖에 있는 변수n을 참고. a, b, c (임의의 순서)로 나왔으면 한다. }, 1000..