개발로그

회사에서 클라이언트사의 스페셜 페이지를 우리 플랫폼으로 내재화 하는 작업을 맡아 진행하게 되었다. 스페셜 페이지의 가장 중요한 부분 중 하나는 SNS로 링크 공유시 적절한 이미지와 내용이 뜨는 것인데, 우리 플랫폼은 SPA로 되어있어서 SEO도 제대로 되어있지 않고 meta og 태그도 전혀 없는 상태. 기존 스페셜 페이지는 멀티 페이지로 구성하여 각 페이지마다 index.html 파일을 따로 두어 해당 기능을 처리하였는데 내재화를 하게 되면서 앞으로 발생하는 모든 스페셜 페이지를 시스템화 해야했기 때문에 링크 공유 기능과 SEO도 함께 잡을 수 있는 prerender 플러그인을 적용해보기로 하였다. 팀장님이 예제 링크와 사용법을 포스팅한 여러 블로그들을 나에게 보내주셨고 생각보다 간편해보여서 나도 금방..

1. 2019 W3C HTML5 컨퍼런스 매년 과기부에서 주최하는 행사. - Vue.js 발표 자료 링크https://github.com/joshua1988/vue-five-common-mistakes - 흥미로운 주제들 - SVELTE - Project Fugu https://www.chromium.org/teams/web-capabilities-fugu - fugu는 복어라는 뜻. 잘쓰면 좋지만 잘못쓰면 독이된다... - fugu로는 네이티브에서만 가능한 파일시스템에 접근 가능하다. - PWA 최신 API 목록 https://developers.google.com/web/updates/capabilities 2. vim으로 자동 생성된 import 구문의 경로 앞에 붙는 '@'는 얼라이언스라고 하는데..

오늘 한 일 패스트 캠퍼스 "Vue.js로 구현하는 PWA 캠프" 3주차 강의 수강. 공부 내용 1. 상수는 vue 인스턴스의 data 속성에 넣지 않는다. 넣는 순간 get, set 함수 생기기 때문에 그게 다 비용이다. 불필요한 비용은 줄여야 한다. 2. $(달러)속성은 되도록 사용하지 말자. 나중에 고급패턴을 이용할 때 쓸일이 있긴 하나, this.$data.user 같은 코드는 공식 문서에서도 권고하지 않는다. 3. 터미널에서 touch TodoHeader.vue TodoInput.vue TodoList.vue 이런식으로 하면 한 번에 여러파일 생성가능. 4. 컴포넌트 파일 생성하는 scf 단축키 -> vue 로 변경 5. vex 단축키는 import와 export default를 한번에 생성해주..

오늘 한 일 인프런 [Vue.js 완벽 가이드] 완강. 자바스크립트 노랭이 책 9장 [클라이언트 탐지] 요약본 1회독. 공부 내용 컴포넌트 디자인 패턴 컴포넌트 디자인 패턴은 총 4가지가 있다. common, slot, controlled, renderless common - 일반적인 컴포넌트 등록과 컴포넌트 데이터 통신 방식 slot - 슬롯 속성을 이용하여 컴포넌트의 독립성과 확장성을 키운다. 예를 들어 부모 컴포넌트에서 마크업 확장 가능. controlled - 컨트롤 태그(체크박스나 라디오버튼 등)를 컴포넌트화할 때 유용(?) 결합력을 높이는 방법인데 사실 이부분은 아직 잘 모르겠다... renderless - render() 함수를 이용하여 템플릿 없이 스크립트 태그로만 렌더링하는 방식이다. 데..

오늘 한 일 인프런 [Vue.js 완벽 가이드] 진도율 77% 돌파 라우터 네비게이션 가드 학습 및 실습. async & await 학습 및 실습. 공부 내용 라우터 네비게이션 가드는 페이지를 이동하기 전에 라우터 단에서 한 번 막아주어 무언가 작업할 수 있는 기능이다. 컴포넌트 라이프사이클 훅(created)에서 데이터를 받아오면 페이지 이동된 후에도 이전 데이터가 보여지는데 네비게이션 가드로 이것을 해결할 수 있다. VueRouter의 해당 path에 beforeEnter 함수를 추가한다. 해당 함수는 (to, from, next) 세가지 인자를 받는다. to: 이동할 페이지, from: 현재 페이지, next(): (모든 할 일을 마친 뒤) 다음 페이지로 이동. (실행 안시키면 이동 안함) asyn..

오늘 한 일 드디어 인프런 [Vue.js 완벽가이드] 진도율 50% 돌파! 공부 내용 각 뷰의 공통된 부분을 찾아서 하나의 컴포넌트를 만든다. 컴포넌트의 비즈니스 로직은 왠만하면 컴포넌트 파일에서 처리한다. 컴포넌트 데이터는 부모 뷰에서 받아서 props로 뿌려주는 방식이 있고, vuex store를 이용해서 컴포넌트에서 바로 state로 받아오는 방식이 있다. props로 뿌려주는 방식은 과정이 한 단계 추가되기때문에, 컴포넌트에서 바로 state로 받아오는 것이 vuex사용에 최적화된 방법이다. 그러나 props로 뿌려주는 방식은 부모 컴포넌트에서 어떤 데이터들이 바인딩 되는지 명시적으로 알 수 있기 때문에 어느 방법이 더 낫다고는 말하기 어렵다. 컴포넌트에서 데이터를 분기처리해주는 방법은 v-if/..