Dec 5, 2025 • • React

React 감정 일기장 만들기 1편 - 프로젝트 시작하기와 기본 구조 이해

#React #React 초보자 #React 프로젝트 생성 #Create React App #React 기본 구조 #React 시작하기 #React Router #웹 개발 튜토리얼 #감정 일기장 #JavaScript

React 코드를 처음 봤을 때 “이게 대체 어디서 어디로 흘러가는 거지?” 하고 당황한 적 있으시죠?

저도 처음엔 그랬어요. 파일은 여기저기 흩어져 있고, 이 컴포넌트가 저 컴포넌트를 부르고, 데이터는 어디론가 사라졌다가 갑자기 화면에 나타나고… 마치 미로 속을 헤매는 기분이었거든요.

그런데 전체 지도를 한번 보고 나니까 완전히 달라지더라고요. “아, 여기서 여기로 가는 거였구나!” 하는 순간이 오면 코드 읽는 게 훨씬 수월해져요.

오늘부터 4편에 걸쳐 감정 일기장 앱을 처음부터 끝까지 만들어 볼 거예요. 1편에서는 React 프로젝트를 생성하고 기본 구조를 이해하는 것부터 시작합니다.

이번 편에서 배울 내용

✅ Node.js와 개발 환경 준비
✅ Create React App으로 프로젝트 생성
✅ React 앱의 전체 구조 파악
✅ index.html의 역할 이해
✅ index.js - React 앱 진입점
✅ BrowserRouter 설치 및 설정

개발 환경 준비하기

React 개발을 시작하기 전에 필요한 도구들을 설치해야 해요.

1. Node.js 설치

React 앱을 만들려면 Node.js가 필요해요. Node.js 공식 홈페이지에서 LTS 버전을 다운로드해서 설치하세요.

설치가 잘 됐는지 확인하려면 터미널(맥) 또는 명령 프롬프트(윈도우)를 열어서 이렇게 입력해보세요:

node -v
npm -v

버전 번호가 나오면 성공입니다!

2. 코드 에디터 설치

VS Code를 추천해요. VS Code 공식 홈페이지에서 무료로 다운로드할 수 있어요.

React 프로젝트 생성하기

이제 본격적으로 감정 일기장 프로젝트를 만들어볼게요!

Create React App 사용하기

터미널을 열고 프로젝트를 만들고 싶은 폴더로 이동한 다음, 이 명령어를 입력하세요:

# 프로젝트 생성 (2-3분 정도 걸려요)
npx create-react-app emotion-diary

# 생성된 폴더로 이동
cd emotion-diary

# VS Code로 열기
code .

npx create-react-app emotion-diary 명령어가 자동으로:

React 라이브러리 설치
개발 서버 설정
기본 폴더 구조 생성

이 모든 걸 해줘요. 정말 편하죠?

프로젝트 구조 살펴보기

VS Code에서 프로젝트를 열면 이런 폴더 구조가 보일 거예요:

emotion-diary/
├── node_modules/      # 설치된 라이브러리들 (건드리지 않아요)
├── public/            # 정적 파일들
│   └── index.html     # ⭐ 중요! 우리가 볼 파일
├── src/               # 우리가 코드를 작성할 곳
│   ├── App.js         # ⭐ 메인 컴포넌트
│   ├── index.js       # ⭐ React 진입점
│   └── index.css      # 스타일
├── package.json       # 프로젝트 정보
└── README.md

⭐ 표시된 파일들이 오늘 우리가 중점적으로 볼 파일들이에요.

React Router 설치하기

나중에 여러 페이지를 만들 거라서 React Router를 미리 설치해둘게요:

npm install react-router-dom

이 라이브러리가 있어야 /home, /diary 같은 다른 페이지로 이동할 수 있어요.

개발 서버 실행하기

이제 프로젝트를 실행해볼까요?

npm start

잠시 기다리면 브라우저가 자동으로 열리면서 http://localhost:3000에 React 기본 화면이 나타날 거예요!

![React 기본 화면](이미지 URL)

회전하는 React 로고가 보이면 성공입니다! 🎉

React 앱이 시작되는 과정

자, 이제 가장 중요한 부분이에요. React 앱이 어떻게 화면에 나타나는지 순서대로 따라가 봅시다.

전체 흐름 한눈에 보기

graph TD
    A["index.html<br/>(빈 HTML 파일)"] --> B["index.js<br/>(React 앱 시작점)"]
    B --> C["App.js<br/>(메인 컴포넌트)"]
    C --> D["브라우저에 화면 표시"]
    
    style A fill:#e1f5ff
    style B fill:#ffe1e1
    style C fill:#fff4e1
    style D fill:#e1ffe1

이 다이어그램이 오늘 우리가 이해할 전체 여정이에요. 위에서 아래로 데이터가 흘러간다고 생각하시면 돼요.

비유하자면 이런 느낌이에요:

index.html = 빈 식당 건물 (아직 아무것도 없음)
index.js = 식당 오픈 (React 앱 시작!)
App.js = 실제 메뉴와 서비스 (보여줄 내용)
브라우저 = 손님이 보는 최종 모습

index.html - 모든 것의 시작

public/index.html 파일을 열어보세요. 이렇게 생겼어요:

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>감정 일기장</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

여기서 가장 중요한 건 딱 한 줄이에요:

<div id="root"></div>

이게 뭐냐면, React가 그림을 그릴 도화지 같은 거예요. “여기에다가 내가 만든 앱을 그릴게!” 하고 약속한 장소인 셈이죠.

실제로 브라우저 개발자 도구(F12)를 열어서 Elements 탭을 보면, 이 빈 div 안에 React가 만든 컴포넌트들이 가득 차 있는 걸 볼 수 있어요.

index.js - React 앱의 진입점

이제 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(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

코드를 한 줄씩 해석해볼게요:

1. Import 부분

import React from 'react';              // React 라이브러리
import ReactDOM from 'react-dom/client'; // React를 DOM에 그리는 도구
import './index.css';                    // 스타일
import App from './App';                 // 우리가 만들 메인 컴포넌트

2. Root 생성

const root = ReactDOM.createRoot(document.getElementById('root'));

document.getElementById('root') - 아까 그 빈 div를 찾아요
ReactDOM.createRoot() - 그 div를 React의 루트로 만들어요
root라는 변수에 저장해둬요

3. 렌더링

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

root.render() - 여기에 App 컴포넌트를 그려요
<React.StrictMode> - 개발 중에 잠재적 문제를 찾아주는 도구 (나중에 배포할 때는 영향 없어요)
<App /> - 실제로 보여줄 컴포넌트

BrowserRouter 설정하기

나중에 여러 페이지를 만들 거니까, 지금 BrowserRouter를 설정해둘게요.

src/index.js를 이렇게 수정하세요:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';  // 추가!
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>  {/* 추가! */}
      <App />
    </BrowserRouter>  {/* 추가! */}
  </React.StrictMode>
);

BrowserRouter가 뭐냐면, URL에 따라 다른 화면을 보여주는 기능이에요. 이게 있어야:

/ - 홈 화면
/diary - 일기 목록
/new - 새 일기 작성

이런 식으로 다른 페이지를 만들 수 있어요.

App.js - 메인 컴포넌트

src/App.js 파일을 열면 기본 코드가 있을 거예요. 우리는 이걸 간단하게 바꿔볼게요:

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>감정 일기장</h1>
      <p>React로 감정 일기장을 만들어봅시다!</p>
    </div>
  );
}

export default App;

이렇게 수정하고 저장하면 (Ctrl+S 또는 Cmd+S), 브라우저가 자동으로 새로고침되면서 “감정 일기장” 타이틀이 나타날 거예요!

이게 바로 React의 **핫 리로딩(Hot Reloading)**이에요. 코드를 고칠 때마다 자동으로 반영되니까 정말 편하죠?

확인하기

여기까지 잘 따라오셨나요? 다음 항목들을 확인해보세요:

✅ 브라우저에서 확인

http://localhost:3000 접속 시 “감정 일기장” 화면 표시됨
페이지 로딩 시 에러 없음

✅ 개발자 도구에서 확인 (F12)

Elements 탭에서 <div id="root"> 안에 React 컴포넌트가 있는지 확인
Console 탭에 에러 메시지가 없는지 확인

✅ VS Code에서 확인

src/index.js에 BrowserRouter가 추가되었는지 확인
src/App.js가 수정되었는지 확인

자주 묻는 질문

Q1. npm start가 안 돼요!

해결 방법:

Node.js가 제대로 설치되었는지 확인 (node -v)
터미널에서 프로젝트 폴더 안에 있는지 확인 (cd emotion-diary)
node_modules 폴더를 삭제하고 npm install 다시 실행

Q2. BrowserRouter를 왜 미리 설치하나요?

다음 편에서 여러 페이지를 만들 거예요. 그때 다시 설치하는 것보다 지금 한 번에 해두는 게 편해요!

Q3. index.html을 수정해도 되나요?

제목(<title>)이나 메타 태그는 수정해도 돼요. 하지만 <div id="root"></div>는 절대 건드리면 안 돼요. 이게 없으면 React 앱이 아예 작동하지 않아요!

Q4. public 폴더와 src 폴더의 차이가 뭔가요?

public: 변하지 않는 정적 파일 (HTML, 이미지, 파비콘 등)
src: 우리가 작성할 React 코드 (컴포넌트, 스타일 등)

기본적으로 모든 코드는 src 폴더에 작성하면 돼요.

정리하며

오늘 1편에서 배운 내용을 정리하면:

graph LR
    A["Node.js 설치"] --> B["프로젝트 생성"]
    B --> C["React Router 설치"]
    C --> D["개발 서버 실행"]
    D --> E["index.html → index.js → App.js"]
    
    style A fill:#e1f5ff
    style C fill:#ffe1e1
    style E fill:#e1ffe1

핵심만 기억하세요:

📦 index.html에 빈 <div id="root">가 있다
🚀 index.js에서 그 div를 찾아 React 앱을 시작한다
🎨 App.js가 실제로 화면에 보여줄 내용을 만든다
🔄 BrowserRouter가 있어야 여러 페이지를 만들 수 있다

다음 편에서는 Home, New, Diary, Edit 페이지를 만들고 React Router로 페이지를 이동하는 방법을 배울 거예요.

오늘 만든 프로젝트는 꼭 그대로 보관해두세요. 2편부터 계속 이어서 만들 거예요!

시리즈 네비게이션

1편: React 프로젝트 시작하기 - 기본 구조 이해 ← 현재 글
2편: React Router로 페이지 만들기 (다음 편)
3편: State로 데이터 관리하기
4편: 재사용 가능한 컴포넌트 만들기
5편: 전체 앱 연결 및 데이터 관리