주의

vite의 발음은 바이트가 아니다 비트이다

Vite의 사용 목적

1. vite는 개발환경과 배포환경을 동시에 구현할 수 있다
   따라서 분리해서 개발하기에 웹 최적화를 이룰 수 있고, 배포 환경이 편리하다

2. 사용하지 않는 파일들은 build과정 중에 tree shaking을 통해 정리하여
   최적화에 좋은 이점을 발생시킨다

3. 또한 변수명 혹은 파일명에 자동으로 해시값을 부여하여 이름이 중복되는 일이 없어 편리하다

Vite-manual-installation

npm

npm 명령어를 사용하기 위해 package.json파일을 먼저 생성한다

우선 vite는 npm(node package manager)로 설치가 가능하다

명령어는

npm i vite

로 사용하고 이는 pnpm으로도 설치가 가능하다

pnpm i vite

pnpm은 perfomant npm의 약자로 npm을 효율성이라는 장점을 가진 패키지 매니저이다

설치 후

npx vite --help

를 통해 vite의 명령어에 대한 설명을 확인할 수 있다

명령어를 천천히 살펴보면 [root]와 build [root] 그리고 preview [root]라는 명령어가 보인다

이는 live server를 구동해주는데
일반적인 실행 즉, [root] 를 실행하게 되면 localhost환경(개발환경)의 서버가 열린다
build와 preview는 한 쌍이라고 볼 수 있다
build를 하게 되면 기존에 작성했던 개발환경의 파일들을 프로덕션 환경으로 배포하는 폴더로 묶어준다
이후 preview를 통해 이를 실행할 수 있다

이때 build 명령어로 생기는 폴더의 기본 값은 dist이다

npx vite build

프로덕션 환경은 실제 웹브라우저에 의해 해석되는 곳이라 실제 배포환경과 비슷하다

이번엔 실행시켜보자

npx vite preview

4173번 포트에서 잘 실행되는 것을 확인할 수 있다

정적 자산과 동적 자산

정적 자산과 동적 자산은 이름 그대로 변경이 거의 일어날 일이 없는 것과 변경이 자주 일어날만한 것으로 나뉜다

정적 자산의 종류에는 favicon,로고와 같은 것들이 존재하고 동적 자산에는 페이지 내부의 UI에 사용되는 아이콘 등이 존재한다

이때 정적 자산은 public 폴더를 만들어 관리하고
동적 자산은 assets폴더에 만들어 관리한다
참고로 동적 자산의 폴더명은 변경되어도 된다

이때 정적 자산과 동적 자산의 경우 build과정에서 일어나는 변화가 다르다

이때 public 폴더에 존재하는 파일들은 사용하지 않아도 build시 해석이 되지만 그렇지 않은 경우는 해석하지 않는다

assets 폴더 내부에 존재하는 파일을 사용하고 build를 하게 되면 다음과 같이 나타난다

임의의 hash값이 붙어서 나타나는 모습이다
이는 웹 브라우저의 경우 한 번 cashing한 동일한 이름의 파일은 불러들이지 않는다
따라서 임의의 hash값을 붙여 이러한 경우를 방지할 수 있는 것이다

경로

그리고 build과정을 살펴보면서 이러한 생각이 들 것이다
개발 환경에서는 public 폴더 내부에 있는 것을 산정하여 경로를 그에 맞게 설정했는데 build를 하니 public이라는 존재가 사라진다
따라서 프로덕션 환경에서는 이미지를 불러오지 못하는 오류가 발생한다

따라서 이를 방지하고자 public을 제외하고 절대경로로 사용하는 것을 추천한다

'./public/test1.png'
에서
'/test1.png'
로 변경

절대 경로의 장점은 파일이 어디에 있든 시작하는 위치와 참조하는 위치가 항상 동일하기에 어떤 파일에서 경로를 지정해도 동일하게 값을 불러올 수 있다는 점이다

import

만약 위와 같은 경우 때문에 경로를 계속해서 신경써야 한다면 다른 방법이 있다
바로 JS파일 내부에서 import를 사용하여 원하는 파일을 불러오는 것이다
파일에는 이미지 파일과 CSS파일같이 값을 필요로 하는 문서는 모두 가능하다

사용법은 다음과 같다

import test2 from "./assets/test2.png";

const template = /* HTML */ `<img src=${test2} />`;

const app = document.querySelector("#app");

app.insertAdjacentHTML("beforeend", template);

변수처럼 불러와 변수처럼 사용이 가능하다
이 경우 build를 하게 될 시 아무런 문제 없이 이미지를 불러오는걸 확인할 수 있다

이번엔 CSS의 경우를 살펴보자

import { imgTest as pngTest } from "./style/style.module.css";

로 불러와서 class에 imgTest를 넣어서 style을 지정할 수 있다

수업 들을때는 몰랐지만 파일 명에 꼭 module을 붙여줘야 정상적으로 작동이 된다

참고로 CSS의 경우 {} 를 생략하고 원하는 이름을 지정해도 무방하다
다만 이 경우 객체로 불러오기 때문에 원하는 값을 찾기 위해선 key값을 설정하여 value를 찾아야한다

이를 CSS 모듈화라고 부른다

vit.config.js

이는 vite의 실행환경을 자유롭게 조절하는 것이 가능하다
우선 사용하기 위해선 vite 에서 defineConfig를 불러와서 설정하고
설정한 값을 export해야한다

대표적인 경우 몇 가지를 살펴보자

server

  server: {
    host: "localhost",
    port: 3000,
    cors: true,
  },

server는 live server와 마찬가지로 host를 설정하고 port 넘버도 지정할 수 있다
cors(Cross-Origin-Resource-Sharing)을 허용하는 것도 가능하다

css

  css: {
    devSourcemap: true,
    modules: {
      generateScopedName:
        env === "development" ? "[local]__[hash:base64:5]" : "[name]__[local]__[hash:base64:5]",
    },
  },

만약 css를 모듈화 방식으로 불러오면 어떤 문서에서 어떤 구역에서 적용된건지 알 길이 없다
따라서 이를 방지하고자 devSourcemap을 true로 설정하는 것이다

module은 build과정에서 부여되는 hash값의 규칙을 정할 수 있다
위의 경우 개발 환경이 development로 나타난다면 변수명__hash값5자리로 설정하고, 아니라면 파일명__변수명__hash값5자리로 설정하겠다는 의미이다

resolve

resolve: {
    alias: { "@": resolve(__dirname, "src") },
  },
}

resolve를 사용해 기본 디렉토리를 축약시킬 수 있다
지금은 /src를 @로 변경하는 작업이다

env

process.NODE_ENV를 사용해서 현재 개발 중인 환경을 나타낼 수 있다

HTML파일에서는 %MODE%를 사용하면 개발환경이 표시된다
이는 다시 말해 HTML파일에서도 변수명을 설정하여 사용이 가능하다는 의미이다

.env파일을 생성하여 내부에

VITE_TEXT = 'hello'

를 작성하면 HTML파일에서 %VITE_TEXT%는 이제부터 hello를 표시하게 된다

참고로 변수명을 시작할때는 반드시 VITE_ 로 시작해야 한다