
🚀 Vite를 활용한 React + TypeScript 개발 환경 설정하기
안녕하세요! 오늘은 Vite를 사용해서 React와 TypeScript 기반의 개발 환경을 빠르게 구축하는 방법을 안내해 드리겠습니다. create-react-app이 유지보수 중단된 이후, Vite는 더 빠르고 현대적인 대안으로 자리 잡았습니다. 그럼 바로 시작해볼까요? 🎉
1. Vite란 무엇인가요?
Vite는 차세대 프론트엔드 빌드 도구로, 개발 서버와 빌드 성능에서 기존 도구(예: Webpack, CRA)를 압도하는 속도를 제공합니다.
• 빠른 개발 서버: ES Module 기반으로 코드 변경 시 즉시 반영됩니다.
• 최적화된 빌드: Rollup을 기반으로 생산 빌드가 최적화됩니다.
• 간편한 설정: 복잡한 설정 없이 빠르게 프로젝트를 시작할 수 있습니다.
2. Vite를 이용한 React + TypeScript 프로젝트 설정
Step 1: Vite 프로젝트 생성
다음 명령어로 Vite를 사용한 React + TypeScript 프로젝트를 생성합니다.
npm create vite@latest my-vite-app --template react-ts
• my-vite-app: 프로젝트 이름입니다. 원하는 이름으로 바꿔주세요.
• --template react-ts: React와 TypeScript 템플릿을 사용합니다.
Step 2: 프로젝트 의존성 설치
생성된 프로젝트 디렉토리로 이동한 뒤, 필수 의존성을 설치합니다.
cd my-vite-app
npm install
Step 3: 프로젝트 구조 확인
기본적으로 Vite는 다음과 같은 폴더 구조를 제공합니다:
📦 my-vite-app/
├── 📂 src/ \# 소스 코드
│ ├── App.tsx \# 메인 React 컴포넌트
│ ├── main.tsx \# 진입점 파일
│ ├── index.css \# 글로벌 스타일
│ └── vite-env.d.ts \# Vite 타입 선언
├── 📂 public/ \# 정적 파일
├── package.json \# 프로젝트 설정 및 의존성
├── tsconfig.json \# TypeScript 설정 파일
└── vite.config.ts \# Vite 설정 파일
3. 개발 서버 실행
아래 명령어로 개발 서버를 실행하고, 브라우저에서 확인합니다.
npm run dev
• 기본적으로 개발 서버는 http://localhost:5173에서 실행됩니다.
4. ESLint & Prettier 설정 (선택사항)
프로젝트의 코드 품질과 포맷팅을 관리하기 위해 ESLint와 Prettier를 설정해보겠습니다.
Step 1: ESLint & Prettier 설치
npm install --save-dev eslint prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin
Step 2: ESLint 설정 파일 추가
프로젝트 루트에 .eslintrc.cjs 파일을 생성하고 다음 내용을 추가합니다.
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: \[
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
\],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: \['react', '@typescript-eslint'\],
rules: {
_// 필요에 따라 규칙을 추가하세요_
'react/react-in-jsx-scope': 'off',
},
};
**Step 3: Prettier 설정 파일 추가**
프로젝트 루트에 prettier.config.cjs 파일을 생성하고 다음 내용을 추가합니다.
module.exports = {
semi: true,
singleQuote: true,
trailingComma: 'all',
printWidth: 80,
tabWidth: 2,
};
**Step 4: npm 스크립트 추가**
package.json에 다음과 같이 ESLint와 Prettier 실행 스크립트를 추가합니다.
"scripts": {
"lint": "eslint src/\*\*/\*.{ts,tsx}",
"format": "prettier --write ."
}
5. 프로젝트 실행 및 빌드
개발 서버 실행
npm run dev
프로덕션 빌드
npm run build
• 빌드된 파일은 dist/ 폴더에 저장됩니다.
'FRONT > REACT' 카테고리의 다른 글
react 세팅 – brew를 이용한 zsh 쉘에서 react 실행 (6) | 2024.11.11 |
---|