YalySeung

그냥 개발자

🏗️ React Vite 프로젝트 구조

정의

React Vite 프로젝트 구조는 Vite로 생성한 React 애플리케이션의 폴더와 파일 배치 방식이다.

프로젝트를 시작할 때 어떤 파일이 어디에 있고, 어떤 역할을 하는지 알아두면 초기 탐색이 훨씬 쉬워진다.

📁 폴더 구조

image

node_modules

  • 프로젝트에 필요한 패키지가 실제 설치되는 디렉터리다.
  • npm install 후 생성된다.

public

  • 정적 파일을 두는 폴더다.
  • 빌드 시 그대로 복사되거나 정적 경로로 제공된다.

src

  • 애플리케이션 소스가 들어가는 핵심 폴더다.
  • 컴포넌트, 스타일, 로직을 주로 이곳에서 관리한다.

assets

  • 이미지나 아이콘 같은 정적 리소스를 보관하는 용도로 자주 사용한다.
  • 프로젝트마다 src/assets 형태로 두는 경우가 많다.

📄 주요 파일

index.html

  • React 앱이 붙는 기준 HTML 파일이다.

main.jsx

  • 프로젝트의 시작점 역할을 한다.
  • App 컴포넌트를 실제 DOM에 렌더링한다.

App.jsx

  • 애플리케이션의 최상위 컴포넌트다.
  • 화면의 시작 구조를 이곳에서 많이 잡는다.

vite.config.js

  • Vite 설정 파일이다.
  • 서버 포트, 경로 별칭, 플러그인 등을 설정한다.

package.json

  • 프로젝트 정보와 의존성, 실행 스크립트를 관리한다.
  • 빌드와 실행에 필요한 기본 정보가 들어 있다.

package-lock.json

  • 설치된 패키지 버전을 고정하는 파일이다.
  • 동일한 환경을 재현할 때 중요하다.

.eslintrc.cjs

  • 코드 스타일과 문법 검사 설정 파일이다.

*.css

  • CSS 파일은 담당 JSX 파일과 함께 두는 경우가 많다.
  • App.css는 App.jsx에 대응하는 지역 스타일로 볼 수 있다.
  • index.css는 전역 스타일로 사용하는 경우가 많다.

🧩 구조를 볼 때 확인할 것

  • src 안에서 컴포넌트가 어떻게 나뉘는지 확인한다.
  • 정적 파일은 public과 assets 중 어디에 두는지 구분한다.
  • 빌드와 실행에 필요한 파일은 package.json과 vite.config.js를 먼저 본다.

📌 정리

  • React Vite 프로젝트는 src를 중심으로 구성하는 것이 일반적이다.
  • package.json, main.jsx, App.jsx는 가장 먼저 보는 파일이다.
  • 구조를 이해하면 초기 개발 속도가 빨라진다.

연결문서

댓글남기기

참고