[DAY-40] Vue (7)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
드디어 뷰, webpack의 기초가 끝났습니다.
뷰로 노션 클로닝을 하면 정말 편리할 것 같아요.
VanillaJS에 익숙했었는데.. 더 편리한 걸 알아버렸어..

[1] Vue Router

Vue Router 라이브러리를 사용해서 페이지 분리 및 이동을 할 수 있습니다.

Vue Router는 해당 명령어로 설치할 수 있습니다.

npm i vue-router@next // next버전으로 설치합니다.

[1-1] Router mode

[1] Hash 모드

// router hash 모드
export default createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },
    {
      path: "/about",
      name: "about",
      component: About,
    },
    {
      path: "/documents",
      component: Docs,
      children: [
        {
          path: ":id",
          component: DocsId,
        },
      ],
    },
    {
      path: "/:notFound(.*)",
      component: NotFound,
    },
  ],
});

// main.js
app.use(router); // use를 사용해서 등록합니다.

<template>
  <!-- 링크 이동을 위한 태그 -->
  <RouterLink to="/">Home</RouterLink>
  <RouterLink to="/about">About</RouterLink>

  <!-- 라우팅에 따른 컴포넌트 렌더링 태그 -->
  <RouterView />

  <!-- RouterLink와 같은 역할입니다. -->
  <button @click="$router.push('/')">Home</button>
  <button @click="$router.push('/about')">About</button>
</template>

• 장점

기본적인 도메인 주소로만 요청이 들어가고, 그 외의 나머지 페이지 분류는 요청을 서버로 전달하지 않습니다.

따라서 서버에 요청을 추가적으로 전송할 필요가 없습니다.

• 단점

도메인 주소의 뒤쪽에 불필요하게 #가 들어갑니다.

하나의 도메인에 여러 요청을 처리하기 때문에 검색 엔진 최적화의 문제가 있습니다.

[2] HTML5 모드(History 모드)

// router HTML5 모드
export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },
    {
      path: "/about",
      name: "about",
      component: About,
    },
    {
      path: "/documents",
      component: Docs,
      children: [
        {
          path: ":id",
          component: DocsId,
        },
      ],
    },
    {
      path: "/:notFound(.*)",
      component: NotFound,
    },
  ],
});

해당 모드를 사용하기 위해서는 몇가지 설정이 필요합니다.

// webpack.config.js
// ...

output: {
  path: path.resolve(__dirname, "dist"),
  publicPath: "/", // publicPath로 script의 main.js를 절대 경로로 불러올 수 있게 합니다.
  clean: true,
},

// ...
devServer: { // 저희는 로컬 서버를 이용하기 때문에 devServer에 세팅합니다.
  historyApiFallback: true, // 특정한 경로로 들어갔을 때, index.html로 리다이렉트 시켜줍니다.
},

• 장점

주소가 깔끔합니다.

검색 엔진 최적화가 편리합니다.

• 단점

여러 주소마다 매번 서버에 대한 요청이 들어갑니다.

🥺 개인적으론 history mode가 더 사용성이 좋을 것 같다고 판단했습니다.

[1-2] 네비게이션 가드

네비게이션에는 각각 사용할 수 있는 가드가 있습니다.

라우터로 인해 경로가 변경되기 이전, 그리고 이후의 다양한 경우에 사용할 수 있습니다.

가드는 보통 별도의 파일을 만들어 작성합니다.

// guard.js
import router from "./index";
import store from "~/store";

router.beforeEach((to) => {
  // beforeEach 가드를 사용하여 접근 권한이 있는 페이지의 로그인 여부를 체크해줄 수 있습니다.
  console.log(to);
  if (to.meta.requiresAuth && !store.state.user.isLoggedIn) {
    return {
      path: "/login",
      query: { redirect: to.fullPath },
    };
  }
});

[1-3] 스크롤

SPA에서는 스크롤 위치가 고정됩니다.

home 페이지에서 route 처리로 about 페이지로 이동하더라도, 해당 스크롤의 위치는 고정된 채 페이지 이동이 일어납니다.

Vue router에서는 이 문제를 해결할 수 있게 스크롤 동작을 제어할 수 있는 기능을 제공합니다.

// routes/index.js
export default createRouter({
  history: createWebHistory(),
  scrollBehavior() {
    return { top: 0 }; // 스크롤 위치를 특정 위치로 고정시켜줄 수 있습니다.
  },

특정한 요소의 위치로 스크롤 이동, 브라우저를 중심으로 고정된 위치로 스크롤 이동, 비동기로 위치 변경 등의 다양한 기능을 제공합니다.

[2] Babel

Babel은 최신의 JavaScript 문법을 구형의 브라우저에서도 동작할 수 있게 이전의 JavaScript 문법으로 변환시켜주는 역할을 합니다.

바벨은 다음의 명령어로 설치할 수 있습니다.

npm i -D @babel/core @babel/cli // babel core와 babel cli를 함께 설치합니다.

"scripts": {
	"babel": "babel main.js"
}

진입점을 함께 지정해줘야 합니다.

babel core는 진입점에 있는 파일들을 변환해주는 역할을 하지만, 해당 변환되는 옵션들은 직접 지정해줘야 합니다.

해당 옵션들은 babel.config.json (또는 js)파일 내부에 작성할 수 있습니다.

하지만 변수형, 함수형 등의 다양한 JavaScript 문법에 따라 플러그인을 하나씩 설치해주는 것은 매우 번거로운 작업입니다.

따라서 이를 묶어놓은 preset-env 패키지를 설치할 수 있습니다.

npm i -D @babel/preset-env

{
  "presets": ["@babel/preset-env"]
}

항상 설치 후에는 babel.config.json에 등록해야 합니다!

[2-1] Transform runtime

Babel은 JS의 최신 코드를 구형 코드로 변환해줍니다.

이렇게 변환된 결과는 전역으로 등록이 되기 때문에 전역이 오염될 수 있다는 단점이 있습니다.

이를 보완하기 위해 transform-runtime 플러그인을 사용할 수 있습니다.

해당 플러그인은 전역이 오염되지 않고도 변환된 코드가 실행될 수 있게 합니다.

또한 실제로 작성한 코드만 변환시켜주기 때문에, 코드의 용량 또한 절약할 수 있습니다.

npm i -D @babel/plugin-transform-runtime @babel/runtime-corejs3

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

corejs의 버전이 3이어야 includes와 같은 메소드도 완벽하게 변환시킬 수 있습니다.

[2-2] browserslist

현재 웹 페이지가 동작할 브라우저의 범위를 지정해줄 수 있습니다.

이는 package.json 파일에 등록하며, 문자열을 담은 배열 형태로 작성합니다.

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

이러한 브라우저들의 범위를 지정하지 않으면, 바벨로 코드를 변환해야 하는 범위가 넓어 비효율적입니다.
따라서 이러한 브라우저의 범위를 명시하는 것이 필수적입니다.

[2-3] webpack과 babel

webpack과 babel을 함께 사용하기 위해서는 webpack 코어 패키지 외에 babel-loader를 설치해줘야 합니다.

// webpack.config.js
module: {
  rules: [
    {
      test: /\.vue$/,
      use: "vue-loader",
    },
    {
      test: /\.s?css$/,
      use: ["vue-style-loader", "css-loader", "sass-loader"],
    },
		{
      test: /\.js$/,
			exclude: /node_modules/,
      use: "babel-loader",
			// js 파일을 만나면 babel-loader를 동작 시킵니다.
			// 그 결과를 웹팩의 최종 번들로 출력할 수 있습니다.
			// node_modules는 제외합니다.
    },
  ],
},

[3] PortCSS, Autoprefixer

PostCSS는 scss와 같은 전처리 도구가 아닌 후처리 도구입니다.

바벨과 같이 코드를 변환하고 후처리하는 역할을 수행합니다.

PostCSS중 가장 대표적인 플러그인이 Autoprefixer입니다.

이 둘을 이용해서 display: flex, grid와 같이 CSS 최신 기술들을 이전의 문법들로 변환할 수 있습니다.

postCSS는 다음 명령어로 설치할 수 있습니다.

npm i -D postcss autoprefixer postcss-loader

Postcss와 Autoprefixer, webpack의 postcss-loader도 함께 설치합니다.

// webpack.config.js
{
  test: /\.s?css$/,
  use: [
    "vue-style-loader",
    "css-loader",
    "postcss-loader",
    "sass-loader",
  ],
},
// 기존의 스타일 로더, css 로더 등과 함께 사용합니다.

PostCSS는 postcss.config.js에 여러 옵션들을 지정해줘야 합니다.

// postcss.config.js
module.exports = {
  plugins: [require("autoprefixer")],
};

바벨과 동일하게 browserslist를 지정해줘야 합니다.

[4] Webpack Template

지금까지 배운 모든 vuex, babel, postCSS 등을 webpack에 적용해보도록 합니다.

// webpack.config.js
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  resolve: {
    extensions: [".vue", ".js"],
    alias: {
      "~": path.resolve(__dirname, "src"),
    },
  },
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.s?css$/,
        use: [
          "vue-style-loader",
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlPlugin({
      template: "./src/index.html",
    }),
    new CopyPlugin({
      patterns: [{ from: "static" }],
    }),
  ],
  devServer: {
    historyApiFallback: true,
  },
};

이러한 템플릿을 저장소에 올려놓고, 필요할 때 마다 불러와서 사용하면 편리합니다. 😊

---

출처

https://router.vuejs.org/

https://babeljs.io/

프로그래머스

Vue.js3 Document