[React] React로 할 일 관리 앱 만들기: 1장 - 프로젝트 설정

 

안녕하세요! 이 블로그 시리즈에서는 React를 사용하여 할 일 관리 앱을 만드는 과정을 단계별로 살펴보겠습니다. 첫 번째 포스트에서는 프로젝트 설정과 기본 구조를 만드는 방법을 알아보겠습니다.

1. Node.js 설치

먼저, Node.js가 설치되어 있어야 합니다. Node.js 공식 웹사이트에서 다운로드하여 설치할 수 있습니다.

2. Create React App 사용하기

React 프로젝트를 쉽게 시작할 수 있도록 Create React App을 사용하겠습니다. 터미널에서 다음 명령어를 실행하세요:

npx create-react-app todo-app
cd todo-app
npm start

이 명령어들은 새로운 React 프로젝트를 생성하고, 해당 디렉토리로 이동한 뒤, 개발 서버를 시작합니다.

3. 프로젝트 구조 살펴보기

생성된 프로젝트의 구조는 다음과 같습니다:

todo-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    index.css
    index.js

주요 파일들의 역할:

• public/index.html: 앱의 HTML 템플릿
• src/index.js: 자바스크립트 시작점
• src/App.js: 메인 React 컴포넌트

4. App.js 수정하기

이제 src/App.js 파일을 열고 다음과 같이 수정해 보겠습니다:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>할 일 관리 앱</h1>
      {/* 여기에 TodoList 컴포넌트가 들어갈 예정입니다 */}
    </div>
  );
}

export default App;

이 코드는 간단한 제목을 표시하는 기본 구조를 만듭니다.

5. 실행 및 확인

터미널에서 npm start 명령어를 실행하여 앱을 시작하세요. 브라우저에서 http://localhost:3000을 열면 "할 일 관리 앱"이라는 제목이 표시된 페이지를 볼 수 있습니다.

다음 단계

이제 기본적인 프로젝트 구조가 준비되었습니다. 다음 챕터에서는 TodoList 컴포넌트를 만들고 기본적인 할 일 목록 기능을 구현해 보겠습니다.