React 프로젝트를 처음 생성하면 다양한 폴더와 파일들이 자동으로 구성됩니다.
이 구조는 단순히 파일을 모아둔 것이 아니라, 역할과 책임이 분리된 설계를 제공합니다. 이번 글에서는 public, src를 비롯해 주요 파일들이 어떤 역할을 하는지 정리해보겠습니다.
public 폴더
public 폴더는 정적(Static) 자원을 저장하는 공간입니다.
여기에 있는 파일들은 빌드 과정에서 번들링되지 않고, 원본 그대로 제공됩니다.
- 이미지, 폰트, 아이콘, 동영상 등을 넣을 수 있음
- 접근 시 /파일명으로 직접 접근 가능
src 내부에서 import 하려면
src/assets를 쓰고, 외부에서 직접 접근해야 한다면public을 쓰는 게 일반적입니다.
예를 들어, public/logo.png를 넣었다면 브라우저에서는 다음처럼 접근할 수 있습니다:
http://localhost:5173/logo.pngsrc 폴더
- src는 source의 약자로 실제 개발 코드(Source)가 들어가는 핵심 디렉토리입니다.
React 컴포넌트, 스타일 파일, 유틸 함수 등 애플리케이션 로직이 모두 여기에 담깁니다.
src/assets 폴더
public과 유사하지만 차이가 있습니다.src/assets는 코드와 함께 번들링되는 정적 파일을 넣습니다.- 즉, import 문법을 사용해 가져오는 이미지, CSS, 글꼴 등을 관리합니다.
정적 리소스를 import 해서 사용하는 경우 여기에 넣습니다. 예를 들어 이미지 파일을 React 컴포넌트에서 사용하려면:
import logo from "./assets/logo.png";
function Header() {
return <img src={logo} alt="로고" />;
}src/main.jsx
React 애플리케이션의 실행 진입점입니다.
- 이 파일이 실행되면서 React 앱이 동작하기 시작합니다.
index.html의#root요소에 App 컴포넌트를 렌더링합니다.- ReactDOM이 실행되는 부분이므로 앱의 전체 구성이 시작되는 곳입니다.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);src/App.jsx
앱의 최상위 컴포넌트입니다.
- 여러 하위 컴포넌트들을 불러와 조합하는 역할을 합니다.
- 실제 화면의 뼈대를 정의하는 곳입니다.
function App() {
return (
<div>
<h1>Hello Vite + React!</h1>
</div>
);
}
export default App;src/App.css & src/index.css
App.css: App.jsx 전용 스타일index.css: 프로젝트 전역에서 공통으로 적용되는 스타일
index.html
React 앱의 진입점이 되는 HTML 파일입니다.
div#root라는 빈 컨테이너가 있으며, 여기에 React 컴포넌트들이 렌더링됩니다.- Vite는 이 파일을 기반으로 프로젝트를 실행합니다.
- ReactDOM이 이
#root에 컴포넌트를 주입(render)해서 화면을 그립니다.
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>vite.config.js
Vite의 환경 설정 파일입니다.
- 빌드 옵션, 플러그인, 경로 별칭(alias) 등을 설정할 수 있습니다.
- Rollup을 기반으로 동작하기 때문에 Rollup 설정도 활용 가능합니다.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});.gitignore
- Git 버전 관리에서 추적하지 않을 파일/폴더를 지정합니다.
- node_modules, 빌드 결과물(dist) 등이 여기에 포함됩니다.
.eslintrc.cjs
코드 스타일과 문법 검사 규칙을 정의하는 설정 파일입니다.
- 일관된 코드 스타일을 유지하도록 돕습니다.
- 협업 시 코드 품질을 통일하는 중요한 역할을 합니다.
package.json / package-lock.json
- package.json: 프로젝트의 메타데이터와 의존성 목록을 담고 있는 파일
- package-lock.json: 설치된 패키지의 정확한 버전 정보를 기록하는 파일
(협업 시 같은 환경을 재현할 수 있도록 보장)
README.md
- 프로젝트 소개, 설치 방법, 실행 방법 등을 기록하는 문서입니다.
- 협업이나 배포 시 가이드라인 역할을 합니다.
donggyun_ee