[React – 기초강좌] Vite를 이용한 프로젝트 시작하기 (with Typescript)

10월 19, 2024 작성자: JAEHYEOK KIM

Vite는 빠르고 가벼운 React 개발 환경을 제공하는 차세대 프론트엔드 빌드 도구입니다.

기존 Create React App(CRA)보다 더 빠른 개발 서버와 빌드 속도를 자랑하며, ESM을 활용해 효율적인 모듈 로딩을 지원합니다.

이 포스팅에서는 Vite를 이용한 React 프로젝트 설정 방법과 TypeScript 통합, 플러그인 활용법을 안내합니다. 또한 Vite와 CRA의 차이점, 환경 변수 설정, 배포 과정까지 폭넓게 다룹니다.

Table of Contents

Vite란 무엇인가?

Vite는 차세대 프론트엔드 개발 도구로, 빠른 빌드 속도와 개발 환경에서의 핫 리로드 기능을 제공하는 도구입니다.

기존의 Create React App(CRA)과 같은 도구보다 훨씬 빠르고 효율적입니다.

Vite는 ES Module(ESM)을 활용하여 브라우저가 필요한 모듈만 즉시 로드하게 하고, 초기 번들링 시간을 최소화합니다.

Vite의 특징과 장점

초고속 개발 서버
- ESM 기반의 서버로 즉각적인 모듈 로드가 가능합니다.
- 대규모 프로젝트에서도 빠르게 리로드됩니다.
빠른 빌드 시간
- Rollup을 활용한 최적화된 빌드 시스템을 제공합니다.
- 초기 번들링 시간을 줄여 대규모 프로젝트에서 효율적입니다.
플러그인 생태계
- Rollup과 호환되는 다양한 플러그인을 사용할 수 있습니다.
- 커스터마이징이 쉬워 React, Vue, Svelte 등과 함께 사용 가능합니다.
경량 프로젝트 설정
- CRA보다 의존성이 적고, 프로젝트가 가벼움.
- 불필요한 설정을 줄여 개발 환경이 단순해집니다.

Vite와 CRA의 차이점

항목	Vite	Create React App (CRA)
빌드 속도	빠름 (ESM 기반)	느림 (웹팩 기반 번들링)
핫 리로드	즉각적 핫 리로드	다소 느림
설정 파일	간결한 설정 (Rollup 사용)	더 많은 설정 필요 (Webpack 사용)
의존성 크기	작음	상대적으로 큼

Vite를 활용한 React 프로젝트 설정하기

1. Vite 설치 및 초기 설정

터미널에서 아래 명령어를 실행합니다:

npm create vite@latest 02-project-with-vite

02-project-with-vite: 원하는 프로젝트 이름을 지정하세요.
react 와 typescript를 선택하여 프로젝트를 생성합니다.

프로젝트 폴더로 이동한 후 의존성을 설치합니다:

cd 02-project-with-vite
npm install
npm run dev

2. ESLint 및 Prettier 설정

코드 품질 유지와 포맷팅을 위해 ESLint와 Prettier를 설정합니다.

2.1 ESLint 설치

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --save-dev

2.2 ESLint 초기화

아래 명령어를 실행해 ESLint를 설정합니다:

npx eslint --init

설정 과정에서 다음 옵션을 선택합니다:

How would you like to use ESLint?: To check syntax, find problems, and enforce code style
What type of modules does your project use?: JavaScript modules (import/export)
Which framework does your project use?: React
Does your project use TypeScript?: Yes

2.3 ESLint 설정 파일 업데이트 (eslint.config.js)

import globals from "globals";
import pluginJs from "@eslint/js";
import parser from "@typescript-eslint/parser"; // TypeScript 파서
import pluginReact from "eslint-plugin-react"; // React 플러그인

export default [
  pluginReact.configs.flat.recommended,
  pluginJs.configs.recommended,
  {
    // 파일별로 규칙 적용
    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
    languageOptions: {
      parser, // TypeScript 파서 사용
      globals: globals.browser, // 브라우저 전역 변수 설정
    },
    settings: {
      react: {
        version: "18.0", // React 18 버전 명시
      },
    },
    rules: {
      "react/react-in-jsx-scope": "off", // React 18+에서는 불필요한 규칙 비활성화
    },
  },
];

2.4 Prettier 설치 및 설정

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

프로젝트 루트에 .prettierrc 파일을 생성하고 다음과 같이 설정합니다:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

아래 명령어로 Vite 개발 서버를 실행합니다:

npm run dev

출력 예시:

  VITE v5.4.9  ready in 181 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

3. Vite 프로젝트 폴더 구조

02-project-with-vite/
├── index.html        # HTML 진입 파일
├── package.json      # 의존성 및 스크립트 설정
├── src/              # 소스 코드 폴더
│   ├── App.tsx       # 메인 React 컴포넌트
│   ├── main.tsx      # ReactDOM이 렌더링되는 진입 파일
├── vite.config.ts    # Vite 설정 파일
├── .eslintrc.json    # ESLint 설정 파일
├── .prettierrc       # Prettier 설정 파일

4. 환경 변수 설정

Vite에서는 .env 파일을 사용해 환경 변수를 설정합니다.

4.1 .env 파일 생성

프로젝트 루트에 .env 파일을 생성하고 다음과 같이 작성합니다:

VITE_API_URL=https://api.example.com

4.2 환경 변수 사용

JavaScript/TypeScript 코드에서 환경 변수를 다음과 같이 사용할 수 있습니다:

console.log(import.meta.env.VITE_API_URL);

5. TypeScript 설정 커스터마이징

Vite에서 기본적으로 제공하는 tsconfig.json 파일을 수정하여 프로젝트에 맞게 타입 검사를 강화할 수 있습니다.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

6. 프로젝트 배포

Vite는 빌드된 정적 파일을 dist/ 폴더에 저장합니다. 아래 명령어로 프로젝트를 빌드하세요:

npm run build

이제 dist/ 폴더의 파일을 Netlify, Vercel과 같은 배포 플랫폼에 업로드할 수 있습니다.

7. ESLint와 Prettier 통합 테스트

코드 품질을 확인하려면 다음 명령어를 실행하세요:

npx eslint src/**/*.tsx

자동으로 코드 스타일을 정리하려면 아래 명령어를 사용합니다:

npx prettier --write src/**/*.tsx

8. Vite에서 React Router와 상태 관리 추가하기

Vite 프로젝트에서 React Router와 상태 관리를 사용하려면 추가 패키지를 설치하세요.

npm install react-router-dom recoil

React Router: 라우팅 기능을 제공합니다.
Recoil: 상태 관리를 위한 라이브러리입니다.

참고 링크

devitworld github repository

https://github.com/jh4843/devitworld-react-basic

vite links