![]()
[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-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] 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..
![]()
[Vue.js] Eslint + Prettier ⏎······· 오류 1. 오류 vue-cli 로 프로젝트를 만들고 실행하니 다음과 같은 줄바꿈을 하라는 오류가 나왔다. 2. 해결 .eslintrc.js 에 prettier 규칙 추가 [참고] [Prettier] htmlWhitespaceSensitivity 속성 // .eslintrc.js rules: { "prettier/prettier": [ "error", { htmlWhitespaceSensitivity: "ignore", } } } 그리고, vscode eslint 설정에 autoFixOnSave 옵션을 true로 변경 변경한 파일을 저장할 때마다 자동으로 eslint를 실행시켜 문제(오류)가 있으면 수정후 저장해주는 기능이다. [참고] htt..
![]()
[Django] Vue.js 사용하기 본 글은 AHackersDay의 https://ahackersday.com/blog/how-to-use-vue-and-django-together/ 글을 원작자의 동의를 받고 번역했습니다. Vue와 Django를 함께 사용하는 방법은 여러가지가 있고, 이 글에서는 우린 그 중 세 가지를 할 것입니다. 두 가지를 합치는 것은 큰 도전이 아니지만 몇 가지 생각해야 할 것이 있습니다. 1. Django Templates에 Vue 통합하기 (Integrate Vue into Django templates) Vue와 Django를 통합하는 가장 쉬운 방법은 vue script를 html코드에 포함시키는 겁니다. 이 작업이 완료되면 vue app 과 components를 만들 ..
[Vue.js] Vue-cli (2) [이전 글] [Vue.js] Vue-cli (1) # Event Bus 형제 컴포넌트 간의 값 전달방식 사용 방법 1) main.js 에서 eventBus선언 ex) // 방식 1 export const eventBus = new Vue() // 방식 2. 객체안에 method를 이용하면 eventBus를 매번 선언하지 않아도 된다 export const eventBus = new Vue({ methods: { userWasEdited(date) { this.$emit('userWasEdited', date) } } }) 2) 형제1에서 eventBus 불러와서 methods에서 사용. 방식 1: eventBus.$emit('신호명', 전달값) 방식 2: eventB..
