React + TypeScript 프로젝트를 시작하려면 기초적인 환경 설정이 중요해. 여기선 다음 5가지 단계를 다룰 거야:

📘 예제 1: Vite 또는 CRA로 React + TypeScript 프로젝트 만들기

✅ Vite (추천)

# Vite로 시작하는 경우 (빠르고 간편함)
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

✅ CRA (create-react-app, 조금 무거움)

npx create-react-app my-app --template typescript
cd my-app
npm start

위 명령어는 TypeScript 템플릿으로 시작하기 때문에 .tsx, .ts 파일 사용이 가능해져. 프로젝트 생성 후 tsconfig.json, vite.config.ts 또는 react-scripts 설정이 자동 포함돼.

📘 예제 2: tsconfig.json 설정 이해하기

tsconfig.json은 TypeScript 컴파일러의 동작을 설정하는 파일이야.

예시

{
  "compilerOptions": {
    "target": "ESNext",             // 최신 JS로 변환
    "lib": ["DOM", "ESNext"],       // 브라우저, 최신 JS API 포함
    "jsx": "react-jsx",             // JSX 지원 (React 17+)
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,                 // 엄격한 타입 검사
    "esModuleInterop": true,        // CommonJS 호환성
    "skipLibCheck": true,           // 라이브러리 타입 검사 생략
    "forceConsistentCasingInFileNames": true // 파일명 대소문자 구분
  },
  "include": ["src"]
}

✅ 중요한 옵션은 strict, jsx, esModuleInterop 등이야. strict는 초보자에겐 조금 까다롭지만, 에러를 미리 잡아줘서 좋아.

📘 예제 3: ESLint + Prettier + 타입 연동

코드 스타일 자동화 및 오류 방지를 위해 설정해보자.

설치

npm install -D eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-react-hooks eslint-plugin-import @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc.js 예시