vue.js 하면서 알게된점

source: categories/study/vue-experiance/README.md

• 1 이름을 가지는 라우트
• 2 params VS. query
• 3 v-model 어떻게 생겼을까? v-model 원리
• 4 v-model, v-on, slot, template 코드분석
• 5 v-slot은 template 태그에만
• 6 Vue JS 히스토리 대응 (뒤로가기)
• 7 input file upload and drag drop
• 8 vue animationend and transitionend
• 9 vue watch deep handler
• 10 v-model - controlled component
• 11 api 통신 - 데이터 받아온 후 - 적용되는 컴포넌트 - 여기서 등록되는 이벤트 에러 조심!!
• 12 vue validator - vee-validate
• 13 vue.config.js devServer의 proxy, changeOrigin 설정
• 14 vee-validate code refactoring
• 15 proxy
• 16 i18n
• 17 잠시만… 프록시 설정.. 대안 생각남
• 18 vue에 storybook 기능 추가하기
• 19 webpack-spritesmith 각 폴더 이름에 맞게 mixins 함수 생성
• 20 객체 반복문 안쓰고 비교하기 - 중요
• 21 storybook에서 컴포넌트 정리할 때
• 22 vue - webpack-spritesmith 라이브러리 적용 내용 공유
• 23 vue storybook
• 24 nvm이란?
• 25 vue vuetify
• 26 vue-timepicker
• 27 개발 실패한 컴포넌트 - range (결국 Vuetify 활용 - 단 IE에서 작동하는지 봐야됨)
• 28 기초적인 실수 하지말자 Deep Copy!!!!
• 29 vuetify 속성 포함 안되도록 하는 방법!! 이 방법밖엔 없는듯..
• 30 vue-toasted 라이브러리 사용
• 31 deep copy
• 32 vue $set, $nextTick
• 33 vuetify 같은 라이브러리가 react에도 있나?
• 34 vue keep-alive 컴포넌트
• 35 Git fork 원래 저장소와 동기화 방법
• 36 vue에서 swiper 사용하기
• 37 사용자 지정 directive
• 38 window fullscreen API
• 39 풀스크린 해제시 이벤트 등록
• 40 폼 입력 바인딩
• 41 사용자 지정 inputs
• 42 slot이 있는 콘텐츠 배포
• 43 props type 유효성 검사(validator)
• 44 조건부 렌더링
• 45 리스트 렌더링
• 46 파이프 필터
• 47 overlayscrollbars, ngrok
• 48 ajax
• 49 javascript 꿀팁
• 50 overlayScrollbars scroll 이벤트
• 51 vue-fragment with v-if 이슈
• 52 lottie 및 v-icon
• 53 vuetify v directive custom 속성
• 54 컴포넌트화 할 것들은 컴포넌트화 아닌 것들은 inline scoped style로
• 55 chart.js
• 56 moment.js
• 57 eslint, prettier, stylelint, editorconfig
• 58 왜 CommonJS는 번들사이즈를 크게 하는가?
• 59 트리 쉐이킹으로 자바스크립트 페이로드 줄이기
• 60 실제 적용 후기
• 61 eslint 기능 강화 (prettier, stylelint) 및 git hook 기능 추가
• 62 빌드시 tree-shaking 기능 강화
• 63 코드 최적화 적용 결과
• 64 vuetify, lodash 트리쉐이킹
• 65 Scoped CSS
• 66 git 특정 파일만 특정 시점으로 되돌리기
• 67 error: src refspec master does not match any
• 68 2021-09-07 ~ 2022-01-07 금 중간체크 - 4개월간 해온 것들
• 69 git 권한 문제
• 70 zshell 에서 nvm 인식 안되는 문제
• 71 router-link, redirect 리서치
• 72 뷰 라우터 기본개념잡기
• 73 router-link active class, active 방법에 관한 고찰..?
• 74 라우터 이동에서 컴포넌트 이동으로 수정 후 버그 픽스
• 75 vuetify v-icon 사용법
• 76 vuetify 컴포넌트 안에 vuetify 컴포넌트 props 전달
• 77 유지보수 - 페이지별 class 조정
• 78 dropdown box 원리
• 79 postman 활용 연구
• 80 tooltip 기능
• 81 combobox 유효성 검사
• 82 vue에서 sass 기능 사용?
• 83 webpack에서 loader와 plugins의 차이점은 무엇인가요?
• 84 local storage VS session storage (텝메뉴)
• 85 IE 접속 이슈
• 86 vue.js dynamic component, json, storyblok
• 87 IE 이슈 (재귀함수, 호출 스텍 크기, 자동취소(?))
• 88 현재 api 구조 - 토스트 팝업 뜨는 구조 이해하기 (ㅇㄹ등록메시지 일치할 때)
• 89 storyblok - 헤드리스 CMS
• 90 - storyblok VueJS
• 91 MVVM
• 92 프론트 최적화 - 랜더링 횟수
• 93 JSON 데이터에 따른 문서 템플릿
• 94 input type number & maxlength
• 95 IE 11 두번째 이슈
• 96 vee-validate 동적 생성
• 97 CSS module, scoped
• 98 컴포넌트 단위에 관하여..(vueJS 관점)
• 99 반복문 key 값에 관한 고찰..
• 100 slot, scope
• 101 keep-alive, component
• 102 intro 페이지 내가 개발한 스크롤 플러그인 적용
• 103 vee-validate IE11에서 immediate 옵션 안줬는데 즉시 유효성 검사되는 이슈
• 104 부모 태그에 맞춰 img 정렬하기 object-fit: cover 기능 구현
• 105 moment.js
• 106 async/await 실행순서
• 107 객체 해체할당
• 108 스토리북 addon - 화면에 보이는 것들 조정
• 109 리액트 - 이미지 레이지로드
• 110 리액트 - 이미지 레이지로드2 상위 컴포넌트에서 레이지로드 함수 관리, 하위 컴포넌트로 레이지로드 함수 전달해서 코드 간단하게하기
• 111 React Router로 렌더링하는 컴포넌트에 prop 전달하기
• 112 로띠는 네트워크 리퀘스트가 아니다. 빌드하면 소스에 다 포함되어 나간다.
• 113 git tag
• 114 git token 설정하기 - 깃 보안강화
• 115 특정 파일 commit 기록보기
• 116 tag push
• 117 특정파일 unstaged로 돌리기
• 118 react 빌드 파일 로컬 서버에서 실행하기
• 119 Vue filter
• 120 Vue에서 moment 사용하기
• 121 딥카피(deep copy) 관련 이슈
• 122 Vue 파이프 필터
• 123 웹팩 데브 프록시 설정 (webpack devServer proxy)
• 124 eslint 기능 강화
• 125 window node localhost 제대로 안종료되었을 때
• 126 vue keep-alive 컴포넌트
• 127 Git fork 원래 저장소와 동기화 방법 (upstream)
• 128 vee-validate 3점대 버전 (vue 2점대버전이라..) (정리중..)
• 129 chart.js 3버전 (이거 많이쓰니깐 잘 알아둬야돼..) (정리중..)
• 130 내가 만든 스크롤 인터렉션 플러그인.. vue에서 쓰게끔 수정하니깐 갑자기 IE11에서 IndexSizeError가 뜬다.
• 131 타입스크립트 리서치
• 132 타입스크립트 리서치 2
• 133 웹소켓 개념
• 134 Object key 순서
• 135 IE 11 이슈 - stack overflow, chart.js 3.x
• 136 IE11 순환참조 발생하는 원인 파악중.. 파악 방법 리서치
• 137 엣지 케이스 처리 - $root, $parent, $refs, provide, inject, 프로그래밍 방식 이벤트 리스너, Circular References
• 138 member 권한 파악
• 139 vuetify, vuedraggable, + @ IE11 이슈, chart.js 3.6.4, chartjs-plugin-zoom 1.2.0
• 140 파트별 텝메뉴 나타나는거 수정
• 141 로그인 관련
• 142 IE11 이슈 - swiper + video + poster + controls // transform scale opacity
• 143 vue2 개발환경 구성
• 144 DockerFile, Kubernetes - 배포 시스템 관련 설명
• 145 타입스크립트 리서치 3 - vue2 적용
• 146 vue2 프로젝트 세팅
• 147 api 개발 (login 및 login 정보로 토큰받기 및 공통 api 요청)
• 148 ngrok 사용
• 149 라우터, 라이프사이클 훅
• 150 도커 배포시 오류
• 151 vuetify v-textarea 스크롤 이벤트
• 152 크로스사이트 스크립팅 (공격코드) - XSS
• 153 2022. 03. 31. (목) 해야될거
• 154 xss 공격방어 관련 v-html 사용 x
• 155 숫자를 base64 인코딩해주는 자바스크립트 내장 함수 (btoa / atob)
• 156 public/robots.txt
• 157 vuetify v-text-field 한글입력 방지
• 158 전화번호 형식으로 변경 (정규식)
• 159 초기값 관련
• 160 프론트엔드 개발 이슈
• 161 프론트엔드 정리 1
• 162 무한 스크롤링 이슈
• 163 고민 - 로딩 컴포넌트 제어 방법, 컴포넌트는 어떤 구조로 정리하면 좋을까 (링크드인)
• 164 dev, cbt 배포 에러 yml
• 165 쿼리스트링
• 166 vue 배포 파일 용량 큰 문제 해결
• 167 kakao developer
• 168 반복문 잘쓰자!!!
• 169 vue composition api 주의점
• 170 vue 반복문 key 값 주의
• 171 key, package.json scripts, skeleton ui, vue3 suspense component, element ui (is-esm), 임시저장 기능 구현, 트러블 슈팅 경험, 페이지 진입속도 해결, 프로젝트 진행하며 어려웠던 점, 앞으로 적용하고 싶은 것, 로딩 컴포넌트 제어, axios / swr
• 172 vue, react 등 프론트 프레임워크에서 반복문시 할당하는 Key 프롭에 관해.. (vue3 DOC 기준이지만, 내용읽어보니 vue2도 이에 해당하는듯..? 아닌가)
• 172-1 리스트 렌더링
• 172-2 API Reference: 특별한 속성들
• 173 vue.js 렌더링에 관해 - slot
• 174 스로틀링, 디바운스, requestAnimationFrame
• 175 Vue.js의 렌더링에 관해 - 가상 DOM
• 176 vue.js
• 177 portal-vue, teleport
• 178 프론트엔드 최적화
• 179 Vue는 React보다 얼마나 쉽게 최적화 컴포넌트를 만들 수 있을까?
• 180 forceUpdate 말고 key를 통해 재랜더링 시키는 방법 및 고유값 생성 방법
• 181 Promise.all, Promise.allSettled
• 182 vue awesome swiper 4.1.1
• 183 조건은 확실하게 다 달자
• 184 2022년 6월 11일 스터디 때 할 거
• 185 v-dialog eager 렌더링
• 186 Scoped slot
• 187 Input type=file
• 188 응답 느린 서버
• 189 안드로이드 카카오 인앱 브라우저 QR 스캐닝 이슈
• 190 react usememo
• 191 2021/09/07 ~ 2022/06/24 그동안의 기록들..