"vite": "^4.3.9"
"@vitejs/plugin-react": "^4.0.0",
"react": "^18.2.0",
"typescript": "^5.0.2",
지금까지는 create-react-app을 사용하여 리액트 앱을 만들었지만, vite를 경험해보고 싶어 이번 프로젝트는 vite를 사용하여 프로젝트를 만들기로 결정하였다.
vite 공식 문서를 들어가면 가장 먼저 vite의 의미와 발음에 대해 알려준다.
(처음 이 라이브러리를 봤을 때 나도 바이트로 읽었는데, 이러한 오해를 종종 받아 가장 상단에 작성했나보다🤭)
다음 글은 vite에 대해 처음 개념을 이해할 수 있도록 도와준 글이다! (궁금하신 분들은 읽어보시기를 추천드립니다!)
참고 글: JavaScript 번들러로 본 조선시대 붕당의 이해
참고 글: Vite 이야기(feat. Svelte)
위 참고 글 2개 요약
자바스크립트에서 모듈 관련된 발전
초기 자바스크립트는 module이 없어 방대한 프로젝트를 다루기 힘들었다.
→ node의 등장으로 require 함수와 module.export를 쓰는 CommonJS 방식의 모듈이 만들어졌다.
→ npm의 등장으로 만들어진 모듈을 모두가 공유할 수 있게 되었다.
→ 하지만 브라우저에서 JS를 매번 불러와야했기 때문에 로딩과 비동
기를 고려해야 했고, 비동기적으로 모듈을 불러올 수 있는 AMD라는 방식이 등장하였다.
→ AMD 방식은 널리 사용되지 못하였으나 import 구문이 나오는데 영향을 주었다.
→ 번들러의 등장으로 같은 타입의 파일은 묶어서 요청/응답할 수 있게 되었고 모듈 단위로 코드를 작성할 수 있게 되었다!
번들거 관련된 발전
태스크 러너: 프로덕트 개발 과정에서 필요한 일련의 과정들(린팅, 빌딩, 테스팅 등)을 자동화하기 위한 도구
→ Grunt와 Gulp: 테스트나 린트, 번들, 최적화 플러그인 제공
→ Webpack: 서드파티 라이브러리 관리나 CSS 전처리, 이미지 에셋 관리 등에 있어 다른 번들러보다 강점을 보임
→ Rollup: 웹팩과 달리 ES6 모듈 형식으로 빌드 결과물을 출력하고, 최소한의 서드파티로 라이브러리를 만드는데 강점
→ Parcel: 설정 파일 없이 동작하며, HTML 파일을 읽으며 자바스크립트, CSS, 이미지 에셋을 직접 참조
→ esbuild: 100배 매우 빠르지만 빌드만 제공하여 프레임워크를 기반으로 하는 웹 개발은 기본 번들러를 사용해야 했음
→ snowpack: esbuild로 빌드하고 브라우저 표준방식으로 개발하고 기존 번들 툴로 결과물을 만들어내는 방식 채택
→ vite: 기존 번들러들의 컨셉을 모두 흡수하면서도 간결한 사용방식과 안정성 + 친절한 문서
Vite
글을 읽고 나서 vite를 한 문장으로 표현하지만 "빠르고 복잡한 설정이 필요없는 번들러"인 것 같다.
실제로 vite를 통해 typescript와 함께 react 앱을 만들고자 한다면
npm create vite@latest [폴더명] -- --template react-ts
한 줄이면 충분하다!
그리고 안내에 따라 폴더로 이동하여 npm install하고 npm run dev를 입력하면 http://localhost:5173으로 화면을 볼 수 있다.
git init이 기본적으로 되어있지 않아 git init 을 미리 진행해두면 좋다!
문서를 보면 npm 버전에 따라 입력할 커맨드가 약간 다르며,
vue, react, svelte 등을 지원한다.
vite로 프로젝트 첫 세팅 후 느낌은 "매우 빠르다!"이다.
정말정말 빠르다!
create-react-app은 엔터를 누른 후 잠시 웹서핑을 하다가 왔었는데 vite는 그럴 필요가 없었다.
Vite의 절대경로 설정
며칠 전 react의 절대경로 설정을 위해 eject를 할지 라이브러리를 설치할지 고민을 한 적이 있었다.
개인 프로젝트이기에 webpack 설정을 커스텀하게 할 필요가 없어 라이브러리를 설치하여 진행했었다.
하지만 vite는 그 걱정이 없다.
우선 tsconfig.json 파일에 path를 추가하는 것은 동일하다.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@component/*": ["src/component/*"],
"@container/*": ["src/container/*"],
}
// ...
}
}
이후 vite.config.ts 파일로 들어가 resolve에 alias를 추가해주면 끝이다!
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: [
{ find: "@component", replacement: "/src/component" },
{ find: "@container", replacement: "/src/container" },
],
},
});첫 프로젝트 세팅과 번들링 속도만 빠를거라 생각했지만 설정을 추가하는 것도 매우 편리했다.
