Vue.js 배우기 기초이론 Lv.02

1. Vue CLI

: Standard Tooling for Vue.js Development 명령어 실행/보조 도구

= 커맨드창/터미널 창에서 타이핑으로 명령어를 입력하면 실행해주는 도구

= 내부적으로 WebPack을 활용하며, Vue 프로젝트 생성, Vue 플러그인 설치/삭제 등을 명령어로 제공

 

 

1) 설치 & 프로젝트 생성

(기본셋팅환경- Node.js 설치완료 : Node.js 내의 npm(Node Package Manager)을 통해 vue-cli 패키지를 설치하므로)

# npm(node pakage manager)은? : package.json 파일에 정의가 되어있는 scripts 아래 명령어를 간략하게 실행하기 위해 도와준다.

 

-1. VSCode 메뉴바MenuBar에서 Terminal - new Terminal

-2. node -v : 버전확인

-3. npm -v : 버전확인

-4. npm install -g @vue/cli : 명령어 입력 (홈페이지 https://cli.vuejs.org/guide/installation.html)

-> 다운로드 실행됨 (+ @vue/cli@4.5.4 : 버전확인2020.09.08기준)

-5. 프로젝트 생성 : vue create vue-cli 명령어 터미널에 입력 -> default 엔터

# 오류(vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\사용자\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다.) 발생 시 해결방법 : 터미널 종류를 powershell이 아닌 bash로 바꿔서 다시 시도!

 

2) 프로젝트 실행

-1. cd vue-cli : 폴더이동 명령어 - (master) 표시 확인하기

-2. npm run serve : 서버 실행 명령어 --> http://localhost:8080/ 구동

3) 프로젝트 최초 구조

 

# CLI 2.x와 3.x의 차이점

-명령어 (vue 프로젝트 생성) : 인프런강좌(vue.js완벽가이드- 실습과 리팩토링으로 배우는 실전 개념) 참고

  - 2.x : vue init

  - 3.x : vue create

-웹팩 설정 파일*

  - 2.x : 노출 O

  - 3.x : 노출 X

-프로젝트 구성

  - 2.x : 깃헙의 템플릿 다운로드

  - 3.x : 플러그인 기반으로 기능 추가

- ES6 이해도

  - 2.x : 필요 X

  - 3.x : 필요 O

 

 

2. 도움이 될 라이브러리 설치 (in Terminal)

: 싱글파일 컴포넌트 체계에서 NPM 방식으로 라이브러리 설치

1) 라우터 설치 명령어 : npm i vue-router --save

2) 엑시오스 설치 명령어 : npm i axios --save

3) Vuex 설치 명령어 : npm install vuex --save

 

 

3. 라우터/엑시오스 설정

1) 라우터 사용

-1. router 폴더 - index.js 파일 생성

-import 후, Vue 에 VueRouter 사용 명시

-mode: 'history' 주소창에 자동으로 생성되는 # 없도록 지시

-routes: [

   { path: '/',                    //defalut 경로

     redirect: '/경로' },

   { path: '/path',

     name: 'name',

     component: import해온 컴포넌트 지정 }

]

-2. main.js 파일에 router 사용 지정

주의 : 위에서 export const router 로 지정하였기에 { router } 형태로 하위값을 가져올 수 있다. (사용자가 정의한 동일명 사용)

 

2) 엑시오스 사용

-1. api 폴더 - index.js 파일 생성

- axios import 해오기

- 함수작성후, 함수명을 그대로 export 지정해주어야 다른 곳에서 import 해와서 사용 가능

 

4. Vuex란? - Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리

(https://vuex.vuejs.org/installation.html#installation)

- 복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하기 위한 상태 관리 패턴이자 라이브러리

- React의 Flux(MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발패턴- Unidirectional data flow) 패턴에서 기인함

- 복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 데이터 전달이 어려워지므로 Vuex가 필요함

- 즉, 총괄적인 데이터/함수 저장소로 사용함으로서 동일 데이터를 다양한 컴포넌트에서 가져와 사용할 수 있게 된다.

 

## Vuex로 해결할 수 있는 문제 ##

-1. MVC 패턴에서 발생하는 구조적 오류

-2. 컴포넌트 간 데이터 전달 명시

-3. 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제

 

## Vuex 컨셉 ##

- State : 컴포넌트 간에 공유하는 데이터 data()

- View : 데이터를 표시하는 화면 template

- Action : 사용자의 입력에 따라 데이터를 변경하는 methods

 

## Vuex 구조 ##

 (단순화) : 컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태

 

1) 사용방법 / 등록

-1. Store 폴더 - index.js 생성

# Vue 와 Vuex 구성요소 비교 & 접근 방법 ##

- data / state -> this.$store.state.데이터명

- computed / getters -> this.$store.getters.메소드명

- methods / mutations (동기) -> this.$store.commit('메소드명', 데이터)

- aysnc methods / actions (비동기) -> this.$store.dispatch('메소드명', 데이터)

 

-2. main.js 파일에서 위에서 만든 뷰엑스를 등록

주의 : 위에서 export const store 로 지정하였기에 { store } 형태로 하위값을 가져올 수 있다. (사용자가 정의한 동일명 사용)

 

5. 간단 실습 (css는 신경쓰지 않음)

목표1. 헤더(HEADER)에서 라우터를 이용하여 list화면과 input 화면 이동

목표2. input 화면에서 값(num, text)을 넣어 보내어 store의 값을 변경하고 그 값을 다시 화면에 표시

목표3. input 화면에 넣은 숫자값을 axios를 통해 보내어 데이터를 가져와 화면에 표시

목표4. input 화면에서 넣은 값들을 객체에 담아 list 형태로 보여주기

 

(1) App.vue

① components 폴더에 ~.vue 형태로 4개의 파일 생성

② App.vue 파일에서 헤더와 푸터 import 해옴

③ components에 import 해온 컴포넌트 등록

④ template 내에 등록한 컴포넌트 작성

⑤ 라우터를 통해 보여질 화면을 지정할 위치에 <router-view> 작성

 

(2) AccoutFooter.vue & AccoutHeader.vue

ㅡ푸터는 영역을 보여주기 위함으로 사용해서 간단하게

ㅡ헤더에 <router-link>를 통해 <router-view>에서 보여줄 값을 전달 -> to="/path" 지정

※ 중요, 경로(path)는 router-index.js에 등록!!

 

(3) api - index.js (위의 스샷과 동일)

ㅡ비동기처리를 할 함수를 작성

 

(4) store - index.js

1) state에 저장하고자 하는 숫자값, 텍스트값과 객체를 담을 list 와 user를 지정

2) getters로 state의 값을 이용하여 새로운 값 만들 메소드 지정

3) mutations 에 값을 받아와 state.list와 stat.user에 값을 담는 메소드 지정

4) actions 에서 비동기 함수 처리를 하고 mutations에 있는 함수를 불러와 사용할 메소드 지정

ㅡapi의 함수를 사용하기 위해 import 필수 필요

 

(5) AccountList.vue

ㅡ1) methods 에 store의 list값을 가져올 함수 작성 -> getList();

ㅡ2) 뷰가 생성될 때 실행할 함수 지정 created(){ this.getList(); } -> this. : data / methods 에 접근

ㅡ3) 배열 list 값을 차례대로 뿌려줌

경우1. v-for = "( item ) in list" v-bind:key="item.name"

                    item = 배열 안의 값에 하나씩 접근

경우2. v-for = "( item, index ) in list" v-bind:key="item.name"

                    item = 배열 안의 값에 하나씩 접근

                    index = 배열의 인덱스를 반환

 

(6) AccountInput.vue

ㅡ1. <input v-model="지정data" />를 이용하여 지정된 data 값을 바꿔줌

      & <button  @click="메소드명" />을 통해 값을 넘겨줌 ( v-on:click 과 @click는 동일한 의미를 가진다)

ㅡ2. methods의 inputStore() 함수로 store의 data 값을 바꿔준다

      - num 과 text 값을 바꿈

      - this.$store.commit("putList", 데이터)를 통해 mutations의 putList(데이터) 함수 실행

      - this.$store.dispatch("GET_USER", 데이터)를 통해 actions의  GET_USER(데이터) 함수 실행

ㅡ3. store의 바뀐 값을 확인할 수 있도록 각각, state와 getters 의 값을 화면에 보여준다

       {{ this.$store.state.data }} , {{ this.$store.getters.date }}

ㅡ4. store의 값 중, 객체로 받아온 user의 값은 v-for를 통해 하나씩 값을 보여줌

경우1. v-for = "( value ) in list" v-bind:key="item.name"

                    value = 객체 내의 value 가져옴

경우2. v-for = "( value, key ) in list" v-bind:key="item.name"

                    value = 객체 내의 value 가져옴

                    key = 객체 내의 key 값을 가져옴

경우3. v-for = "( value, key, index ) in list" v-bind:key="item.name"

                    value = 객체 내의 value 가져옴

                    key = 객체 내의 key 값을 가져옴

                    index = { key : value } 객체의 인덱스를 가져옴

 

 

 

(7) 결과 화면

_입력 전 화면_

_입력 후 화면_

<Vue_Study_Lv2.> : github.com/sogno12/Vue_Study_lv2.git