오늘날 다양한 방식으로 작업을 관리할 수 있는 도구들이 있습니다. 그중에서도 투두 리스트 애플리케이션은 간단하면서도 강력한 작업 관리 도구로 널리 사용됩니다. 개발자들이 이러한 투두 애플리케이션을 만들어 보는 것은 단순히 기능 구현을 넘어서 다양한 개념들을 배우고 실전 경험을 쌓는 데 매우 유용합니다. 특히 이번 프로젝트에서는 React와 Firebase를 활용해 투두 리스트 애플리케이션을 만들어보면서, 데이터베이스와의 통합, 실시간 데이터 처리, UI 설계 등의 개념을 체험하게 됩니다.
사전 준비물
- Node.js: React 프로젝트에서 필요한 npm 패키지 설치를 위해 필요합니다.
- VS Code: 코드 편집기로서 React 프로젝트 개발을 위한 환경을 제공합니다.
- Firebase 콘솔: 클라우드 기반 데이터베이스인 Firestore와의 통합을 위해 사용됩니다.
Firebase 프로젝트 생성 및 설정
Firebase를 사용하려면 먼저 Firebase 콘솔에서 프로젝트를 생성해야 합니다. Firebase 콘솔에 접속해 Google 계정으로 로그인한 후 새 프로젝트를 생성합니다. 프로젝트 생성 단계에서는 프로젝트 이름을 지정하고 Google 애널리틱스를 비활성화합니다. 프로젝트 생성이 완료되면 Firebase 대시보드로 이동하게 됩니다.
Firestore 데이터베이스 생성
Firebase 대시보드의 왼쪽 패널에서 Build 메뉴를 클릭하고, Firestore Database를 선택합니다. 데이터베이스 만들기 버튼을 클릭한 후, 테스트 모드로 설정하여 개발 단계에서 자유롭게 데이터를 저장하고 읽을 수 있도록 합니다. Firestore 데이터베이스가 생성되면 초기 상태는 비어있는 컬렉션으로 시작됩니다.
React 프로젝트 생성 및 설정
이제 React 프로젝트를 생성합니다. Node.js가 설치되어 있다면 아래 명령어로 Create React App(CRA)을 사용해 새로운 React 프로젝트를 시작할 수 있습니다.
npx create-react-app todo-app
cd todo-app
code .
위 명령어로 todo-app이라는 이름의 새로운 React 프로젝트가 생성되며, Visual Studio Code로 프로젝트가 열립니다.
프로젝트 구조 설정
프로젝트 구조를 설정하기 위해 src 폴더 아래에 두 개의 폴더를 생성합니다. 첫 번째는 components 폴더이며, 여기에는 Todo.js와 EditTodo.js라는 두 개의 컴포넌트를 생성합니다. 두 번째는 services 폴더로, 여기에는 Firebase 설정을 담을 firebase.config.js 파일을 생성합니다.
Firebase를 React와 통합
Firebase를 React 프로젝트에 통합하기 위해 Firebase SDK를 설치해야 합니다. 터미널에서 아래 명령어를 실행하여 Firebase 패키지를 설치합니다.
npm install firebase
firebase.config.js 파일에서 Firebase 설정을 작성합니다. Firebase 대시보드에서 프로젝트 설정으로 이동해 Firebase SDK 설정 정보를 복사해 아래와 같이 구성합니다.
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
Bootstrap 5를 React에 통합
Bootstrap을 활용해 간편하게 스타일링을 적용할 수 있습니다. Bootstrap 5의 CDN 링크를 사용하여 public/index.html 파일의 <head> 섹션에 Bootstrap CSS와 JavaScript 파일을 추가합니다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
이제 React 컴포넌트에서 Bootstrap 클래스를 활용해 스타일링된 UI를 만들 수 있습니다.
사용자 인터페이스 설계
Todo.js 컴포넌트에서 할 일 목록을 추가하고 표시할 UI를 설계합니다. 이 UI는 Bootstrap 클래스를 활용하여 간단하면서도 직관적인 디자인을 구현할 수 있습니다.
import React from 'react';
const Todo = () => {
return (
<div className="container">
<div className="card">
<div className="card-body">
<button className="btn btn-info" data-bs-toggle="modal" data-bs-target="#addModal">할 일 추가</button>
<div className="todo-list">
{/* 할 일 목록 표시 */}
</div>
</div>
</div>
{/* 할 일 추가 모달 */}
<div className="modal fade" id="addModal" tabIndex="-1">
<div className="modal-dialog">
<form>
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">할 일 추가</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal"></button>
</div>
<div className="modal-body">
<input type="text" className="form-control" placeholder="할 일 입력" />
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
<button type="button" className="btn btn-primary">저장</button>
</div>
</div>
</form>
</div>
</div>
</div>
);
}
export default Todo;
Firestore 데이터 추가
할 일을 Firebase Firestore에 저장하기 위해 Firestore의 addDoc 메서드를 사용합니다. 사용자가 입력한 할 일을 Firestore에 추가하고, 이를 다시 화면에 표시합니다.
import { collection, addDoc, serverTimestamp } from 'firebase/firestore';
import { db } from '../services/firebase.config';
const submitTodo = async (e) => {
e.preventDefault();
try {
await addDoc(collection(db, 'todos'), {
task: newTask,
completed: false,
timestamp: serverTimestamp(),
});
window.location.reload();
} catch (err) {
console.error(err);
}
};
Firestore에서 데이터 가져오기 및 표시
Firestore에 저장된 데이터를 가져와 React 컴포넌트에 표시하기 위해 getDocs 메서드를 사용합니다. 데이터를 가져와 useEffect를 활용해 화면에 렌더링합니다.
import { useEffect, useState } from 'react';
import { collection, getDocs } from 'firebase/firestore';
import { db } from '../services/firebase.config';
const Todo = () => {
const [todos, setTodos] = useState([]);
useEffect(() => {
const fetchData = async () => {
const querySnapshot = await getDocs(collection(db, 'todos'));
setTodos(querySnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id })));
};
fetchData();
}, []);
return (
<div className="todo-list">
{todos.map(todo => (
<div key={todo.id}>{todo.task}</div>
))}
</div>
);
};
Firestore 데이터 삭제 및 업데이트
삭제 및 업데이트 기능은 deleteDoc, updateDoc 메서드를 사용하여 구현할 수 있습니다. 각 할 일 항목 옆에 삭제 및 수정 버튼을 추가해 사용자가 해당 기능을 쉽게 사용할 수 있도록 합니다.
체크박스 기능 구현 및 데이터 정렬
체크박스 기능을 구현하여 사용자가 완료한 작업을 표시할 수 있도록 합니다. 완료된 작업은 isChecked 값으로 Firestore에 저장되고, 화면에는 text-decoration: line-through 스타일로 표시됩니다. 또한, Firestore의 orderBy 메서드를 활용해 할 일 목록을 시간 순으로 정렬할 수 있습니다.
결론
이번 프로젝트를 통해 React와 Firebase를 활용한 기본적인 투두 리스트 애플리케이션을 완성했습니다. 데이터베이스 연동, UI 설계, CRUD 기능 구현 등 여러 중요한 개념을 다뤘습니다.
'SW > TypeScript' 카테고리의 다른 글
| Angular에서 환경 변수를 사용하는 방법: 환경 변수로 유연한 배포 환경 구성하기 (0) | 2024.10.23 |
|---|---|
| React Native와 Tailwind CSS: 최적의 조합으로 앱 개발을 가속화하다 (0) | 2024.10.10 |
| Flutter vs. React Native: 모바일 앱 개발자를 위한 딜레마 (0) | 2024.10.08 |
| useState() vs. useRef(): 리액트에서의 기술적 차이점 이해하기 (0) | 2024.09.12 |
| TypeScript : 함수 파라미터 어노테이션 : 개념, 예제, 설명 (0) | 2023.04.09 |