Vue CLI 기초 정리

0. 들어가면서

Vue CLI에 대한 기초를 시작하려 한다. 그냥 글을 천천히 읽으면서 따라 해 보자. 그러면 자연스럽게 체득될 것이다.

 

시작하기 전에 먼저 nodejs를 설치하는 것이다. 코드는 text 뭉치에 불가한다. 그러한 텍스트를 컴퓨터가 이해할 수 있도록 만드는 것이 프로그램 언어인데, 자바스크립트는 언어가 아니다. 따라서 자바스크립트를 웹이 아니라 우리 컴퓨터에서 해석할 수 있도록 만들어주는 환경이 nodejs이다. 구글에 치면 쉽게 설치가 가능하다. 설치 확인을 위해서는 터미널에 node -v를 쳤을 때 버전이 나온다면 설치가 된 것이다.

 

파일 이름을 hanpy.js라고 하면 hanpy라는 nodejs 파일이 생성된 것이고 $ node hanpy.js라고 하면 파일이 실행이 된다.

 

파이썬을 설치하면 패키지도 자동으로 설치돼서 사용할 수 있었듯이 nodejs도 설치하면 사용할 수 있는 패키지가 있다. 바로 npm이다. 파이썬에서 pip install 한 것과 같이 여기서는 npm install을 하면 라이브러리를 많이 다운로드할 수 있다. 기초적인 준비가 끝났으니 시작해 보자.

 

우리는 앞에서 기본적인 Vue에 대해 배웠다. Vue의 기초 문법이 궁금하다면 여기를 클릭하자. 기초 문법을 알게 됐다면 이제 Vue CLI에 대해 배워보자.

 

지금까지 배운 내용은 아래와 같다. 참고하길 바란다.

2020/11/04 - [Web/Vue.js] - [Vue.js] 1. 시작하기

2020/11/17 - [Web/Vue.js] - [Vue.js] 2. 데이터 받기(get)

2020/11/20 - [Web/Vue.js] - [Vue.js] 3. lifecycle hook 적용하기

2020/12/05 - [Web/Vue.js] - [Vue.js] 4. scrollmonitor(무한스크롤) 적용하기

2020/12/07 - [Web/Vue.js] - [Vue.js] 5. computed 기초 정리

2020/12/15 - [Web/Vue.js] - Vue 배포 기초

2020/12/17 - [Web/Vue.js] - Vue Cli router 기초 정리

 

 

 

0.1 컴포넌트(Component)

본격적으로 들어가기 전에 컴포넌트에 대한 개념을 간단히 알고 가자. 우리는 front-end 개발을 하고 있다.

컴포넌트란, Vue의 가장 강력한 기능 중 하나이다. 재사용 가능한 코드를 캡슐화하는 데 도움이 된고 Vue 컴포넌트는 Vue 인스턴스이기도 하다. 예를 들면, facebook의 하나의 페이지를 보면 섹션이 구분되어 있다. 피드가 보이는 부분도 있고 navbar, footer, 채팅화면 등과 같이 하나의 페이지에 각각의 분리된 부분의 각각이 뷰의 인스턴스이자 Vue 컴포넌트 하나라고 보면 된다. 이렇게 컴포넌트로 나누는 이유는 관리하기 쉽기 때문이다. (Django에서 이렇게 비슷하게 한 것이 include 확장이다.)

 

이제 유튜브 페이지를 보자. 유튜브에서 영상을 볼 때, 아래에 다른 영상 보기가 있다. 인터넷 창을 작게 했다가 크게 바꾸면, 다른 영상 보기 부분이 바뀌는 것을 볼 수 있다. 이렇게 비슷한 구조를 재사용을 위해서 컴포넌트를 사용한다고 할 수 있다.

 

즉, 쉬운관리와 재사용성을 위해서 컴포넌트를 사용한다. 컴포 먼트가 많아질 수 록 html 길이가 길어지기 때문에, Vue CLI에서는 각자의 파일로 분리하고, 분리한 파일을 하나로 합치는 과정이 있음을 인지하자. 이때 생성되는 Vue 인스턴스는 .vue 형태로 분리해서 파일로 관리한다. 마지막으로 각각의 컴포넌트를 하나의 파일로 분리해서 관리하고, 이러한 것의 명칭을 SFC( Single File Component )라고 한다.

 

1. vue cli 설치

$ npm install -g @vue/cli

라고 터미널에 치면된다. 자동 설치가 시작된다.

 

-g는 글로벌 인스톨이라는 뜻이다. 그렇다고 내가 판단해서 전역으로 쓰는 것들에 -g를 붙여서 설치하면 절대 안 된다. 설치 문서 보면 다 정해져 있다. 공식문서를 참고하여 -g 가 붙은 거만 붙여서 설치를 하자. 사용자가 판단하는 거 아니다.

 

+ npm과 yam은 뭐가 다른가요? npm이 서비스를 먼저 제공하고 있었다. 하나 밖에 없어서 속도도 느리고 보안적 측면에서 별로 였다. 그래서 불만이 생긴 facebook이나 구글이 모여서 yarn이라는 패키지 매니지를 만들어 제공한다. 그제야 npm이 긴장하고 다시 잘 만들어서 현재 둘 다 나쁘진 않다. 쓰고 싶은 걸로 패키지 설치하면 된다. 우리는 기본적으로 제공해주는 패키지인 npm을 사용한다.

 

 

현재 우리는 vue 설치를 완료했고, 지금부터는 vue라는 명령어를 쓸 수 있다.

vue --version 으로 설치 확인해 보자.

 

 

 

2. 프로젝트 생성

$ vue create 프로젝트이름

프로젝트 생성을 원하는 위치에 들어가서 위의 명령어를 치면 아래와 같이 선택하는 화면이 나온다. 

Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

선택지가 default랑 Manually select features로 2가지가 있다.

Manually select features의 뜻은 사용자가 원하는 기능을 직접 선택하는 거다.

우리는 babel과 eslint(오타나 에러 잡아냄)이 포함된 default를 선택하고 엔터 하면 된다.

 

생성하다 보면 아래와 같은 설명이 뜬다.

�  Generating README.md...

�  Successfully created project 03_first-vue-cli.
�  Get started with the following commands:

 $ cd 프로젝트이름
 $ npm run serve

위의 순서대로

$ cd 프로젝트명              (생성한 프로젝트 폴더로 들어가기)

$ npm run serve            (서버 실행하기)

하고 엔터 친다. 그러면 아래와 같은 터미널이 뜨면 서버를 실행시킨 것이다.

  App running at:
  - Local:   http://localhost:8080/   
  - Network: http://192.168.0.11:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build. 

 

local 열 여보자. 그러면 아래와 같이 뜬다. (위의 url을 클릭)

 

 

 

 

 

여기까지가 기본 준비 끝이다.

err가 난다면 천천히 처음부터 다시 해 보자. (폴더 이름이 & 이나 한글이 있다면 작동하지 않을 수 있다.)

 

 

 

 

 

3. 생성물 확인

프로젝트 생성 후 프로젝트 안에 새롭게 생긴 것들은 아래와 같을 것이다.

+ node_modules는 굉장히 많은 패키지가 있기 때문에 꼭. gitignore에 넣어 줘야 한다.

 

3.1. public폴더

public 폴더 안에 index.html이 있다.

index.html

-페이지의 뼈대가 되는 html이 있다. 안에 div는 main.js와 관련이 있다

- noscript는 지원하지 않는다는 뜻이다.

 

3.2. src폴더

src폴더 안에는 assets폴더, components폴더, App.vue 파일, main.js파일이 있다.

assets

- 우리가 사용하는 이미지 저장되어있다.

components

- 우리가 만든 컴포넌트를 여기서 관리한다.

App.vue

- 대표 컴포넌트

main.js

- 페이지 실행이 될 때 실행이 된다. mount 해준다.

 

 

package.lock.json

- 새로운 버전이 나와도 자동으로 업데이트를 하지 말고 적힌 버전으로 적게 한다. 즉, 고정할 버전을 여기에 적어주면 된다.

package.json

- 장고에서 requirments.txt와 하는 일이 유사하다. Vue에서 설치한 파일들을 모아놓는 곳이다.

README.md

- git과 관련된 파일로 설명을 적어준다.

 

 

 

3.3. App.vue

App.vue를 열어보자. 아래와 같은 코드가 적혀있다.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

대략적인 구조를 보면 template, script, style 세 개로 이루어져 있다. style은 css를 적는 것이고, template와 script를 각각 알아보자.

 

 

template

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

div안에 img와 HelloWorld가 들어가 있다. img는 예상할 수 있듯이 서버를 열었을 때 나온 첫 페이지의 이미지를 나타내고 HelloWorld의 msg는 이미지 밑에 있는 글자를 타나 낸다. 글자를 한번 바꾸면서 실행한 웹이 바뀌는 것을 확인해 보자.

 

 

 

script

import HelloWorld from './components/HelloWorld.vue'

먼가 경로인 것 같다. 들어가 보면, 현재 위치가 App.vue니까 같은 폴더 안의 components 폴더 안에 HelloWorld.vue 파일을 불러오는 것 같다. HelloWorld.vue를 들어가 보면 역시, template, script, style로 이루어져 있는 것을 확인할 수 있다. HellowWorld.vue는 서버를 켜면 첫 페이지 화면을 나타내고 있는 것이다. 따라서 새로운 화면을 만들기 위해서는 나중에 삭제할 부분이라는 것을 인지하고 있자.

 

 

 

3.4. HelloWorld.vue

HelloWorld.vue의 script부분을 보자.

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

python에서 import는 본 적이 있지만 export는 처음 본다.

export default에서 export는 내보낸다는 뜻이고 default는 기본값이라는 뜻이다.

정리하면 script 부분은 export + default + 객체(key와 value)로 만들어짐을 알 수 있다.

 

 

 

 

3.5. main.js

main.js 들어가 보니 이 친구가 뭔가를 꺼내고 있다.

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

new Vue 없으면 동작하지 않는다. Vue기초에서 배웠는 거와 다르게 nuw Vue안에 el이 없는 이유는 el: '#app'을.$mount('#app')이 대신 수행한다. 즉, 동작을 수행하는데 한 가지만 되는 것이 아님을 인지하자.

 

 

 

4. component 생성하기

위에서 판단한 것들을 바탕으로 새로운 component를 한번 추가해 보자. components 폴더 안에 MyComponent.vue 만들자. 이때 파일 이름의 naming convention은 CamelCase로 적자(첫 단어가 대문자고 음절별로 대문자 => 캐멀 케이스)

 

 

우리는 위에서 component의 구성요소를 살펴봤듯 아래와 같다.

<template>
</template>

<script>
</script>

<style>
</style>

 

기본 뼈대에 넣을 것들을 추가하자. name은 그냥 파일 이름 적어줘야 한다.

<template>
    <h1>나의 첫 컴포넌트</h1>
</template>

<script>
export default {
    name: 'MyComponent',
}
</script>

<style>
</style>

 

 

다시 App.vue로 가서 component를 추가를 하자.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <MyComponent />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import MyComponent from './components/MyComponent.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    MyComponent,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 

 

 

4.0 정리

App.vue 에 컴포넌트를 추가하는 순서.

<template>
   3번위치
</template>


<script>
import HelloWorld from './components/HelloWorld.vue'
1번위치
export default {
  name: 'App',
  components: {
    2번위치
    HelloWorld
  }
}
</script>

 

components 폴더 안에 파일을 만들고 App.vue 와서

1. 1번 위치에import 한다.

2. 2번 위치에등록한다.

3. template안에서 사용한다. (html)

 

 

 

 

5. data 추가하기

좀 더 편하게 코딩을 하기 위해 VScode의 extention에 vetur을 깔면 좋다. 그리고 파일 만든 후에, <를 적고 tap을 누르면 아래처럼 기본 틀이 자동으로 그려진다.

<template>
  <div>
  
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

주의해야 할 점은 무조건 template 안에는 div로 묶어서 하나의 div만 사용한다.

 

 

 

Vue 기초를 배울 때는 data : {} 이런 식으로 data에 객체를 넣었었다. 그러나 여기서는 객체가 아니라 함수를 넣어야 한다. 왜냐하면 공식문서에 CLI에서 특별하게 data는 함수로 적으라고 적혀있기 때문이다. 그리고 data안의 속성은 template에서 보관법( {{ }} )으로 쓸 수 있다. 적용해 보면 아래와 같이 쓸 수 있다.

 

<template>
    <div>
        <h1>Hanpy</h1>
        <h2>{{ message }}</h2>
    </div>
</template>

<script>
export default {
    name: 'MyComponent',
    data: function () {
        return {
            message: 'hi',
            posts: [
                { id: 1, title: 'hi', content: 'hello' },
            ]
        }
    },
};
</script>

<style>
</style>

 

 

 

 

6. axios

API 하려면 axios 설치해야 한다. 앞에서는 배운 기초 Vue에서는 CDN을 적어줬지만, 여기는 그런 게 없어 보인다. 다만 main.js에서 vue를 불러오는 방식처럼 사용하면 된다. CDN 은 필요 없이 간단히 아래처럼 설치를 하면 된다.

$npm i axios

설치 이후에 import axios from 'axios'라고 script아래 써주면 된다. 이때 주의할 점은 import에는 ''가 없고 from 부분에서는 ''를 붙여줘야 한다.

<template>
    <div>
        <h1>Hanpy</h1>
        <h2>{{ message }}</h2>
        <ul>
            <button @click="getPosts">데이터 모우기</button>
            
            <li v-for="post in posts" :key="post.id">
                {{ post.title }}
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'MyComponent',
    data: function () {
        return {
            message: 'hi',
            posts: []
        }
    },
    methods: {
        getPosts: function() {
            axios.get('https://koreanjson.com/posts')
                .then(res => this.posts = res.data)
        },
    },
};
</script>

<style>
</style>

template안의 div 내부에 {{ message }}를 넣어도 출력된다.

그리고 v-for로 돌리려면 

<li v-for="post in posts" :key="post.id">로 적어주면 된다. :key를 안 적으면 오류 뜬다

 

 

 

 

 

우리가 Vuejs를 하는 목적은 Single page application을 만드는 것이 목적이다. 그런데 우리가 지금 만드는 것은 문서 한 장이 아닌 것 같다는 생각을 할 수 있다. 하지만 현재 만드는 것은 유지보수와 좀 효율적으로 만들기 위해 기능별로 나눠서 vue 파일을 만들고 있는 것은 맞다. 하지만 나중에는 npm build 과정을 거치면 나눠진 것(분리되어 있는 component)을 하나의 페이지로 합쳐지게 된다. 따라서 Single page application이라고 할 수 있다.

 

 

 

이제 router에 대해 배우러 가보자.