방학동안 알고리즘만 하기에는 재미가 없어서 이전부터 고대하던 Vue.js를 해보기로 했다. 백엔드를 하고싶은 녀석이 Vue.js 해서 뭐할까 하는 마음도 있었지만 뭐든 잘해서 나쁠거 없다.

참조: https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/

https://velog.io/@skyepodium/Vue-CLI-3.X-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

https://velog.io/@skyepodium/Vue-Router-fijr95dn4j

Vue.js

Data binding, 화면단위를 컴포넌트 형태로 제공한다. 컴포넌트 간 통신은 단방향 Data 흐름이다. (부모 -> 자식) Instance는 화면을 개발하기 위해 꼭 생성해야하는 필수단위다.

props : 상위 Component에서 하위 Component로 내리는 데이터 속성 모든 Component는 자체 Scope를 가지고 있어 다른 Component의 값을 바로 참조할 수 없다.

동일한 상위 Component를 가진 하위 Component 간의 통신은 아래와 같다. Child -> Parent -> Child

상위 하위 관계가 아닌 Component 간의 통신을 위해 Event Bus를 활용할 수 있다. router를 연결할 페이지가 동작하려면 Component가 있어야 한다. Component는 Template, Script, Style로 구성된다.

Vue CLI

그냥 개발해도 상관없지만 Vue CLI를 사용하면 프로젝트를 생성할때 조금 더 간편하다.

기본적인 폴더 구조, 라이브러리 등을 설정해주기 때문이다.

이걸 사용하려면 NodeJs가 설치되어 있어야 한다.

변수 설정도 해주면 어디서든 쉽게 npm으로 사용할 수 있다.

1. 설치 - 환경설정은 default 선택

npm i -g @vue/cli

1. 프로젝트 생성

vue create 'Project Name'

1. 로컬 서버 실행

npm run serve

1. node_modules는 vue-cli 3.x 이상이면 프로젝트 생성 단계에서 자동적으로 설치됩니다.

2. WebPack 설정 파일 vue.config.js는 3.x에서는 없기 때문에 사용하려면 추가해야합니다.

Vue Router

Routing은 웹 페이지 간의 이동방법을 의미합니다.

Vue.Js는 프론트엔드를 담당하지만 Vue Router를 통해 URL을 해당 컴포넌트에 연결해 보여줄 수 있습니다.

1. 설치

npm i vue-router --save

1. 연결

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import Example from '@/components/Example'
import TodoPage from '@/components/TodoPage'

Vue.use(VueRouter)

export const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/example',
      name: 'Example',
      component: Example
    },
    {
      path: '/todos',
      name: 'TodoPage',
      component: TodoPage
    }
  ]
});

연결을 하기 위해서는 .vue 컴포넌트를 만들어 놓아야 합니다. mode: 'history'를 사용하면 URL에 #이 들어가는걸 막을 수 있다. 하지만 히스토리 모드를 사용하면 서버가 404에러를 보고하지 않을 수 있기 때문에 따로 404 페이지를 표시하는 기능을 넣어야한다.

1. 등록

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import { router } from '@/router/index.js'

Vue.config.productionTip = false

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

1. 출력

<!-- src/App.vue -->
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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

<router-view>를 통해서 출력합니다.

예제 만들면서 연습

https://blog.storyg.co/vue-js-posts/todos-tutorial

보면서 기본적인 Todo를 한번 만들어 보았다.

git: https://github.com/pjs21s/Todo_Vue

물론 더 연습해야한다…