FrontEnd / Vue CLI 를 통해 만들어진 프로젝트 구조 파악하기 - tutorial

FrontEnd / Vue 로 TodoList를 만들려면?

Vue CLI를 통해 만들어진 프로젝트를 가지고 TodoList를 만든다면 어디를 어떻게 수정해야 할까요? 
이번 포스팅에서는 Vue CLI를 통해 만들어진 프로젝트 구조를 파악하고 동작 메커니즘에 대해서 공부해 보겠습니다.

환경 셋팅 - Vue Project 만들기

먼저 vue cLI를 이용하여 다음과 같이 vue project를 만들어 줍니다.

참고자료 : vue cli를 이용하여 project 만들기

babel : javascript 컴파일러라고 보시면 됩니다.
PWA : Progressive web applications 만들 때 체크해줍니다. todolist만 만들 것이기 때문에 체크하지 않습니다.
router : 페이지 이동과 관련있습니다.(백엔드의 controller 역할이라고 보시면 됩니다.)
vuex : 데이터를 저장하는 저장소 역할을 합니다.
CSS Pre-processors : CSS 작성을 도와주는 도구(대표적으로 Sass, Less, Stylus 가 있습니다. Stylus를 사용합니다.)
Linter / Formatter : 소스 코드의 컨센션이나 문제를 탐색해주는 도구 (여기서는 Eslint + Prettier를 선택하겠습니다.)

만들어진 프로젝트 구조

vue CLI로 프로젝트 생성

어디서부터 어떻게 코딩하지?

처음 vue 프로젝트를 만들면 어디를 어떻게 코딩해야 하는지 감이 안잡힐 수 있습니다.

생성된 프로젝트를 가지고 서버를 실행했을 때 나타나는 페이지는 public > index.html이지만, 우리가 처음 보게 되는 페이지와는 달리 index.html 에는 아무것도 없고, id가 "app"인 div 태그만 있습니다.

서버를 실행 방법은 다음과 같습니다.
terminal에서
1. 프로젝트 파일로 이동 (명령어 : cd 프로젝트파일경로)
2. 서버 실행 (명령어 : npm run serve)

 

실행했을 때 페이지와 index.html 파일

main.js

여기서 살펴보아야 할 것은 main.js입니다.

1️⃣ - main.js 위치
2️⃣ - index.html의 <div id="app"></div>와 vue 인스턴스를 연결
3️⃣ - 4️⃣번의 App.vue 컴포넌트와 index.html의 div#app 태그를 연동시켜 결과적으로 index.html을 통해 5️⃣번 app.vue를 보게 된다.

App.vue / router

그럼 이제 App.vue와 router를 살펴보겠습니다. (클릭하면 큰 화면으로 볼 수 있습니다)

왼쪽 : App.vue / 오른쪽 : router의 index.js

1️⃣ - 라우터 기능을 사용하기 위해 선언
2️⃣- 페이지를 다른 컴포넌트로 변경하기 위한 링크들
3️⃣ - routes 정보
    * path : 해당 페이지(컴포넌트)에 접근할 수 있는 url 주소
    * name : router 이름
    * component : 맵핑시킬 컴포넌트(여기서는 5번의 Home과 맵핑했습니다.)
4️⃣ - 사용할 컴포넌트 import

요약

• view 컴포넌트를 작성한다.
• controller 역할을 하는 router에 접근 경로와 view 컴포넌트를 맵핑한다.

 

위의 내용을 적용하여 아래 방법으로 진행해 보도록 하겠습니다.

1. src > views 경로에 아래와 같이 TodoList.vue 파일을 생성한다.

<template>
  <div>

  </div>
</template>

<script>
export default {

};
</script>

<style scoped>  //scoped를 달아주어야 style 이 해당 파일에만 적용됩니다.

</style>

 

2. 라우터에 todolist를 추가한다.

src > router > index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/todo-list",
    name: "TodoList",
    component: () =>
      import("../views/TodoList.vue")
  }
];
...

 

 

3. App.vue 에 todolist 링크를 달아 준다.(링크가 아니더라도  "/todo-list"로 접근이 가능합니다. (예시) http://localhost:8080/todo-list )

src > App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/todo-list">TodoList</router-link>
    </nav>
    <router-view />
  </div>
</template>
...

TodoList.vue

이전 단계에서 라우터에 /todo-list의 주소와 TodoList.vue를 컴포넌트를 맵핑시켜 놓았습니다.

따라서 TodoList.vue에 우리가 구현하려는 기능을 구현하면 됩니다.

먼저 간단하게 TodoList.vue의 <template> 을

<template>
 <div>
   <h1>TodoList</h1>
 </div>
</template>

...

<style scoped>
h1 {
  text-align: center;
}
</style>

위와 같이 수정하고 서버를 실행시켜 localhost:8080/todo-list 에 접근해보겠습니다.

 

실행 화면

잘 나오는 것을 확인했으니 todoList를 등록할 수 있는 input 태그를 추가해 보겠습니다.

TodoInput 추가해보기

 

src > components에 TodoInput.vue 생성

TodoList.vue에 TodoInput.vue 컴포넌트 등록

1. TodoInput 컴포넌트를 사용할 수 있도록 등록
2. 컴포넌트 사용

 

한번 웹 페이지에서 확인해보겠습니다.

localhost:8080/todo-list 접속 화면

TodoInput 컴포넌트가 정상적으로 추가 되었습니다.

 

해당 포스팅은 TodoList 만들기가 아닌 Vue 프로젝트 구조 파악하기이므로 여기까지 하도록 하겠습니다.

혹시 vue 기초에 대해 배우고 싶으신 분들은 아래 링크 참고 부탁드립니다.

끗~

 

Vue 입문 참고 자료 : vue 기초 익히기 기본 강좌