Vue.js (2)

1. 실습 Vue 프로젝트

1) project03 프로젝트 생성하기 - 명령프롬프트에서 실행
c:\\나만의경로\\workspace_vue>vue create project03

**? Please pick a preset: (Use arrow keys)**

vue-basic ([Vue 3] babel, router, vuex, eslint)    →사용자가 저장한 템플릿
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features    →선택 (사용자지정)

 

**? Check the features needed for your project:**
(Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)

(*) Babel    →최신 자바스크립트 문법으로 구성한 코드를 구 브라우저에서도 동작될수 있게 다시 컴파일을 해 준다
( ) TypeScript
( ) Progressive Web App (PWA) Support    →모바일앱을 구성해 주는 기술
(*) Router    →메뉴를 클릭했을때 화면전환 해 주는 모듈
>(*) Vuex    →모든 뷰 콤포넌트내에서 공통으로 접근가능한 저장소를 만들어서 데이터 저장 및 상세관리를 해 준다
( ) CSS Pre-processors
(*) Linter / Formatter    →코딩규칙(들여쓰기, 따옴표등) 모듈
( ) Unit Testing
( ) E2E Testing    →End to End

 

**? Choose a version of Vue.js that you want to start the project with (Use arrow keys)**

> 3.x    →최신버전
2.x

 

**? Use history mode for router? (Requires proper server setup for index fallback in production)**

Yes

 

**? Pick a linter / formatter config:**

ESLint with error prevention only   →ESLint 자바스크립트 문법을 체크
ESLint + Airbnb config   →에어비엔비(주거지공유서비스)에서 만들어 놓은 코딩규칙
> ESLint + Standard config   →자바스크립트에서 제공하는 기본 코딩규칙
ESLint + Prettier   →Visual Code Studio의 확장팩 프리티어 코딩규칙

 

**? Pick additional lint features:**   →자바스크립트 문법을 언제 체크해 할 것인지?
(Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)

>(*) Lint on save   →저장할 때 마다
( ) Lint and fix on commit (requires Git)

 

**? Where do you prefer placing config for Babel, ESLint, etc.?**

In dedicated config files   →별도로 분리해서 관리할 것인지?
> In package.json   →하나로 관리할 것인지?

 

**? Save this as a preset for future projects?**    →현재 설정을 사용자 템플릿으로 저장할지 여부

Yes/No

2) project03 프로젝트 구조

 
package.json 파일에 규칙 추가
많은 규칙을 반영하면 오히려 코딩에 방해가 될 수 도 있음에 주의

"rules": {
"space-before-function-paren":"off"
}

 

2. 데이터 바인딩 및 라우터

※ Vue는 React와 다르게 HTML, Script, Style이 명확하게 구분되어 있음
※ 작업폴더 생성 : /src/views/1_databinding
※ 결과확인 http://localhost:8080/databinding/string
 
/views/1_databinding/DataBindingStringView.vue 생성

<template>
  <h1>Hello {{ userName }}</h1>
  <p>{{ messege }}</p>
</template>

<script>
export default {
  data() {
    return {
      userName: 'Apple',
      messege: '나는 사과'
    }
  }
}
</script>

 
/src/router/index.js

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

const routes = [
	{
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/databinding/string',
    name: 'dataBindingString',
    component: () => import(/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingStringView.vue')
  }
]

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

export default router

 
/src/App.vue

<template>
  <nav>
		<router-link to="/">Home</router-link> |
    <router-link to="/databinding/string">String</router-link>
  </nav>
  <router-view/>
</template>

 

3. 라우터 설계

전체 애플리케이션의 성능 및 속도를 좌우함
캐시에 저장됨
/src/router/index.js 에서 설정

1) component: HomeView

• 무조건적으로 실행해야 하는 첫 페이지
• 서버에 접근하는 순간 서버로 부터 app.js를 받아옴

 
2) component: () => import(/* webpackChunkName: "about" */

• About 메뉴를 클릭하면 서버에 접근해서 about.js를 받아온 후, 브라우저 캐시에 저장함
• 해당 페이지에 접속 빈도가 적은 경우
• 파일 크기가 작아서 서버로 부터 받아오는데 무리가 없는 경우

 
3) component: () => import(/* webpackChunkName: "databinding", webpackPrefetch:true */

• 메뉴를 클릭하는 순간 서버에서 받아올 파일의 크기가 큰 경우, 미리 받아오면 유리한 경우
• 화면 열리자 마자 들어갈 빈도가 높은 경우
• databinding.js에서 관리를 함. 연관성이 있도록 그룹핑이 가능함