일단 Doit

커스텀 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

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

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

Vue.js 개발을 위해서는 아래와 같은 준비단계를 거칩니다. 1. Node 설치 2. Vue Cli 설치 3. 개발 Tool 설치 : Visual Studio Code 3. 개발 Tool 설치 : Visual Studio Code 이제 실제 개발하기 위해서는 개발을 할수있는 환경 즉, 개발 Tool이 필요합니다. 여기서는 Visual Studio Code를 사용합니다. 이유는, 1. Microsoft(미국 IT 대기업)에서 만들었음 2. 여러 플로그인들이 많음 3. 속도 빠름 4. 무료!! https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and ..

Vue 2023. 1. 21. 20:45

Vue.js 개발을 위해서는 아래와 같은 준비단계가 필요합니다. 1. Node 설치 2. Vue Cli 설치 3. 개발 Tool 설치 : Visual Studio Code 2. Vue Cli 설치 Vue Cli : Vue를 개발하기 위해 기본 세팅을 친철하게 해주는 환경 구성이라고 보면 됩니다. 절차는 아래와 같습니다. 1. npm으로 vue cli 설치. 2. 만들고싶은 project명으로 vue project 생성. 3. vue project 실행 1. npm으로 vue cli 설치 먼저 이전의 설치한 npm을 이용하여 vue cli 설치 커맨드 실행후 아래와 같이 입력 * -g는 전역으로 여기저기서 사용할 수 있게 해주는 옵션입니다. npm install -g @vue/cli 실행하면 아래와 같은 ..

Vue 2023. 1. 21. 20:42

Vue.js 개발을 위해서는 아래와 같은 준비단계가 필요합니다. 1. Node 설치 2. Vue Cli 설치 3. 개발 Tool 설치 : Visual Studio Code 1. Node.js 설치 - npm을 사용하기 위해 설치 - npm : node.js package manager로서 간단하게 말하면, Javascript 개발 플랫폼이라고 대략적으로 이해하면 됩니다.(그냥, 수많은 오픈라이브러리를 쉽게 설치하고 사용할 수 있게 해줍니다. 심지어, javscript로 구현 가능한 서버까지...) https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 접속..

Vue 2023. 1. 21. 20:35