TIL 16 | Vue 프로젝트 생성

개발환경 설정 및 Vue 프로젝트 생성하기

Visual Studio code 설치, Node.js(+NPM) 설치, 개발에 유용한 Visual Studio Code의 확장 프로그램 설치에서 Defalt 옵션으로 프로젝트 생성(Vue CLI로 프로젝트 생성) 까지의 과정을 다뤄보겠다.

개발 환경 구성

1) visual studio code 설치하기

2) VS code Extention 설치하기 - 기본 한글 팩 등은 알아서 설치, Vetur, Debugger for Chrome, Prettier - code formatter 설치

3) Node.js 설치하기

4) Node.js 버전 확인하기 - VS code 실행 후, View -> Terminal 클릭하여 터미널 실행, node-v 명령으로 버전 확인.

5) NPM(Node Package Manager) 설치하기 - Node.js 설치 시 자동으로 설치됨. npm-v 명령으로 버전 확인.

Vue CLI로 Vue 프로젝트 생성하기

Vue CLI는 Vue 프로젝트를 빠르게 구성하고, 빌드, 디플로이 할 수 있게 도와주는 도구이다.
이떄 CLI는 Command Line Insterface 의 약자로, 터미널에서 명령어를 입력하여 컴퓨터와 상호작용 하는 방식을 의미한다. (반대 : GUI - Graphic User Interface)

1) Vue CLI 설치하기 - npm install -g @vue/cli 명령으로 Vue CLI를 설치해 준다. 이때 권한오류가 뜨는 경우가 있는데, 다음 권한오류 설정 명령으로 해결해준다.
set-ExecutionPolicy -ExecutionPolicy Unrestricted

이렇게 Vue CLI가 설치되었다면, 간단한 명령어 하나로 Vue 프로젝트 개발을 위한 각종 폴더 및 설정 파일들을 쉽게 설치할 수 있다.

Default옵션으로 vue 프로젝트 생성(설치)하기

1) vue create Vue프로젝트명 명령으로 vue프로젝트를 생성해준다.
2) cd Vue프로젝트명 명령으로 생성한 vue프로젝트 폴더로 이동한다.
3) npm rum serve 명령으로 서버를 시작한다.
4) ctrl + 왼쪽마우스로 http://localhost:8080으로 이동하면 Welcome to Your Vue.js App 화면이 뜨게 되는데, 이 화면이 보이면 Vue프로젝트가 잘 설치되었다는 것이다.

💻 Node.js, NPM 버전확인 ~ Defalt 옵션으로 Vue 프로젝트 생성(설치)과정

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

새로운 크로스 플랫폼 PowerShell 사용 https://aka.ms/pscore6

PS C:\Users\315> cd.. // 상위폴더로 이동
PS C:\Users> cd..
PS C:\> md Vue_C // 기본경로(Vue_C) 생성


디렉터리: C:\


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----      2022-04-08  오전 10:14                Vue_C


PS C:\> cd Vue_C
PS C:\Vue_C> 

 // clear하고 했던명령 되돌리려면 : 방향키 위, 아래

PS C:\Vue_C> node -v // node.js 버전 확인
v16.14.0
PS C:\Vue_C> npm -v // npm이 설치되었는지 확인
8.3.1
PS C:\Vue_C> npm install -g @vue/cli // Vue cli 설치

권한 오류 설정
set-ExecutionPolicy -ExecutionPolicy Unrestricted

PS C:\Vue_C> vue create pro01 // Default옵션으로 vue 프로젝트 생성(설치)

PS C:\Vue_C> cd pro01 // 만든 프로젝트로 이동

PS C:\Vue_C\pro01> npm run serve // 서버 시작.

ctrl + 왼쪽 마우스 클릭으로 시작된 서버를 연다. 

// 프로젝트 생성하고 나가는 법 : ctrl c

[실습 해볼 것]

기본 경로 => c:/vuepro

1) di 자동으로 만들기 : pro02c
2) di 수동으로 만들기 : pro02m
3) 프로젝트 메니저로 만들기 : pro02ui

Key Point) 새 프로젝트 폴더를 생성할 때 기본경로 위치에서 생성한다.
cd vuepro

Vue-Router 설정

라우팅이란 ? 클라이언트에서 url 주소에 따라 페이지가 전환되는 것이다.
Vue 프로젝트 내부에서는 미리 url주소를 정의하고, 각 주소마다 Vue 페이지(컴포넌트)를 연결해 놓는다.
사용자가 메뉴를 클릭하거나, 브라우저 주소를 직접 갱신 했을 때 미리 정의된 url 주소에 해당하는 Vue 페이지로 화면을 전환시킨다.

🔌 Vue는 vue에서 제공하는 공식 플러그인인 vue-router를 이용해서 라우팅을 쉽게 구현할 수 있다 !

Vue-Router 설치하기

프로젝트 폴더(기본경로 안에 생성한 프로젝트 폴더)안에 들어간 뒤, ex) C:\Vue_C\pro01> 이 위치에서.
다음 명령을 입력하여 vue-router 설치 및 기본 설정을 모두 완료할 수 있다.
vue add router

-> @vue/cli-plugin-router가 설치된다.

• 설치 완료 시 생성되는 것
  • src 폴더에 router(/index.js), views(/app.vue(컴포넌트의 최상위),컴포넌트 파일) 폴더와 파일 생성

이 상태에서 다음 명령어를 입력하여 서버를 재시작 한다.
npm run serve

컴포넌트 Basic

컴포넌트는 View, Data, Code의 세트라고 생각할 수 있다. 컴포넌트 안에는 HTML 코드가 있고, 이 HTML 코드를 실행하기 위한 자바스크립트 코드, 데이터가 존재한다.
컴포넌트는 다른 컴포넌트에 import 해서 사용할 수 있다. 즉, 재사용이 가능하다. 이것이 컴포넌트의 가장 큰 특징이다.

🔌 Vue에서 컴포넌트는 우리가 화면에서 보는 페이지 자체일 수도 있고, 페이지 내의 특정 기능 요소일 수 있다.

snippets 추가하기

Snippet은 VS code에서 제공하는 기능으로, 컴포넌트의 기본 구조 같은 매번 사용하는 코드를 등록해서 불러와서 사용하게 해준다. (일일히 만들어둔 코드를 복사하고 붙여넣기해서 사용 하지 않아도 됨)

1) File -> Preference -> User Snippets 를 선택하면 Snippets을 등록할 파일 유형을 선택하는 창이 나타난다. 여기서 'vue'를 입력한 다음 vue(vue)를 선택한다.

2) Vue.jason 파일이 열린다. 처음 Vue.jason 파일 안에는 등록된 snippets이 없기 때문에 snippets을 등록하는 방법이 주석처리되어 적혀 있는데 이걸 지우고, Vue 컴포넌트 개발 시 기본 뼈대가 되는 다음 코드를 등록해 준다.

"Generate Basic Vue Code" : {
	"prefix": "vue-start",
	"body": [
		"<template>\n\t<main>\n\n\t</main>\n</template>\n<script>\nexport default {\n\tname: '',\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\texample: '',\n\t}\n},\n\tbeforeCreate() {},\n\tcreated() {},\n\tbeforeMount() {},\n\tmounted() {},\n\tbeforeUpdate() {},\n\tupdated() {},\n\tbeforeUnmount() {},\n\tunmounted() {},\n\tmethods: {}\n}\n</script>"
	],
	"description": "Generate Basic Vue Code"
}

컴포넌트 생성

컴포넌트 생성 - src폴더에 views를 마우스 오른쪽 클릭, 컴포넌트이름.vue 입력하여 컴포넌트파일을 생성한다. ex) UserView.vue

snippet 사용하기

views 안에 새롭게 생성한 컴포넌트 UserView.vue 파일에 들어가, sta라고 입력하면 등록된 vue-start가 보인다. vue-start를 선택하여 코드를 자동으로 만든다.

[생성된 코드의 모습]

<template></template>
<script>
export default {
    data() {
        return {
            sampleData: ''
    }
},
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeUnmount() {},
    unmounted() {},
    methods: {}
}
</script>

이 기본 구조는 vue개발 시 계속해서 사용하는 것이기 때문에, 한번 이렇게 등록하면 편하게 개발이 가능하다.

데이터 바인딩

데이터 바인딩 - Vue는 양방향 데이터 바인딩을 지원한다. 이때 양방향 데이터 바인딩이란 모델(Model)에서 데이터를 정의 한뒤, 뷰(View)와 연결하면 모델과 뷰 중 어느 한쪽에 변경이 일어났을 때 다른 한쪽에 자동으로 반영되는 것을 의미한다.

[UserView.vue 파일에 데이터 바인딩을 적용한 모습]

<template>
	<h1>{{myText}}</h1>
</template>
<script>
export default {
    data() {
        return {
            myText: '오늘 수업 끝!'
    }
},
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeUnmount() {},
    unmounted() {},
    methods: {}
}
</script>

컴포넌트 파일을 라우터 router/index.js(경로)에 추가하기

생성한 UserView.vue 파일에 대한 접근이 가능하도록 router/index.js에 다음과 같이 추가해준다.
index.js는 컴포넌트 파일에 대한 접근이 가능하게 해주는 '경로'라고 생각하면 이해하기 쉽다.

[라우터(index.js)에 새로운 컴포넌트 파일을 추가한 모습]

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/UserView',
    name: 'UserView',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/UserView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

[라우터에 추가한 UserView.vue파일]

 {
    path: '/UserView',
    name: 'UserView',
...
    component: () => import(/* webpackChunkName: "about" */ '../views/UserView.vue')
  }

path: /UserView를 입력
name: 다른 컴포넌트와 구별해주는 컴포넌트의 이름 UserView 입력한다
component : () 부분에 새롭게 만든 컴포넌트의 경로를 새롭게 입력한다.
아니면, 다음 코드와 같이 파일 상단에 import문을 이용하여 경로를 입력가능하다.
import UserView from '../Views/UserView.vue' 그리고, component : 부분에는 컴포넌트파일의 이름(UserView)을 입력해준다. component : UserView

App.vue 파일에 컴포넌트 링크 추가

컴포넌트의 최상위인 App.vue 파일에 UserView.vue에 대한 링크를 추가해준다.

[App.vue 파일에 UserView.vue링크를 추가한 모습]

<template>
	<div id="nav">
    	<router-link to="/">home</router-link) |
        <router-link to="/about">about</router-link) |
        <router-link to="/UserView">UserView</router-link)
    </div>
    <router-view/>
</template>

위 코드를 보면 <router-link to"___"> 의 ___ 부분에 router/index.js 에 등록한 컴포넌트 파일의 path: 부분이 들어가고,
___</router-link) 의 ___ 부분에 name: 부분이 들어간 다는 것을 알 수 있다.

| 참고 도서 : Vue.js 프로젝트 투입 일주일 전 - 고승원 저