vue310 [vue] npm run serve 입력 시 npm run serve 입력 시 localhost:8080, 즉 내 호스트에 뷰 프로젝트를 띄워준다. 이건 어디서 띄워주는 건지 궁금해서 알아봄 vue project 생성시 자동으로 package.json이 생성된다. 위 사진이 package.json의 일부이며 scripts에 npm명령어들이 설정되어있다. npm run **** 로 해당 명령어들을 실행하면 됨 나는 지금까지 npm run serve로 뷰 프로젝트들을 실행해왔는데 귀찮다면 npm run s 이렇게 바꿔서 실행도 가능 이 포스트는 어떻게 내호스트에 뷰 프로젝트를 띄워주는가가 목적이니 이만하고, 본문으로 돌아갔다. 처음엔 이렇게 생각했다 npm run serve를 입력하면 npm run vue-cli-service serve를 입력한 것과.. 2022. 7. 17. [vue] vuetify 실행해보기 1. vue 프로젝트에 vuetify 추가하기 # npm i vuetify # 아래의 공식홈페이지 주소에 나오는대로 main.js에 소스 작성하기 // Vuetify import "vuetify/styles"; import { createVuetify } from "vuetify"; import * as components from "vuetify/components"; import * as directives from "vuetify/directives"; const vuetify = createVuetify({ components, directives, }); createApp(App).use(vuetify).mount("#app"); https://vuetifyjs.com/en/getting-sta.. 2022. 7. 1. [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. [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 다음
