[개발자의품격][부트캠프][1기][17차시] Vue.js #1 | 설치, 스니핏 설정, 프로젝트 생성, 구조, 라우터

[ 영광의 시대!/2022 개발자의 품격 부트캠프 1기 ]

2022년 03월 05일 15시 30분 19초에 업로드 된 글입니다.

작성자: DandyNow

728x90

Vus.js 설치 및 프로젝트 생성

1. Vue.js 설치: https://cli.vuejs.org/guide/installation.html

2. 터미널에 프로젝트 생성 명령 입력

vue create project

3. Manually 선택

  Vue CLI v5.0.1
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)       
  Default ([Vue 2] babel, eslint) // 현재 유용한 패키지들이 Vue 2를 지원하고 있어 현업에서 주로 사용 중      
> Manually select features // 커스텀 생성

4. Babel 등 선택(스페이스바로 선택)

Vue CLI v5.0.1
? Please pick a preset: 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 // "

5. 3 버전 선택

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

6. 설정 값 선택

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x

// 히스토리모드 사용을 기본 값으로 봐야 한다. 히스토리모드를 사용하면 주소창에서 라우터 경로를 사용할 수 있다. 그렇지 않으면 해시값으로 보여준다.
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

// Standard 선택
? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

// Lint on save 선택
  ? 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

// In package.json 선택
 ? 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? (y/N) y

// 즐겨찾기 이름 입력
Save preset as: vue-basic

※ 자바스크립트 스탠더드 코딩 컨벤션: https://standardjs.com/

7. 생성된 프로젝트 폴더로 이동하여 서버 실행

npm run serve

8. VSCode의 Extension인 Vetur(Pine Wu) 설치

※ VSCode에서 Prettier Code formatter를 사용하고 있다면 프로젝트 생성 시 "ESLint + Standard config"를 선택했기 때문에 에러가 발생한다. 해결 방법은 "더보기"와 같다.

.prettierrc 파일 생성하여 Prettier 규칙 재정의

{ "semi": false, "bracketSpacing": true, "singleQuote": true, "useTabs": false, "trailingComma": "none", "printWidth": 80 }

package.json 파일에 rules 추가 후 서버 재기동

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

Vue User Snippets 등록

File > Preference > User Snippets 메뉴 이동
검색창에 vue 입력 -> vue 선택
아래 코드 입력

"Generate Basic Vue Code" : { "prefix": "vue-start", "body": [ "<template>\n\t<div></div>\n</template>\n<script>\nexport default {\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\tsampleData: ''\n\t\t}\n\t},\n\tsetup() {},\n\tcreated() {},\n\tmounted() {},\n\tunmounted() {},\n\tmethods: {}\n}\n</script>" ], "description": "Generate Basic Vue Code" }

Vue 프로젝트 폴더 및 파일 구조

node_modules : 설치된 node 모듈이 위치해 있는 폴더. npm install 명령어를 통해 설치한 모듈이 위치하는 곳
public : index.html 파일이 위치하는 곳(정적 파일이 위치하는 곳)
src : 구현되는 vue 컴포넌트 파일이 위치하는 곳
src > assets : css, image 등 파일이 위치하는 곳
src > components : Vue 컴포넌트 중 재사용을 위해서 구현된 컴포넌트가 위치하는 곳
src > router : 라우팅을 정의하는 파일이 위치하는 곳
src > store : vuex의 상태 저장소인 store 파일이 위치하는 곳
src > views : 웹 애플리케이션에서 각 화면, 즉 메뉴에 대응되는 화면에 해당하는 Vue 컴포넌트가 위치하는 곳
App.vue : 최상위 Vue 컴포넌트
package.json : Vue 프로젝트에 대한 정보 및 사용하고 있는 모듈 등에 대한 정보를 관리하고, Vue 프로젝트를 실행할 수 있는 스크립트가 정의된 파일

package.json

{
  "name": "project_self_02", // 프로젝트 명
  "version": "0.1.0", // 개발자가 지정하는 프로젝트 버전
  "private": true, // false로 하면 npm에서 누구나 검색 및 사용 가능.
  // 원하는 명령을 추가할 수 있다.
  "scripts": {
    "serve": "vue-cli-service serve", // npm run serve 명령
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  // 개발 및 운영시 필요한 모듈
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  // 개발시에 필요한 모듈
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  // eslint 설정
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    // 코딩 컨벤션 설정
    "extends": [
      "plugin:vue/vue3-essential",
      "@vue/standard"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    // eslint의 규칙
    "rules": {}
  },
  // babel이 지원하게 하는 구버전 설정
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11" // ie 11은 지원하지 않는다.
  ]
}

package.json에는 모든 모듈 정보가 기록된다. 깃허브에는 node_modules 폴더의 내용이 커밋되지 않는다. 만약 깃허브의 Vue 프로젝트를 사용하고자 한다면 pull 한 뒤 터미널 창에서 "npm install"하게 되면 package.json에 기록된 모든 모듈을 내려받을 수 있다.

Vue 프로젝트 실행 구조

Vue 프로젝트 실행 -> main.js 실행 -> App.vue 가져오기 -> public/index.html 에 마운트

Vue 프로젝트가 실행(npm run serve)이 되면 가장 먼저 main.js를 실행합니다.
main.js에서 App.vue 컴포넌트로 Vue 앱을 생성합니다.
main.js 라우터(router), 상태 관리(vuex), 믹스인(mixins), 전역 모듈 등을 로드합니다.
App.vue 에서 내비게이션 처리 및 라우터에 해당하는 컴포넌트를 실행하게 됩니다.
App.vue 컴포넌트가 public 폴더의 index.html의 html 요소 중 id가 "app"인 요소에 마운트 됩니다.

src/main.js

import { createApp } from 'vue'
import App from './App.vue' // .은 src 폴더를 말한다. App.vue를 App이라는 이름으로 import
import router from './router' // index.js 파일을 router라는 이름으로 import
import store from './store' // vuex를 설치하면 생기는 폴더인 store를 store라는 이름으로 import

// store, router를 사용하는 App을 생성하고, #app에 마운트 시킨다. #app은 public/index.html에 있다.
createApp(App).use(store).use(router).mount('#app')

src/App.vue

<template>
  // router-link는 a 태그를 만든다.
  <nav>
    <router-link to="/">Home</router-link> |  
    <router-link to="/about">About</router-link>
  </nav>
  // SPA로 작동하는 부분이다.
  // router-view에 rc/router/index.js의 routes 배열의 경로에 따라 views폴더의 component가 들어온다.
  <router-view/>
</template>

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

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

src/router/index.js

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

const routes = [
  // 루트 path에 있을때 HomeView.vue를 연결한다. vue파일을 component라고 부른다.
  {
    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')
  }
]

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

export default router

src/views/HomeView.vue

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

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

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

public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <!-- #app에 App.vue 컴퍼넌트가 마운트된다. -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Vue 컴포넌트 구조

Vue 컴포넌트는 Html 구현 영역, 자바스크립트 구현 영역, CSS 구현 영역이 명확하게 구분이 되어 있어서 프로그램 코드를 언어에 맞게 구분하여 관리할 수 있다는 장점을 가지고 있다.

<template> 태그 - Html 정의
<script> 태그 - 자바스크립트 구현
<style scoped> 태그 - CSS 정의

라우터와 컴파일의 관계

프로젝트를 실행하면 [그림 1]과 같이 컴파일이 되는데 "/js/chunk-vendors.js"는 모든 모듈(외부 라이브러리)이 들어가 있는 파일이고, "/js/app.js"는 모든 컨퍼넌트가 들어가 있는 파일이다. head에 있는 defer는 body 태그가 모두 렌더링 된 이후에 해석한다.

src/router/index.js의 라우터 지정 시 lay-load 방식을 사용하면 컴파일 시에 /js/app.js에 해당 컴포넌트가 포함되지 않고 사용자가 경로 실행 시에 webpackChunkName으로 생성된다. app.js 파일이 지나치게 무거워질 경우 사용자가 사이트 접속이 느리다고 생각할 수 있다. 따라서 사용자가 자주 접속하는 페이지는 app.js에 넣고 그렇지 않을 경우에는 따로 분리하는 것이 효과적이다. path가 다르더라도 webpackChunkName을 같게 하면 해당 이름의 js 파일에 해당 경로들이 들어가게 된다. (동일 webpackChunkName은 함께 렌더링 된다.)

{
  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') // webpackChunkName을 수정해 주어야 한다.
}

webpackPrefetch:true를 주게 되면 캐시에 컴포넌트를 올려둔다. 사용자가 화면에 접속하기 전에 [그림 2]와 같이 HTML에는 올라와 있다. 사용자가 접속하면 [그림 3]과 같이 about.js가 생성되나 용량이 없다. 무거운 컴포넌트의 경우 빠른 캐시를 이용하기 때문에 유용하다. 하지만 캐시에 올려두는 컴포넌트가 지나치게 많으면 사이트 초기 화면 렌더링 속도가 느려질 수 있다. 컴파일 시 컴포넌트를 캐시에 올리는 작업을 가장 먼저 수행하기 때문이다.

라우터를 설계할 때 이상의 3가지 방법을 잘 조합해야 한다.

{
  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", webpackPrefetch:true */ '../views/AboutView.vue'
    )
}

728x90

저작자표시 비영리 변경금지

'영광의 시대! > 2022 개발자의 품격 부트캠프 1기' 카테고리의 다른 글

[개발자의품격][부트캠프][1기][19차시] Vue.js #3 \| event (0)	2022.03.07
[개발자의품격][부트캠프][1기][18차시] Vue.js #2 \| 데이터바인딩 (0)	2022.03.05
[개발자의품격][부트캠프][1기][16차시] 부트스트랩 #4 \| 모달 (0)	2022.03.02
[개발자의품격][부트캠프][1기][16차시] 부트스트랩 #3 \| 생성 (0)	2022.03.02
[개발자의품격][부트캠프][1기][16차시] 부트스트랩 #2 \| 조회, 삭제 (0)	2022.03.02

다음글이 없습니다.

이전글이 없습니다.