[DAY-37] Vue (4)

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

오늘의 소감은?
인프런 강의를 통해 배웠던 웹팩을 한번 더 다뤄보니 이제는 확실하게 개념이 잡히는 것 같아요.
그래도 옵션 지정은 아직 너무 헷갈려!

[1] 컴포넌트 기초

컴포넌트는 어떠한 구조적인 단위입니다.

컴포넌트에는 가장 큰 두 가지 특징이 있습니다.

• 재사용
• 기능 구조화, 캡슐화 가능

보통 하나의 어플리케이션은 중첩된 컴포넌트 트리로 구성되며

컴포넌트 등록에는 전역과 지역 등록 두 가지로 나뉘어집니다.

전역적으로 등록된 컴포넌트는 나중에 생성하는 app 인스턴스의 템플릿에서 사용할 수 있습니다.

우선적으로는 지역 컴포넌트를 생성하고, 전체 구역에서 공통으로 사용되어야 할 컴포넌트들을 전역으로 등록하는 것이 좋습니다.

컴포넌트는 등록할 위치.component('컴포넌트의 이름', 컴포넌트의 옵션) 의 형태로 작성됩니다.

[2] 유의적 버전

유의적 버전(Semantic Versioning) 즉 소프트웨어 버전이란 컴퓨터 소프트웨어의 특정 시점의 상태에 대해 식별 가능한 유일한 이름을 지정하는 것을 의미합니다.

[2-1] 기본 형식

Major.Minor.Patch

각각 주버전, 부버전, 수버전이라고도 불립니다.

• 기존 버전과 호환되지 않는다면 Major 버전을 올립니다. (구 버전을 지원하지 않는 수준의 변경)
• 새로운 기능을 추가하면 Minor 버전을 올립니다.
• 버그를 고쳤다면 Patch 버전을 올립니다.

[2-2] - 식별자 형식

Major.Minor.Patch - identifier

이 방식은 pre release 버전을 표기할 때 사용합니다.

identifier은 -로 시작하며 .을 구분자로 사용합니다.

• 1.0.0-alpha
• 1.0.0-x.7.z.92

[2-3] + 식별자 형식

Major.Minor.Patch - identifier + metadata

빌드 메타데이터를 표기할 때 사용합니다.

• 1.0.0-alpha+001
• 1.0.0-beta+exp.sha.5114f85

[2-4] 규약

• 최초 개발 버전은 0.1.0으로 합니다.
• 자릿수를 맞추기 위해 0으로 시작하는 숫자는 쓰지 않습니다. (ex) 1.07.1)
• 부모 버전이 오르면 자식 버전은 0으로 초기화합니다.

[3] SFC

.vue 확장자를 가진 single file component을 생성할 수 있습니다.

이는 Webpack, Parcel, Browserify 등의 빌드 도구(번들러)를 이용해 브라우저에서 동작하게끔 만들 수 있습니다.

SFC는 보통 3가지 구조를 가집니다.

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
  export default {
    data() {
      return {
        msg: "Hello Vue~",
      };
    },
  };
</script>

<style lang="scss">
  h1 {
    color: orange;
  }
</style>

이러한 3가지 형태를 가진 하나의 SFC를 모듈 형태로 가져오고, 내보내며 확장적으로 사용할 수 있습니다.

[3-1] 번들러

번들러는 어떠한 것들을 묶어낸다는 의미를 가지고 있습니다.

이와 같은 번들러는 브라우저에서 해석할 수 없는 vue, react 등의 파일들을

브라우저에서 해석할 수 있는 형태로 묶어 재생성해줍니다.

[1] Parcel

parcel은 번들러의 여러 옵션들을 세부적으로 지정할 수는 없지만, 편리합니다.

규모가 크지 않은 프로젝트에서 잘 사용됩니다.

parcel은 해당 명령어로 설치할 수 있습니다.

npm i -D parcel (개발 모드에서만 사용합니다.)

"scripts": {
  "dev": "parcel src/index.html"
},

진입점을 함께 지정해줍니다.

parcel의 번들러 기능을 사용하기 위해서 다음 커스텀 명령어를 사용할 수 있습니다.

npm run dev

주의할 점은 parcel은 우리가 필요한 모든 패키지들을 자동으로 설치해주는 것이 아닙니다.

따라서 sass와 같은 별도의 사용할 패키지는 따로 설치해줘야 합니다.

[2] Webpack

webpack은 번들러의 여러 번들 옵션들을 세부적으로 지정해줄 수 있습니다.

또한 parcel보다 훨씬 다양한 옵션들이 존재합니다.

webpack은 다음 명령어로 설치할 수 있습니다.

npm i -D webpack webpack-cli // webpack의 터미널도 함께 설치합니다.

"scripts": {
  "build": "webpack"
},

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"),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.s?css$/,
        use: ["vue-style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlPlugin({
      template: "./src/index.html",
    }),
    new CopyPlugin({
      patterns: [{ from: "static" }],
    }),
  ],
};

정말 많은 옵션을 지정해야함을 알 수 있습니다.

webpack 또한 별도의 사용할 패키지는 전부 설치해준 후, wepack.config.js 파일에 등록해서 사용해야 합니다.

---

출처

https://semver.org/

https://johngrib.github.io/wiki/semantic-versioning/

프로그래머스

Vue.js3 Document