hotamul의 개발 이야기

share-blog 프로젝트는 협업 목적으로 만들고 있기 때문에 github과 연동해서 code 인용이나 참조를 쉽게 할 수 있어야 한다. 따라서 댓글 기능을 utterances를 이용해 구현했다. ... ... 원하는 위치에 id="utte-comment"인 태그를 만들고 Vue.js 코드에서는 다음과 같이 처리했다. mounted() { console.log("mounted()..."); let script = document.createElement("script"); script.setAttribute("src", "https://utteranc.es/client.js"); script.setAttribute("issue-term", "pathname"); script.setAttribute("r..

Vue.js가 처리되기 이 전 화면에는 {{ }}와 같은 mustach 표현이나 v-if로 감춘 내용들이 아주 잠깐 동안 보이게 된다. 그 이유는 브라우저에서 페이지가 로드된 뒤에 Vue.js를 실행하면서 엔진이 Javascript를 읽어 들이는데 시간이 필요하기 때문이다. 렌더링 되기 이 전 까지의 아주 잠깐이지만 보이면 안되는 중요한 내용이 보일 수 있기 때문에 이를 v-cloak으로 해결해보겠다. v-cloak 디렉티브는 Vue.js에서 사용되는 내장 디렉티브로 Vue.js가 렌더링 되기 전까지는 남아있는 속성이다. 그리고 Vue.js가 모두 처리되고 나면 v-cloak 속성을 삭제한다. 따라서 아래와 같이 태그에 v-cloak 디렉티브를 추가하고 display: none; css를 추가하면 렌더링..

기존 home 화면에서의 vue-django 연동 과정 현재 프로젝트에서 home url(/)에 접근했을 때의 Vue-Django 연동 처리 과정이다. 처음 request(/)에는 DB에 접근하지 않고 html, css, js 파일만을 전달한다. 렌더링 시 Vue.js 코드의 created()에서 axios 객체를 이용해 두 번째 request(/api/post/list)가 실행된다. 이 때는 DB에 접근한다. 위 과정은 반드시 두 번의 request가 있어야 한다. 하지만 처음 html, css, Vue.js 를 전달할 때 DB에도 접근하여 JsonResponse를 전달 할 수 있다면 request 수를 줄일 수 있어 렌더링 시간을 줄일 수 있을 것이다. request 수에 주목하자. 기존에는 20 r..