WEB/Vue.js

[Vue.js] Vue-cli 와 webpack-bundle-analyzer 👩‍💻 webpack-bundle-analyzer webpack-bundle-analyzer는 웹팩을 통해 번들링되는 모듈의 크기를 시각적으로 보여준다. 번들 파일의 용량을 확인함으로써 번들 크기에 문제가 있는 번들을 확인하고 줄일 수 있도록 하여 속도 향상시킬 수 있도록 도움을 준다. ⛏️ 설정하기 기본적으로 build 를 하게되면 자동으로 실행되며, pluginOptions.webpackBundleAnalyzer에 옵션을 추가할 수 있다. // vue.config.js pluginOptions: { webpackBundleAnalyzer: { // 이곳에 webpack-bundle-analyzer 옵션을 추가하면 된다. an..

[Vue.js] Vue.js 에서 css variable 사용하기 들어가기에 앞서 단순히 공통 속성을 사용하기 위해서는 css variable이 아닌 IE에서도 사용 가능한 scss(sass)를 통한 공통 속성을 정의하여 재사용하는 것이 좋으며, vue class 또는 style 바인딩을 통해서도 충분히 구현 가능한 부분이기에 vue style binding에 css variable 연결하는 방식은 그냥 이런 방법도 있다는 것을 인지만 하는 것이 좋을 것 같다. CSS Variable css variable은 style css 내에 사용자 속성을 지정하여 재사용 가능하도록 하는 객체를 의미한다. 현재, IE는 지원하지 않기 때문에 IE를 지원하는 사이트를 개발 중이라면 사용에 주의해야한다. `css-va..

[Vue.js] Vue-cli 빌드 후 로컬에서 실행하기 vue-cli spa 프로젝트를 웹팩, 빌드 시간 단축, 성능 측정 등 테스트하기 위해 로컬에서 실행하는 방법이다. 1. 프로젝트 빌드 $ npm run build 2. 프로젝트 실행 $ npm install -g serve $ serve -s dist [참고] https://cli.vuejs.org/guide/deployment.html#previewing-locally 🎇 ERROR 발생시 해결 1. error Unexpected console statement no-console // vue.config.js module.exports = { devServer: { overlay: false // remove `error Unexpected ..

[Vue.js] Global Component 만들기 (컴포넌트 전역 등록하기) 들어가기에 앞서... 매번 자주 사용하는 컴포넌트를 만들고, 매번 해당 컴포넌트를 사용하는 곳마다 import 하여 사용하는 것은 불편할 뿐더러 컴포넌트의 파일 위치가 바뀐다면 해당 컴포넌트를 사용하는 모든 파일마다 수정을 해줘야 하기 때문에 좋지 않다. 그렇기 때문에 자주 사용하는 컴포넌트를 전역(Global)로 등록하여 사용한다. 🎈 간단한 글로벌 버튼 컴포넌트 만들기 `버튼` 컴포넌트를 이용해서 전역 컴포넌트 생성 방법에 대해 설명한다. Vuetify 라는 UI Framework를 이용해서 버튼(v-btn)을 생성하였다. 1. 버튼 컴포넌트 생성 `버튼`을 컴포넌트로 만들었다. $attrs는 부모로 부터 전달받은 pro..

[Vue.js] Vue 관련 문서 모음 Vue.js (Nuxt.js) 를 공부하는데 도움될 만 한 사이트 모음 [ 공식 사이트 ] Vue.js 공식 사이트 (한글) (2.0) https://kr.vuejs.org/v2/guide/index.html (3.0) https://v3.ko.vuejs.org/guide/introduction.html Vue API (한글) https://kr.vuejs.org/v2/api/index.html Vuex 공식 문서 (한글) https://vuex.vuejs.org/kr/ Vue-loader https://vue-loader-v14.vuejs.org/kr/ (한글) https://vue-loader.vuejs.org/ (영문) Vue Style-guide (영문) h..

[Vue.js] vscode 에서 vue 디버깅 1. vscode 에서 디버깅 모드 설정 가장 먼저 vscode에서 DEBUG 화면에 들어가서 [톱니바퀴모양]을 누른다. launch.json 파일이 자동으로 열리게 되며, 여기서 디버깅 모드 설정을 할 수 있다. 🔨 launch.json 파일 // launch.json { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configu..