FRONT/REACT

🚀 Vite를 활용한 React + TypeScript 개발 환경 설정하기

nkm 2024. 12. 18. 09:23
728x90
반응형

🚀 Vite를 활용한 React + TypeScript 개발 환경 설정하기

안녕하세요! 오늘은 Vite를 사용해서 ReactTypeScript 기반의 개발 환경을 빠르게 구축하는 방법을 안내해 드리겠습니다. 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 설정 (선택사항)

프로젝트의 코드 품질과 포맷팅을 관리하기 위해 ESLintPrettier를 설정해보겠습니다.

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/ 폴더에 저장됩니다.

728x90
반응형

'FRONT > REACT' 카테고리의 다른 글

react 세팅 – brew를 이용한 zsh 쉘에서 react 실행  (6) 2024.11.11