vue18 [vue] debounce 사용하기 feat.(throttle) debounce와 throttle의 공통 키워드로는 '연속성' 입니다. 우리는 특정 함수를 호출할 시, 이벤트리스너와 관련된( ex: scroll )함수를 호출할 시 해당 이벤트들이 너무 연속적으로 수행될 때가 있습니다. debounce와 throttle은 이를 방지하기 위한 기술입니다. - debounce 이벤트를 호출한 후, 일정시간이 지나야 해당 실행문장을 실행합니다 => 키를 입력하면 값이 출력되는 이벤트를 호출한다 가정했을시, 마지막에 입력했을 때를 기점으로 설정한 시간만큼 재호출이 없어야 실행문장이 실행됩니다. - throttle 이벤트를 호출한 후, 실행문장을 한 번 실행하고, 설정한 시간만큼은 재호출을 해도 응답하지 않습니다. 1. lodash를 설치 후 가져와 사용 2. debounce는.. 2022. 3. 16. [vue] $nextTick 사용하기 가끔 우리가 Dom을 그려줄때나 접근할 때, Dom을 그려주고 접근하는 것이 비동기적으로 처리가 되어 귀찮아 질 때가 있습니다. 예시론, 바인드완료 위 코드와 같이 mount된 후 1. isBind에 true값을 주어 2. #spanEle Dom을 그리고 3. 그 후에 #spanEle를 console.log로 접근해 보면 위 사진과 같이 null이란 결과가 나옵니다. 이 이유는 맨 첫 문단에 작성했던 Dom을 그린 후, 다음 실행문장이 동기적으로 진행되는 것이 아닌 비동기로 진행되어 #sapnEle Dom이 그려지기 전에 console.log로 접근하기였기 때문입니다. 공식문서에서 살펴보니 이와 같은 상황에 nextTick을 사용하라 나와있네요. https://vuejs.org/guide/essentia.. 2022. 3. 16. vue3 script 구현방법 (setup) vue3 스크립트 구현방법 1.options(기존의) 2.composition 3.script setup 메모용 3.script setup은 2.실행 시 composition로 빌드해 주기 때문에 2와 3은 비슷하다 https://vuejs.org/api/sfc-script-setup.html | Vue.js vuejs.org 2022. 3. 1. [vue] 동적 컴퍼넌트 호출 feat. [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead .. vue 문서들을 보던중, 동적 엘리먼트 부분에서 v-is라는 속성을 보아 테스트 해봄 데이터에따라 동적으로 컴퍼넌트를 호출할때 사용한다 함 (vue3 기준) *주의점 vue2에서는 // vue2 is="HelloWorld" // vue3 :is="'HelloWrold'" 위와 같이 네이티브 태그에 is옵션을 사용하였고 vue3에서는 디렉티브로 바뀌어 문자열값을 사용할 경우 "" 안에 ''을 추가해주어야함 Vue는 반응성 객체로 만들어진 구성 요소를 받았습니다. 이로 인해 불필요한 성능 오버헤드가 발생할 수 있으므로 구성 요소를 'markRaw'로 표시하거나 'ref' 대신 'shallowRef'를 사용하는 것은 피해야 합니다. 1. ref가 없어서 그런가? x 아니었음 2. 뭔가 v-for의 :key처럼.. 2022. 2. 28. [vue] v-for 안에서 값이 바뀌지 않는 버그 || v-model cannot be used on v-for or v-slot scope variables because they are not writable. v-model cannot be used on v-for or v-slot scope variables because they are not writable. 업무도중 위와 같은 에러를 만났다. 사실 위 문장을 바로 마주친건 아니였고... 회사에서 quasar라는 ui 프레임워크를 사용하는데 (quasar는 vue 기반으로 사용) https://quasar.dev/ Quasar Framework - Build high-performance VueJS user interfaces in record time Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive webs.. 2022. 2. 21. [vue] provide / inject 컴포넌트 계층 구조가 굵어 여러 단계를 거쳐 props를 해야 하는 경우 매우 귀찮고 복잡해 질 수 있다. 그럴 때 provide / inject 를 사용 export default { name: 'Home', components: { About }, provide () { return { provideDate: [1, 2, 3, 4, 5] } } } provide로 데이터를 뿌리고 export default { name: 'Children', inject: ['provideDate'] } inject로 받아온다. 다만 위와 같이 사용했을 시 어느 부모컴퍼넌트에서 받아온 값인지 찾기 힘들 수 있다. 그래서 inject의 형태를 변경해 조금 더 상세한 설정이 가능함 //부모 //자식 {{ injectDat.. 2022. 1. 19. 이전 1 2 3 다음
