[P2-1. 할 일 관리 앱 만들기] 프로젝트 준비하기

프로젝트 구현에 앞서 필요한 준비 작업을 진행합니다. 프로젝트 1을 준비할 때처럼 먼저 앱의 요구사항을 분석하고, 이를 토대로 필요한 기능을 하나씩 구현하겠습니다.

 

요구사항 분석하기

다음 그림은 이번 장에서 만들 [할 일 관리] 앱을 최종적으로 구현한 모습입니다.

 

[할 일 관리] 앱의 최종 구현 모습

 

최종 구현 페이지에서 보듯이 [할 일 관리] 앱에는 다음과 같은 기능들이 있습니다.

 

1. 오늘의 날짜를 요일, 월, 일, 연도순으로 표시합니다.
2. 할 일(Todo) 을 작성하는 입력 폼이 있고, <추가> 버튼을 클릭하면 할 일 아이템을 생성합니다.
3. [할 일 관리] 앱은 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일만 추출할 수 있습니다.
4. 리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 표시하는 체크박스, 아이템 이름, 등록 날짜, 그리고 <삭제> 버튼으로 이루어져 있습니다.

요구사항 분석에 맞게 페이지의 각 UI 요소를 역할에 따라 구분할 수 있도록 컴포넌트 단위로 나누겠습니다. 컴포넌트를 적절히 분할하는 일은 개인적으로 많은 연습이 필요한데, UI 요소를 컴포넌트 단위로 생각하는 게 중요합니다. 이 책의 분할결과를 보기 전에 여러분도 요구사항을 생각하면서 UI 요소를 컴포넌트로 나눠보길 바랍니다. 공책 등에 직접 그려보는 걸 추천합니다.

 

컴포넌트 단위로 본 [할 일 관리] 앱

 

[할 일 관리] 앱의 UI 요소를 컴포넌트 단위로 나누면 다음과 같습니다.

 

• Header: 오늘의 날짜를 표시 형식에 맞게 보여줍니다.
• TodoEditor: 새로운 할 일 아이템을 등록합니다.
• TodoList: 검색어에 맞게 필터링된 할 일 리스트를 렌더링합니다.(만약 검색 폼이 공백이면 필터링하지 않습니다)
• TodoItem: 낱낱의 할 일 아이템에는 기본 정보 외에도 체크박스와 <삭제> 버튼이 있습니다. 체크 박스를 클릭하면 할 일을 마쳤는지 여부가 토글되고, <삭제> 버튼을 클릭하면 해당 아이템을 삭제합니다.

토글은 디지털 신호가 1 또는 0 을 되풀이하는 상태라는 뜻으로, 이 앱에서는 체크 표시여부에 따라 할 일을 마쳤는지 아닌지를 확인할 때 사용합니다.

 

---

리액트 앱 만들기

프로젝트 2를 위한 새 리액트 앱을 생성하고 불필요한 파일과 코드는 삭제합니다. 이것은 프로젝트 1의 준비 과정과 동일합니다.

 

1. 문서(Documents) 아래에 새로운 폴더 'project2' 를 만듭니다.
2. 비주얼 스튜디오 코드에서 project 2 폴더를 불러온 다음, 터미널을 열고 npx create-react-app . 명령을 입력해 리액트 앱을 생성합니다.
3. 앱을 생성했다면 다음 4개의 불필요한 파일은 삭제합니다.

• src/App.test.js
• src/logo.svg
• src/reportWebVitals.js
• setupTest.js

   4. 계속해서 App.js 와 index.js 에 작성된 불필요한 코드를 삭제합니다. 자세한 수정 사항은 프로젝트 1의 준비하기를 참          고합니다.

 

불필요한 코드를 삭제했다면 두 파일의 최종 코드는 다음과 같습니다.

 

src/App.js

import "./App.css";

function App() {
  return <div className="App"></div>;
}
export default App;

 

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 />);

 

5. 터미널에서 npm run start 를 입력해 리액트 앱을 시작합니다. 그러면 아무것도 없는 빈 페이지가 나옵니다.