Table of Contents

React – React 시작하기 – 개발 환경 설정 – 3 – 기본 폴더 구조 및 설정 파일 이해

안녕하세요, 여러분! 😊
이번 시간에는 create-react-app(CRA)으로 프로젝트를 생성하면 자동으로 만들어지는 기본 폴더 구조와 그 안에 포함된 설정 파일들의 역할을 하나하나 찬찬히 살펴볼게요.

이건 마치 건축 설계도를 보고 집의 구조를 이해하는 과정과도 같아요. 구조를 알면 유지보수도 쉽고, 커스터마이징도 자유로워지거든요!

1. CRA로 생성한 프로젝트 구조 전체 보기

CRA로 프로젝트를 만들면 아래와 같은 구조가 생성돼요.

my-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── reportWebVitals.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock / package-lock.json

각 폴더와 파일이 어떤 역할을 하는지 하나씩 살펴볼게요!

2. 📁 `node_modules/` 폴더

프로젝트에서 사용하는 모든 외부 라이브러리와 모듈이 저장되는 폴더입니다.
예를 들어 react, react-dom, react-scripts 등이 여기에 설치돼요.
용량이 크고 자주 변경되기 때문에 Git에 올리지 않습니다.

✅ .gitignore 파일에 자동으로 제외 처리되어 있어요.

3. 📁 `public/` 폴더

이 폴더는 프로젝트의 정적(static) 자산을 저장하는 공간이에요.

파일명	설명
`index.html`	React 앱의 진짜 시작점. 이 HTML에 React가 렌더링됩니다.
`favicon.ico`	브라우저 탭에 표시되는 아이콘
`manifest.json`	PWA 설정용 파일 (앱 이름, 색상, 아이콘 등 정의)

<!-- public/index.html 예시 -->
<div id="root"></div>

👉 이 div#root가 React 컴포넌트가 들어갈 “그릇”이에요!

4. 📁 `src/` 폴더

우리가 직접 작성할 코드가 모두 이 폴더에 들어있어요. 가장 중요하죠!

파일명	설명
`App.js`	메인 컴포넌트. 화면의 대부분을 구성
`App.css`	`App.js`에 적용되는 스타일
`App.test.js`	`App.js`의 테스트 코드 (기본은 Jest)
`index.js`	React 앱의 진입점. ReactDOM이 `App.js`를 `#root`에 렌더링
`index.css`	전체 페이지에 적용되는 전역 스타일
`logo.svg`	기본 로고 이미지
`reportWebVitals.js`	성능 측정 함수 (선택 사용)

✅ 가장 중요한 두 파일

`src/index.js`

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

App 컴포넌트를 root라는 DOM 요소에 렌더링해요.
즉, React 앱의 진짜 시작 지점입니다.

`src/App.js`

function App() {
  return (
    <div className="App">
      <h1>Hello React!</h1>
    </div>
  );
}

export default App;

이곳에서 페이지의 구조를 만들고 다른 컴포넌트를 연결해요.
추후 컴포넌트를 분리하고 재사용하게 될 거예요.

5. 주요 설정 파일들

📄 `package.json`

React 프로젝트의 설정 파일이자 정체성이에요. 여기에 프로젝트 이름, 의존성, 스크립트 명령어 등이 기록돼요.

{
  "name": "my-app",
  "version": "0.1.0",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

중요한 항목 요약:

항목	설명
`dependencies`	앱 실행에 필요한 라이브러리
`scripts`	자주 쓰는 명령어 등록 (`npm start` 등)
`devDependencies`	개발 중에만 필요한 도구 (CRA는 따로 없음)

📄 `.gitignore`

Git에 올리지 않을 파일/폴더 목록을 명시해요.

node_modules
build
.env

이걸 통해 불필요하거나 보안상 민감한 파일을 Git에 제외시킬 수 있어요.

📄 `README.md`

프로젝트의 소개 문서입니다. GitHub나 협업할 때 이곳에 설명을 적어두면 좋아요.

# My App

React 프로젝트 시작을 위한 CRA 기반 프로젝트입니다.

📄 `package-lock.json` 또는 `yarn.lock`

어떤 패키지가 어떤 버전으로 설치되었는지 정확하게 기록한 파일이에요.
여러 개발자가 협업할 때 버전 불일치를 방지하는 역할을 합니다.

6. CRA에서 숨겨진 설정들

CRA는 내부적으로 Webpack, Babel, ESLint 등을 사용하지만, 그 설정을 숨겨놨어요.

만약 직접 설정을 보고 바꾸고 싶다면 npm run eject를 실행해야 해요.

⚠️ eject는 되돌릴 수 없으니 꼭 필요할 때만 신중하게 사용하세요!

7. 폴더 구조 커스터마이징 팁

초기에는 단순하게 사용해도 되지만, 프로젝트가 커질수록 다음과 같은 폴더 구조를 추천드려요:

src/
├── assets/          # 이미지, 폰트 등
├── components/      # 재사용 가능한 컴포넌트
├── pages/           # 페이지 단위 컴포넌트
├── hooks/           # 커스텀 훅
├── utils/           # 유틸리티 함수
├── App.js
└── index.js

주의할 점 정리

주의사항	설명
`node_modules`는 건드리지 말기	수동 수정 시 앱이 고장날 수 있어요. 자동으로 설치/관리하세요.
설정을 직접 바꾸고 싶다면 `eject` 필요	단, 한번 eject 하면 되돌릴 수 없어요. 신중히!
`public/index.html`은 React 앱의 기반	`#root`를 절대 삭제하거나 변경하지 마세요.
`App.js`는 컴포넌트 설계의 중심	페이지가 커질수록 컴포넌트를 잘게 나눠 관리하세요.

마무리하며

React의 기본 폴더 구조와 설정 파일을 이해하는 건, 단순히 “외우는 것”이 아니라 왜 그렇게 설계되었는지를 이해하는 과정이에요.

이제 여러분은 CRA로 만들어진 React 앱의 내부가 어떻게 구성되어 있는지, 어느 파일이 어떤 역할을 하는지를 잘 아시게 되었을 거예요!

🚀 다음 글에서는 이제 본격적으로 JSX 문법과 함께 React의 실전 문법을 배워볼 거예요. 기대되시죠? 우리 함께 계속 나아가봐요! 💪

React – React 시작하기 – 개발 환경 설정 – 3 – 기본 폴더 구조 및 설정 파일 이해

1. CRA로 생성한 프로젝트 구조 전체 보기

2. 📁 node_modules/ 폴더

3. 📁 public/ 폴더

4. 📁 src/ 폴더

✅ 가장 중요한 두 파일

src/index.js

src/App.js