[Vue 3] 02.Vite 기반의 Vue 개발 1

이번 포스트에서는 Vite를 이용한 Vue 개발에 대해서 살펴보자.

 

Vite | 차세대 프런트엔드 개발 툴

 

Vite

 

Vite란?

Vite(vit:비트 라고 읽음, 프랑스어로 빠름 ㅎ)는 node.js 기반의 Vue 개발을 위한 스캐폴딩(scaffolding) 도구이다. Vite는 Vue 뿐 아니라 대부분의 frontend framdwork를 지원한다. Vite를 사용하면 native ES Module, Hot Module Replacement 등을 제공하며 .vue를 이용해서 만든 애플리케이션을 .html로 변경하기 위한 build tool로 사용된다.

[scaffolding]	[Vite 지원 frontend framework 들]

 

설치

Vite를 사용하기 전에 먼저 node.js를 설치해야 한다.

https://nodejs.org/ko/

Node.js

설치 과정은 그냥 next 버튼만 열심히 눌러주면 된다. 설치 후 npm 이라는 명령을 통해서 version 정도만 확인해보자. npm은 node package manager로 프로젝트에서 필요한 javascript 패키지를 관리한다.

quietjun@quietjun 3.0 % npm -v
8.9.0

 

프로젝트 생성

npm을 이용해서 vite 기반의 Vue 애플리케이션을 대화형으로 생성할 수 있다.

quietjun@quietjun my-vue-app % npm init vue@latest

Need to install the following packages:
  create-vue@latest
Ok to proceed? (y) y

이후는 대화형으로 필요한 부가 설정을 진행한다. 당장 필요한 것은 ESLint와 Prettier 만 Yes로 하고 나머지는 No를 선택하면 된다. 나머지는 차차 사용해보기로 한다.(메뉴는 버전에 따라 조금씩 바뀌는데 일단은 ESLint와 Prettier만 켜고 가자.)

프로젝트 생성 후 처리할 명령도 함께 안내된다. 먼저 해야할 일은 프로젝트 폴더로 이동해서(cd hello_vue) 필요한 라이브러리를 설치(npm install)해야 한다. install을 진행하면 프로젝트 폴더에 node_modules 폴더가 생성되고 필요한 javascript library 들이 설치된다.

나머지 두 개의 명령은 지금은 필요하지 않다.

 

Vite 기반의 프로젝트 구조 분석

 

프로젝트의 구조

먼저 vscode를 이용해서 프로젝트를 열고 전체적인 구조를 살펴보자.

이중 본격적인 프로젝트 진행 전에 설정에 해당하는 파일들에 대해서 살펴보자.

 

.eslintrc.cjs

.eslintrc.cjs를 eslint를 위한 설정을 작성하는 파일이다.

eslint는 ecma script lint의 약자로 pattern을 기반으로 javascript의 code를 검증해서 일관되게 작성하고 버그를 줄이기 위해 사용하는 툴이다.

https://eslint.org/docs/latest/user-guide/getting-started

Getting Started with ESLint - ESLint - Pluggable JavaScript Linter

 

ESLint는 rule 기반으로 동작하며 rule을 어겼을 때 심각도에 따라 오류를 표시한다. 심각도는 0(off), 1(warn), 2(error) 3가지로  분류된다. 부가적으로 옵션을 표시할 때는 배열을 이용하는데 배열의 0번 요소는 심각도, 1번 요소는 옵션 값이다.

"rules": { 
          "no-console" : process.env.NODE_ENV === "production" ? "warn" : "off",
          "curly"      : 2, 
          "quotes"     : ["error", "double"] 
}

즉 위와 같이 rule이 작성된 경우 curly rule에 의해서 아래의 좌측처럼 {} 가 생략되면 error가 되며 우측처럼 { } 가 강제된다.

if(foo) bar++

if(foo){   bar++; }

quotes rule에서는 옵션이 적용되어있는데 인용구가 double이므로 "double"은 괜찮지만 'single' 처럼 ' '로 묶인 경우는 오류이다. 

let name='hong gil dong'

let name="hong gil dong"

 

프로그램을 작성하다 보면 변수를 선언만 하고 사용하지 않은 경우 es-lint에서 'no-unused-vars' error를 뿜어내서 조금 번거롭다 개발 과정에서는 필요하지만 공부하면서는 조금 과하다 싶기 때문에 warn으로 변경해 두고 하는 것도 괜찮은것 간다.

rules:{
    'no-unused-vars': "warn",
}

프로젝트를 작성하다 보면 eslint의 룰에 어긋나는 경우는 실시간으로 리포팅이 되기 때문에 특별히 lint를 호출할 필요는 없지만 별도로 list를 따로 돌리고 싶을 때는 npm run lint 명령을 사용한다.

❯ npm run lint

> hello_vue@0.0.0 lint
> eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore

 

.prettierrc.json

이전 버전의 eslint 설정에서는 prettier와 관련된 formatting 오류도 함께 통합 처리되기 때문에 아래와 같이 prettier/prettier 오류에 대해 warn으로 처리하고 이때 지켜져야 할 규칙들을 함께 작성했었다.

module.exports = {
  root: true,
  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/eslint-config-prettier"],
  env: {
    "vue/setup-compiler-macros": true,
  },
  rules: {
    "prettier/prettier": ["warn",  {
                                     printWidth: 100,
                                     tabWidth: 2,
                                     endOfLine: "auto",
                                     useTabs: true,
                                     proseWrap: "preserve",
                                    },
                          ],
  },
};

 

하지만 최근의 설정에는 @vue/eslint-config-prettier/skip-formatting 옵션으로 eslint에서 prettier 관련 formatting 이슈를 제외시키고 perttier 설정을 위해서 .prettierrc.json 파일을 사용하고 있다.

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

 

작성한 소스를 위의 prettier 룰에 적합하게 수정하기 위해서는 npm run format 명령을 사용한다.

quietjun@quietjun hello_vue % npm run format

> hello_vue@0.0.0 format
> prettier --write src/

 

package.json

package.json은 프로젝트에 대한 여러가지 설정을 담고 있는 파일인데 maven에 익숙한 개발자라면 pom.xml 파일을 떠올리면 된다. package.json은 크게 scripts, dependencies, devDependencies로 구성된다.

scripts에서는 Project 개발 시 유용한 명령어들을 제공해주는데 dev, build, preview, lint, format가 제공된다. 각 명령어에 대한 상세한 옵션을 확인하고 싶은 경우 npx(node package execute) 명령을 사용한다.

quietjun@quietjun hello_vue % npx vite --help
vite/2.9.13

Usage:
  $ vite [root]

Commands:
  [root]           start dev server
  build [root]     build for production
  optimize [root]  pre-bundle dependencies
  preview [root]   locally preview production build

For more info, run any command with the `--help` flag:
  $ vite --help
  $ vite build --help
  $ vite optimize --help
  $ vite preview --help

 

부가적으로 package.json에서의 라이브러리 버전 설정이나 package-lock.json 파일도 알아두면 상식적으로 도움이 된다.

https://goodteacher.tistory.com/550

[vuecli]package.json의 버전 표시

 

https://goodteacher.tistory.com/551

[vuecli]package.json vs package-lock.json

 

vite.config.js

vite.config.js 파일은 vite 자체에 대한 설정(https://vitejs.dev/config/)이다. 여러 가지 설정이 있을수 있겠지만 꼭 기억해둘만한 내용은 alias를 등록해 놓은 부분이다.

import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({

  base: "/quietjun",

  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

 

즉 @라는 것을 ./src 경로에 매핑 시켜 놓은 부분이다. 프로젝트 코드를 작성하면서 ./src 경로를 참조하기 위해서 @를 사용하면 아주 편하게 사용 가능하다는 이야기다.!