개발로그

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