React 프로젝트의 디렉토리 구조와 Vite 환경 이해하기

React로 프로젝트를 시작하면 처음 마주하는 것이 디렉토리 구조입니다. 특히 Vite를 사용한 최신 React 프로젝트에서는 폴더와 파일의 역할이 직관적이지만, 초보자에게는 다소 낯설게 느껴질 수 있습니다.

 

이 글에서는 Vite를 사용한 React 프로젝트의 디렉토리 구조를 상세히 살펴보고, 각 파일과 폴더의 역할을 설명합니다. 또한, Vite와 Webpack의 차이점, Vite의 장점, 그리고 효과적인 프로젝트 관리를 위한 팁도 함께 다룹니다.🤓

---

1. 프로젝트 루트 

프로젝트의 최상위 디렉토리

프로젝트 관리를 위한 설정 파일과 기본 구조를 제공합니다.

📂 주요 폴더 및 파일

• node_modules/
  • 프로젝트의 모든 의존성 패키지가 저장됩니다.
  • npm install 명령어 실행 시 생성됩니다.
  • 직접 수정은 금지하며, 필요에 따라 npm update나 npm uninstall을 사용합니다.
• package.json
  • 프로젝트 설정 파일로, 의존성, 실행 스크립트, 메타데이터 등을 정의합니다.
  • 주요 항목:
    • dependencies: 애플리케이션에서 사용하는 라이브러리 목록.
    • devDependencies: 개발 중에만 필요한 도구(예: Babel, ESLint).
    • scripts: 명령어 정의 (예: npm start, npm run build).
  • 프로젝트 협업 시 가장 중요한 파일 중 하나로, 프로젝트 상태를 보여줍니다.
• package-lock.json
  • 설치된 의존성의 정확한 버전을 기록합니다.
  • 팀 프로젝트에서 동일한 패키지 버전을 유지하기 위해 사용됩니다.
• vite.config.js
  • Vite 설정 파일입니다.
  • 주요 역할:
    • 경로 별칭 설정: @/components 같은 별칭 추가 가능.
    • 플러그인 추가: 예를 들어 React, TypeScript 플러그인 설정.
    • 빌드 옵션 커스터마이징: 최적화 설정, 외부 모듈 정의 등.
• README.md
  • 프로젝트의 설명 문서로, 사용법, 기능, 기여 방법 등을 작성합니다.
  • 특히, GitHub 저장소에서 기본적으로 표시되는 문서입니다.
• .gitignore
  • Git에서 추적하지 않을 파일이나 폴더를 지정합니다.
  • 일반적으로 포함되는 항목:
    • node_modules/: 의존성 저장소
    • dist/: 빌드 결과물
    • .env: 환경 변수 파일

---

2. public/ 폴더

정적 리소스를 저장하는 폴더

빌드 시 Vite가 이 폴더 내 파일을 그대로 복사합니다.

📂 주요 파일

• index.html
  • React 애플리케이션의 진입점(Entry Point).
  • React는 이 파일 안의 <div id="root"></div>를 기준으로 애플리케이션을 렌더링합니다.
  • 이곳에서 <title>, <meta> 태그 등을 수정할 수 있습니다.

사용 예시

• 프로젝트에 이미지, 폰트 파일 등 정적 리소스를 추가할 때 사용합니다.
  • 예: /public/logo.png 경로로 접근 가능.

---

3. src/ 폴더

React 애플리케이션의 주요 코드가 위치하는 디렉토리

컴포넌트, 스타일, 상태 관리 로직 등이 포함됩니다.

📂 주요 폴더 및 파일

• assets/
  • 이미지, 아이콘, SVG 등 정적 파일을 저장합니다.
  • CSS 및 JavaScript 파일에서 import하여 사용할 수 있습니다.
• App.jsx
  • React 애플리케이션의 최상위 컴포넌트.
  • 주요 컴포넌트와 라우팅, 전역 상태 등을 관리합니다.
  • 일반적으로 프로젝트의 전체 구조를 설계하는 핵심 파일입니다.
• App.css
  • App.jsx에서 사용하는 스타일을 정의합니다.
  • 전역 스타일, 레이아웃 설정 등이 포함될 수 있습니다.
• index.css
  • 브라우저 초기화 스타일과 공통 스타일을 정의합니다.
  • CSS reset 또는 Normalize CSS가 적용되기도 합니다.
• main.jsx
  • React 애플리케이션의 진입점 파일로, DOM에 App 컴포넌트를 마운트합니다.
  • React 18 이상에서는 ReactDOM.createRoot()를 사용하여 렌더링합니다.
  • 예:
  • import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);

---

4. 기타 파일

• eslint.config.js
  • 코드 품질 관리 및 스타일을 위한 ESLint 설정 파일입니다.
  • 협업 시 일관된 코딩 스타일을 유지하고 잠재적인 오류를 방지할 수 있습니다.
• tsconfig.json (TypeScript 프로젝트에서 사용)
  • TypeScript 컴파일러의 설정 파일입니다.
  • React 프로젝트에서 TypeScript를 사용하는 경우 추가됩니다.

---

폴더 구조 요약

 

폴더	파일 역할
node_modules/	프로젝트의 의존성 패키지 저장소 (수정 금지).
public/	정적 파일 저장 디렉토리.
src/	애플리케이션의 메인 코드 디렉토리.
assets/	정적 리소스 (이미지, 아이콘) 저장.
App.jsx	최상위 React 컴포넌트.
main.jsx	React 애플리케이션 진입점 (DOM에 마운트).
vite.config.js	Vite 설정 파일.
eslint.config.js	코드 품질 관리 도구 설정 파일.
package.json	프로젝트 설정 및 의존성 관리.
.gitignore	Git에서 추적하지 않을 파일 정의.

 

---

추가 개념 보충

왜 Vite를 사용하는가?

1. 빠른 개발 서버
   •    ESM(ECMAScript Modules)을 기반으로 브라우저가 직접 모듈을 처리하므로 번들링이 필요하지 않습니다.
   •    첫 번째 빌드 속도가 매우 빠르며, 변경 사항이 즉시 반영됩니다.
2. 핫 모듈 교체(HMR)
   •   코드 변경 시 전체 페이지를 새로고침하지 않고도 변경 사항을 반영합니다.
3. 경량화된 설정
   •   Webpack처럼 복잡한 설정이 필요하지 않고, 플러그인을 쉽게 추가할 수 있습니다.

Vite vs Webpack

• Vite: 최신 프로젝트, 빠른 개발 환경이 필요한 경우 적합.
• Webpack: 복잡한 번들링이나 레거시 프로젝트에 적합.

---

정리 및 활용 팁

• public/: 정적 리소스를 저장하고, HTML의 기본 구조를 정의합니다.
• src/: 모든 React 코드와 애플리케이션 로직이 포함됩니다.
• Vite의 설정 파일은 간단하지만, 프로젝트 요구 사항에 따라 확장 가능합니다.
• 프로젝트 협업 시 package.json과 .gitignore는 반드시 정확히 관리해야 합니다.