Vue Router ~ Webpack Template 정리

Vue Router 기초

설치 방법

구성

• children이 정상 출력되려면 상위 컴포넌트인 Docs.vue에서 <RouterView /> 컴포넌트를 추가로 등록해야 함.

• docs와 docsId를 별개의 컴포넌트로 등록할 경우 Docs.vue에 있는 콘텐츠를 제외하고 DocsId.vue의 콘텐츠만 화면에 출력할 수 있음.

• 상황에 따라 맞게 등록하면 됨.

• DocsId.vue에서 id에 대한 접근은 $route.params.id로 할 수 있음.

• name이라는 해당 경로에 이름을 부여할 수 있음. 이를 활용하여 경로를 push할 때 @click="$router.push({ name: 'home' })"으로 지정할 수 있음.

• 경로에 query를 통해 이름, 나이, 이메일 등의 정보를 저장할 수 있음.

Vue Router 모드

• Hash - 도메인 뒤에 /#/~~으로 처리되는 방식.
• 장점 : 하나의 페이지에서 내용을 구분하기 때문에 서버에 요청을 추가적인 요청을 하지 않고도 페이지를 로딩할 수 있음. 새로고침해도 주소가 변하지 않음.
• 단점 : 주소가 지저분함. 하나의 도메인에서 처리하기 때문에 검색 엔진에 좋지 않음.

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

• HTML5(history mode) - 도메인/~~으로 처리됨.
• 장점 : 주소가 깔끔함. 검색 엔진 최적화.
• 단점 : 해당하는 주소에 맞게 매번 서버에 요청함. 로컬서버에서 index.html을 먼저 찾기 때문에 새로고침 시 페이지를 찾을 수 없는 현상이 나타남.

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})

서버 세팅 방법

• output에 publicPath: "/",추가. main.js에서 절대 경로 /main.js로 탐색하게 만듦.

• devServer: { historyApiFallback: true, },추가. index.html 파일로 redirect시킴.

• 실제 배포는 devServer가 아님. 배포 환경에 따라 상이함.

Vue Router 네이게이션 가드, 메타 필드

동작 순서

1. Navigation triggered.

2. Call beforeRouteLeave guards in deactivated components.

3. Call global beforeEach guards.

4. Call beforeRouteUpdate guards in reused components.

5. Call beforeEnter in route configs.

6. Resolve async route components.

7. Call beforeRouteEnter in activated components.

8. Call global beforeResolve guards.

9. Navigation is confirmed.

10. Call global afterEach hooks.

11. DOM updates triggered.

12. Call callbacks passed to next in beforeRouteEnter guards with instantiated instances.

Global Before Guards

const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  // explicitly return false to cancel the navigation
  return false
})

• beforeEach는 페이지가 접속하기 직전에 동작하는 메소드.

• 콜백 내에서 사용하는 매개변수 to와 from은 어떤 페이지로 가는지, 어떤 페이지로부터 접근을 시작하는지에 대한 정보를 얻을 수 있음.

• 대표적으로 로그인 이후 접속해야 하는 페이지 등을 구별할 수 있음.

메타 필드

• meta: { requiresAuth: true } 등 true, false로 인증을 해야 들어갈 수 있는 페이지를 결정함.

• 메타 필드는 정보일 뿐 특정 기능을 하는 것은 아님.

간단한 로그인 기능 구현

Vue Router 스크롤 동작

• SPA로 작업시 페이지가 달라지더라도 화면에 변화가 없다는 문제 발생. 만약 페이지의 콘텐츠가 비슷하다면 페이지의 이동이 이루어졌는지 헷갈릴 수 있음.

• vue 라우터는 스크롤 동작을 컨트롤 할 수 있음.

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // always scroll to top
    return { top: 0 }
  },
})

Babel 구성

• 최신 JS 문법을 구형 브라우저에서 동작할 수 있는 JS 문법으로 변환시켜주는 트랜스컴파일러. ex) const, let, var

시작하기

• npm i -D @babel/core @babel/cli

• scripts에 "babel": "babel main.js --out-dir dist"추가. 진입점이 될 파일(main.js)을 지정한 후 어떤 디렉토리에 반환할지 명시하면 됨(dist).

• 실행을 원할 경우npm run babel

• npm i -D @babel/preset-env babel-loader

• babel.config.json 파일 생성.

• 다만 @babel/preset-env만 사용하면 전역이 오염될 수 있는 위험이 있음 → npm i -D @babel/plugin-transform-runtime @babel/runtime-corejs3설치 필요.

{
  "presets": ["@babel/preset-env"],
  "plugins": [["@babel/plugin-transform-runtime", { "corejs": 3 }]]
}

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],

PostCSS, Autoprefixer 구성

• CSS를 마지막에 동작시켜 결과를 만들어내는 것.

• babel 처럼 자동으로 후처리해서 붙여주기 위함.

• —webkit, —ms 등 크로스브라우징에 필요한 접두사를 자동으로 붙여줌.

• 이 중에 대표적인 패키지가 autoprefixer임.

• autoprefixer는 공급업체 접두사를 자동으로 추가하는 패키지임.

시작하기

1. npm i -D postcss autoprefixer postcss-loader

2. webpack.config.js에 rules 추가.

3. 루트 경로에 postcss.config.js 생성.

4. package.json에 browserslist가 없다면 추가하기. 바벨에서 작성한 것과 동일.