일단 Doit

VSCode 실행후 Extension으로 이동 후 해당 Extension 검색 후 설치 필수 설치 Vetur Vue개발에 필요한 코드 하이라이트를 위해 사용 ESLint 자바스크립트 문법 검사 및 자동 수정 선택 설치 Vue VSCode Snippets 코드 자동 생성을 위한 확장팩. Java와 같은 효과를 기대하긴 어렵지만 잘 사용한다면 코드 작성시 유용할 수 있다. vscode-icons 아이콘 보기 쉽게 표시 폴더 및 파일 아이콘을 구분지어 표시 Git History

Vue 2023. 1. 22. 14:52

커스텀 Component를 만드는 경우가 종종 생기는데, 그때 props로 전달해도 되지만 v-model로 변경된 값을 사용하고자 하는 경우가 있다. props로 전달했을 경우는 변경된 값을 event로 전달 받아야 하지만, v-model은 바로 변경된 값을 사용할수 있다. 예를 들어 input을 가지고 있는 공통 input을 만들어보자. 만드는 절차는 간략히 보면 아래와 같다 . 1. 공통 Component 생성 2. v-model로 받을 인자를 props로 설정 : - Vue2에서 v-model 선언 export default { model: { prop: 'title', }, props: { // 다른 목적을 위해 'value' 사용이 가능 합니다, model을 지정하지않을때 'value' 사용 v..

Vue 2023. 1. 22. 14:49

컴포넌트를 사용할때는 import를 이용해서 component를 등록하여 사용한다. 하지만, 공통 컴포넌트는 어디서나 사용할 수 있기때문에 전역으로 등록하면 각각 import를 하지 않고 사용할 수 있는 장점이 있다. 하지만 주의해야 할점은, 그렇다고 많은 컴포넌트를 전역으로 등록하면, 초기 로딩시 무수히 많은, 사용하지도 않을 컴포넌트를 미리 로드하여 리소스 낭비가 발생한다. 따라서, 매우 Common한 컴퍼넌트 예를들면, Check, Input, Select와 같은 컴퍼넌트만 미리 등록해야 한다. 먼저 등록하는 방법은 아래와 같다. components/common/index.js import upperFirst from 'lodash/upperFirst' import camelCase from 'lo..

Vue 2023. 1. 22. 14:48

1. Vue Router 설치 npm install vue-router@4 2. Vue Router 사용 main.js import { createApp } from 'vue' import App from './App.vue' import CommonComp from '@comp/common' import Store from '../store' import Router from '../router' createApp(App) .use(CommonComp) .use(Store) .use(Router) .mount('#app') router/index.js import { createRouter, createWebHashHistory } from 'vue-router' import routes from '...

Vue 2023. 1. 22. 14:46

"Vuex는 Vue.js 상태관리 패턴 입니다." 사실 모든 SPA 프로젝트에서는 상태관리 패턴을 기본으로 사용중이거나 고려중일 것입니다. 사용을 고려하는 이유들은 간단히 보면 아래와 비슷합니다. 1. 각 Components 간의 데이터를 공유하고 처리 가능 2. 화면 구현과 이터 처리하는 로직을 구분함으로서 유지보수가 용이 1. 설치 npm i --save vuex@next 2. Vuex 구조 namespaced를 사용하여 아래와 같이 각 업무 별로 구분해준다. 3. vuex 사용 : Namespaced를 사용할 경우 실제 vuex를 사용하고자 하는 component에서 아래와 같이 사용한다. createNamespacedHelpers(moduleName) 그런데 이 경우 moduleName이 정확해야..

Vue 2023. 1. 22. 14:42

나같은 경우는 보통 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