EN

페이지 2: 개발 환경 및 폴더 구조

2. 개발 환경 및 폴더 구조

Vite React 프로젝트는 깔끔하고 효율적인 폴더 구조를 제공하며, 몇 가지 핵심 파일과 디렉토리를 포함합니다.

2.1. 일반적인 폴더 구조

my-react-app/
├── public/                 # 정적 자산 (빌드 시 그대로 복사)
├── src/                    # 소스 코드
│   ├── assets/             # 이미지, 아이콘 등
│   ├── components/         # 재사용 가능한 UI 컴포넌트
│   ├── pages/              # 라우트별 페이지 컴포넌트
│   ├── App.jsx             # 메인 애플리케이션 컴포넌트
│   ├── main.jsx            # React 앱의 엔트리 포인트
│   └── index.css           # 전역 CSS 스타일
├── index.html              # 앱의 엔트리 HTML 파일 (Vite에서 주입)
├── package.json            # 프로젝트 정보 및 의존성
├── vite.config.js          # Vite 설정 파일
└── jsconfig.json (or tsconfig.json) # JavaScript/TypeScript 설정

index.html: Vite는 이 파일을 애플리케이션의 진입점으로 사용하지만, 빌드 과정에서 스크립트를 동적으로 주입하므로 직접 스크립트 태그를 추가할 필요는 없습니다.

2.2. vite.config.js 설정

Vite의 동작 방식을 사용자 정의할 수 있는 핵심 설정 파일입니다. 예를 들어, @ 심볼을 사용하여 src 디렉토리에 대한 별칭(alias)을 설정할 수 있습니다.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src', // @/components/Button.jsx 와 같이 사용 가능
    },
  },
});

이 설정을 통해 복잡한 상대 경로 대신 절대 경로로 모듈을 가져올 수 있어 코드 가독성이 향상됩니다.

Contact Us