일단 Doit

나같은 경우는 보통 Vue Application Package 구조를 잡을때 아래와 같이 잡는편이다. 그리고 각 폴더 밑으로 업무레벨로 폴더구조화 한다. ─ api # Backend API 정의 : *.js │ ─ config # 빌드설정 │ ─ public │ ─ router # 라우터 설정 │ ─ src │ └ assets │ └ components # 각 Vue Component : *.vue │ └ constants # 상수값 정의 : *.json │ └ mixins │ └ page # 라우터에 정의한 Vue Component : *.vue │ ─ store

Vue 2023. 1. 22. 14:33

Vue Component에서 해당 데이터를 확인하거나 함수를 Chrome에서 테스트 하고 싶을때, 바로 접근 할수가 없어서 테스트가 어려운 경우가 있다. debugger 코드를 사용할 수도 있지만, 간단하게 사용할 수 있는 방법도 있다. created(){ window.test = this } 이제 window 변수로 test가 생성되었으니 크롬 console에서 바로 접근이 가능하다. 변수, 함수, 라우터, vuex까지 모두 테스트 해보자. Doit 주의 : 단, 테스트 끝나고 반드시 지우자. window 전역 변수라 메모리에서 사라지지 않으며, 누구나 접근할 수 있다.

Vue 2023. 1. 22. 14:32

ESlint는 잘못된 코드나 권장하지 않는 코드를 자동으로 검출하고 자동으로 수정해주는 반드시 필요한 도구다. 무조건 사용하자. 1. VS Code extension 설치 2. npm으로 eslint 설치 3. .eslintrc.js 생성 4. autofix 설정 1. VS Code extension 설치 사진 삭제 사진 설명을 입력하세요. 2. npm으로 eslint 설치 npm i --save-dev eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise 3. eslintrc.js 생성 root 경로에 .eslintrc.js 파일 생성 module.exports = { env: { browser: true..

Vue 2023. 1. 22. 14:31

1. UglifyJsPlugin사용 : js minify 설치 npm i --save-dev uglifyjs-webpack-plugin webpack설정 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { productionSourceMap: false, lintOnSave: false, configureWebpack: { optimization: { minimizer: [new UglifyJsPlugin()] } }, css: { sourceMap: false } } 2.lodash 삭제 또는 필요 Function만 import - javascript에서 제공하는 기본 method로 변경 - method 직접 구현 3..

최적화 2023. 1. 22. 14:28

먼전 각 Bundle의 용량을 분석하여 어느곳에서 많은 용량을 차지하고 있는지 확인해야 합니다. https://www.npmjs.com/package/webpack-bundle-analyzer webpack-bundle-analyzer Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. Latest version: 4.7.0, last published: 3 months ago. Start using webpack-bundle-analyzer in your project by running `npm i webpack-bundle-analyzer`. T www.npmjs..

최적화 2023. 1. 22. 14:26

Vue Cli 3.x 부터는 config파일이 없습니다. 직접 vue.config.js 파일을 만들어야 합니다. vue.config.js가 필요한 이유는, 개발, 운영등 빌드 환경과 빌드 옵션을 추가하기 위해 사용합니다. 구성은 아래와 같습니다. 기본 빌드 환경 + 각 빌드 환경 + 각 빌드 환경 변수 1. 기본 빌드 환경 파일 : vue.config.js 2. 각 빌드 환경 파일: dev.config.js, prd.config.js... 3. 각 빌드 환경 변수 : .dev.env, .prd.env ... vue.config.js const path = require('path') const merge = require('webpack-merge') const buildConfig = process.e..

Vue 2023. 1. 21. 23:35

Git은 형상 관리 툴이다. 즉, 내가 만든 소스를 버전 별로 관리하고 다른 사람과 협업하여 소스를 합치고 관리하는등 소스를 관리 해주는 역할은 한다. Git을 연결하는 절차는 아래와 같다. 1. gihub 계정 생성 2. Repository 생성 3. Project와 git 연결 1. gihub 계정 생성 https://github.com/ 이동 후 회원 가입 GitHub: Let’s build from here GitHub is where over 94 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review cod..

Git 2023. 1. 21. 22:48

Vue.js는 한국어로 제공되는 공식 문서가 있으므로 해당 공식 사이트를 정독한다면 Vue.js 어느정도 개발하는 것이 가능합니다. 특히 Vue3.0, Compotistion API를 공부하는 것이 좋습니다. https://v3-docs.vuejs-korea.org/guide/quick-start.html 빠른 시작 | Vue.js v3-docs.vuejs-korea.org https://v3-docs.vuejs-korea.org/ Vue.js - The Progressive JavaScript Framework | Vue.js 접근성 HTML,CSS, 자바스크립트 표준을 기반으로, 쓰기 편한 API와 최고 수준의 문서를 제공합니다. v3-docs.vuejs-korea.org https://v3-docs..

Vue 2023. 1. 21. 20:51