vue.js29 [vue] plugin 제작/실행 본 포스팅은 vue3를 기준으로 작성하였습니다. vue에서 전역함수를 사용하기 위한 방법 중 하나로 plugin이 있다. 짧게 사용법을 정리 먼저 플로그인 파일을 작성한다. //plugin/add.js export default { install: (app) => { // inject a globally available $translate() method app.config.globalProperties.$add = (key,key2) => { // retrieve a nested property in `options` // using `key` as the path return key+key2 } } } 나는 $add라는 함수를 작성하였고 인자를 두 가지 받아 더해 반환하는 간단한 함수이다. 이 플러.. 2022. 5. 3. [vue] 비동기 컴퍼넌트 lazy loading | _defineAsyncComponent() LAZY LOADING spa의 단점 중 하나는 처음 웹에 진입 시 번들해놓은 모든 리소스를 한번에 받아 초기 진입속도가 느리다는 점이다. 개발자도구 - network 탭을 보면 chunk-vendors란 메뉴가 있는데, 이 chunk-vendors가 맨 처음 리소스를 받는 것이고, lazy loading는 이 chunk-vendors의 용량을 컴퍼넌트 단위로 나누어 다른 화면에서 리소스를 받도록합니다. component: () => import(/*webpackChunkName: "about" */ '../views/About.vue') 위 코드처럼 작성할 시 별도의 chunk 파일을 생성하여 실제 이 라우트를 방문했을 때 리소스를 로드하게 됨 다만 lazy loading를 남발할 시 spa.. 2022. 4. 14. [vue] 클래스 바인딩하는 여러 방법 공식문서에서 클래스 바인딩하는 여러 방법이 있어 정리하기 위한 포스트 https://vuejs.org/guide/essentials/class-and-style.html Class and Style Bindings | Vue.js vuejs.org 1. 스타일을 data에 string으로 미리 선언 후 사용 이후 activeClass의 값을 바꿔 동적으로 클래스를 바꿀 수 있다. 2. boolean 데이터를 이용해 클래스를 동적으로 부여 ㄻㅇㄴ로ㅓㅁㅇㄴ론ㅇㅁ롬러ㅏ 별건 없음. isActive의 값이 ture이니 {active: isActive}문이 일차적으로 선택이되고, isActive가 true이니 active 클래스가 주어진다. 2022. 4. 12. 차세대 빌드 도구 vite (vue) Webpack의 번들링과정이 길어 짜증날때 사용할 수 있는 빌드도구 vite를 써봄 (react에도 사용 가능) 우리는 vue를 사용할때 기본적으로 Webpack을 이용하여 빌드를한다. vue create '프로젝트명' 위의 명령어로 vue project를 생성 시, node_modules폴더나 package-lock.json 에 웹팩관련 모듈,설정들이 작성되어있어 vue는 웹팩을 기본으로 사용하는구나 알 수 있다. 다만 프로젝트의 크기가 커지면 커질수록 빌드할 시에 시간이 너무 오래걸린다. 나같은 경우에는 프로젝트 생성만 10초쯤 걸리는듯. 이 대기시간이 짧은 빌드도구 vite가 있다해서 사용 해보기로 함 npm install -g vite npm init vite@latest 먼저 vite를 설치 후.. 2022. 4. 7. [vue] 이벤트 버블링 관련 수식어 공식문서에 이벤트 핸들링 중 버블링과 관련된 수식어 들이 보여 정리함. https://vuejs.org/guide/essentials/event-handling.html#event-modifiers Event Handling | Vue.js vuejs.org click.stop 위 코드를 실행할 시엔 문제가 한 가지 있다. 바로 click.stop을 우클릭하였을시 부모,자신,자식 총 세번의 abc함수가 호출이 됨 의도와 맞다면 문제가 없겠지만 의도와 다를시 이를 다룰 수 있어야됨 수식어를 정리하기전 이벤트 전파 현상에 대해 알아야하는데 이벤트 전파 현상이란 위의 예시처럼 클릭한 DOM(이벤트가 발생한 DOM)과 겹쳐있는 부모나,자식 DOM까지 같이 선택이 되어서 이벤트가 발생하는 것을 이벤트 전파 현상이.. 2022. 3. 17. [vue] debounce 사용하기 feat.(throttle) debounce와 throttle의 공통 키워드로는 '연속성' 입니다. 우리는 특정 함수를 호출할 시, 이벤트리스너와 관련된( ex: scroll )함수를 호출할 시 해당 이벤트들이 너무 연속적으로 수행될 때가 있습니다. debounce와 throttle은 이를 방지하기 위한 기술입니다. - debounce 이벤트를 호출한 후, 일정시간이 지나야 해당 실행문장을 실행합니다 => 키를 입력하면 값이 출력되는 이벤트를 호출한다 가정했을시, 마지막에 입력했을 때를 기점으로 설정한 시간만큼 재호출이 없어야 실행문장이 실행됩니다. - throttle 이벤트를 호출한 후, 실행문장을 한 번 실행하고, 설정한 시간만큼은 재호출을 해도 응답하지 않습니다. 1. lodash를 설치 후 가져와 사용 2. debounce는.. 2022. 3. 16. 이전 1 2 3 4 5 다음
