[React.JS(19) + TypeScript] 02. 초기 프로젝트 구조 살펴보기
- Vite (비트): React 프로젝트 생성 시 복잡한 TypeScript 설정을 자동 처리하며, 기본적인 폴더 및 파일 구조를 생성하는 유용한 도구입니다. ✨
- node_modules 폴더:
npm이나 yarn으로 설치된 모든 라이브러리(React, TypeScript 등)가 모여 있는 곳으로, 용량이 커서 .gitignore에 추가하여 버전 관리에서 제외됩니다. 📦
- public 폴더: 이미지, 폰트, 파비콘 등 정적 리소스를 저장하며, 빌드 시 특별한 변환 없이 최종 애플리케이션에 포함됩니다. 🖼️
- src 폴더: React 컴포넌트, TypeScript/JavaScript 코드 등 프로젝트의 핵심 로직이 담긴 폴더입니다. 💻
App.tsx: 애플리케이션의 대표 컴포넌트를 정의합니다. ⚛️
main.tsx: createRoot 함수를 사용하여 App 컴포넌트를 DOM에 렌더링하는 역할을 합니다. 🚀
vite-env.d.ts: Vite 환경에서 필요한 타입 선언을 처리하여 TypeScript 코드가 원활히 동작하도록 돕습니다. ⚙️
- .gitignore 파일: Git 버전 관리 시 추적하지 않을 폴더나 파일(예:
node_modules, dist)을 지정하는 설정 파일입니다. 🚫
- .eslintrc.cjs 파일: 프로젝트 전체의 일관된 코딩 스타일과 품질 유지를 위해 ESLint 규칙, 플러그인, 환경 설정 등을 정의합니다. 🧹
- index.html 파일: 싱글 페이지 애플리케이션의 최초 진입점으로, React가 특정 DOM 요소에 렌더링되는 HTML 문서입니다. 🌐
- package.json 파일: 프로젝트의 이름, 버전, 종속 패키지(dependencies, devDependencies) 목록 등 메타데이터를 포함합니다. 📜
- package-lock.json 파일:
package.json에 명시된 의존성 패키지의 정확한 버전과 구조를 기록하여, 동일한 환경에서 항상 같은 패키지 버전을 설치하도록 보장합니다. 🔒
- README.md 파일: 프로젝트 개요, 설치 및 사용 방법, 주의 사항 등을 문서화하여 협업 및 오픈소스 공개 시 필수적인 정보를 제공합니다. 📖
- tsconfig.json, tsconfig.node.json, tsconfig.app.json 파일: TypeScript가 코드를 해석하고 컴파일하는 방식을 정의하는 설정 파일들로, 환경에 따라 유연하게 분리하여 관리할 수 있습니다. 🧩
- vite.config.ts 파일: Vite를 사용하여 프로젝트를 빌드하거나 개발 서버를 구동할 때 필요한 플러그인, 경로 별칭, 빌드 옵션 등 각종 설정을 정의합니다. 🛠️
데브허브 | DEVHUB | [React.JS(19) + TypeScript] 02. 초기 프로젝트 구조 살펴보기