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 구문의 경로 앞에 붙는 '@'는 얼라이언스라고 하는데 상대경로를 안써도 되게끔 알아서 경로를 잡아주도록 미리 세팅되어있다.
3. vscode에서 ctrl+shift+P 눌러서 명령어 검색하면 설정된 명령어들 찾을 수 있음.
4. vue-router에서는 따로 이벤트 발생 시 값을 넘겨주거나 하기가 힘듬. params, query, meta 등에 데이터를 넘겨줄 수는 있다.
5. export let obj = { data: 'hi' } => import { obj } from './';
export default { data: 'hi' } => import obj from './';
내보낼 때 하나만 꺼내겠다 하면 default를 붙여서 내보낸다. 그러면 import 시에 괄호없이 가져올 수 있음.
6. Vuex 흐름 : actions (commit)-> mutations (mutate)-> state (render)-> vue components (dispatch)-> actions(처음으로)
7. vuelidate , vee-validate -> vue에서 쓰는 validate 이거 굳이 쓸 필요 없음.
8. v-model IME : 한글, 중국어, 일본어는 v-model이 타입 하나마다 제대로 동작을 안함. 그래서 알아서 구현하라는 얘기
v-model은 :value와 @input 의 조합이다. 단순히 문법설탕임.
9. vue add unit-jest
10. 유닛테스트 "test": vue-cli-service test:unit --watchAll 이렇게 스크립트 설정해두면 npm t 만 쳐도됨.
11. CORS Preflight : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests
12. jest 기본 설정 바꾸기 jest.config.js 에서 testMatch 경로 바꿔주기. 기본은 tests/unit 안에 있는 파일만 돌아가게 되어있음.
13. jest 테스트 파일에서 describe 인식 못해서 빨간줄 생길 때 =>
루트 디렉토리에 .eslintrc.js 파일 만들어서
module.exports = {
env: {
jest: true,
},
};
입력해주기.
14. axios.post(url, data, config) / axios.get(url, config)
config에 {header: {Authorization} } 속성에 토큰 담아 보내면됨.
header: Authorization 는 http에 원래 정의되어있는 속성이다.
15. axios.create({})으로 baseURL이나 header 등 기본 속성, 공통으로 사용하는 속성을 axios 인스턴스 옵션으로 넣어줄수 있다.
16. axios interceptor는 전처리기 => 리퀘스트, 리스폰스 중간에 정보를 가로채서 함수 실행하게 할 수 있다.
17. setInterceptor 파일 분리해서 사용하기
18. vue-composition-api 살펴보기 https://github.com/vuejs/composition-api?ref=madewithvuejs.com
19. vue-chartjs github가서 소스 보기 어떻게 vue에서 손쉽게 사용하도록 랩핑되었는지
20. chart.js / d3.js / three.js - 모두 차트 관련 라이브러리
21. mounted 이전 사이클에서는 document에 접근하면 안된다.
22. document를 쓰면 안좋은 점이 모든 컴포넌트를 다 뒤져서 엘리먼트를 찾기 때문에 컴포넌트 기반 개발의 의미가 퇴색된다.
ref를 쓰면 해당 컴포넌트만 대상으로 찾는다.
23. plugin/플러그인.js을 만들어주고 main.js에서 Vue.use(해당 플러그인) 해주면 라이브러리를 쉽게 추가할 수 있다.
