React Todo Application

React Todo Application

Tech Stack

React JavaScript CSS3 Local Storage

A modern todo application built with React, featuring state management and local storage

프로젝트 개요

React를 사용하여 구축한 현대적인 할 일 관리 애플리케이션입니다. 사용자 친화적인 인터페이스와 효율적인 상태 관리를 통해 일상적인 작업 관리를 도와줍니다.

주요 기능

핵심 기능

  • ✅ 할 일 추가/삭제: 새로운 작업을 쉽게 추가하고 완료된 작업을 삭제
  • 🔄 상태 변경: 작업의 완료/미완료 상태를 토글
  • ✏️ 편집 기능: 기존 작업 내용을 수정
  • 🏷️ 카테고리 분류: 작업을 카테고리별로 분류
  • 🔍 검색 기능: 특정 작업을 빠르게 찾기

고급 기능

  • 💾 로컬 저장: 브라우저 로컬 스토리지를 통한 데이터 영속성
  • 🎨 다크 모드: 사용자 선호에 따른 테마 변경
  • 📱 반응형 디자인: 모바일과 데스크톱 모두 지원
  • ⚡ 실시간 필터링: 상태별, 카테고리별 실시간 필터링

기술 스택

  • React 18.2.0: UI 라이브러리
  • JavaScript ES6+: 모던 JavaScript 문법
  • CSS3: 스타일링 및 애니메이션
  • Local Storage API: 데이터 영속성
  • React Hooks: 상태 관리

프로젝트 구조

react-todo-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── TodoList.jsx      # 할 일 목록 컴포넌트
│   │   ├── TodoItem.jsx      # 개별 할 일 아이템
│   │   ├── TodoForm.jsx      # 할 일 추가/편집 폼
│   │   ├── FilterBar.jsx     # 필터링 바
│   │   └── ThemeToggle.jsx   # 테마 토글
│   ├── hooks/
│   │   ├── useTodos.js       # 할 일 상태 관리 훅
│   │   └── useLocalStorage.js # 로컬 스토리지 훅
│   ├── utils/
│   │   └── helpers.js        # 유틸리티 함수들
│   ├── styles/
│   │   ├── App.css          # 메인 스타일
│   │   └── components.css   # 컴포넌트 스타일
│   ├── App.jsx              # 메인 앱 컴포넌트
│   └── index.js             # 앱 진입점
├── package.json
└── README.md

핵심 컴포넌트

TodoList 컴포넌트

const TodoList = ({ todos, onToggle, onDelete, onEdit }) => {
  return (
    <div className="todo-list">
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onToggle={onToggle}
          onDelete={onDelete}
          onEdit={onEdit}
        />
      ))}
    </div>
  );
};

커스텀 훅 - useTodos

const useTodos = (initialTodos = []) => {
  const [todos, setTodos] = useState(initialTodos);
  
  const addTodo = (text) => {
    const newTodo = {
      id: Date.now(),
      text,
      completed: false,
      category: 'general'
    };
    setTodos([...todos, newTodo]);
  };
  
  return { todos, addTodo, toggleTodo, deleteTodo, editTodo };
};

상태 관리

로컬 스토리지 연동

const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error('Error saving to localStorage:', error);
    }
  };

  return [storedValue, setValue];
};

UI/UX 특징

디자인 시스템

  • 색상 팔레트: 일관된 색상 체계
  • 타이포그래피: 가독성 높은 폰트 선택
  • 간격 시스템: 8px 기반의 일관된 간격
  • 애니메이션: 부드러운 전환 효과

사용자 경험

  • 직관적인 인터페이스: 학습 곡선 최소화
  • 키보드 단축키: 효율적인 작업 수행
  • 드래그 앤 드롭: 작업 순서 변경 (향후 구현 예정)
  • 접근성: 스크린 리더 지원

성능 최적화

  • React.memo: 불필요한 리렌더링 방지
  • useCallback: 함수 메모이제이션
  • 가상화: 대량 데이터 처리 시 성능 최적화
  • 코드 분할: 지연 로딩을 통한 초기 로딩 시간 단축

테스트

테스트 전략

  • 단위 테스트: 개별 컴포넌트 테스트
  • 통합 테스트: 컴포넌트 간 상호작용 테스트
  • E2E 테스트: 사용자 시나리오 테스트

테스트 도구

  • Jest: 테스트 프레임워크
  • React Testing Library: 컴포넌트 테스트
  • Cypress: E2E 테스트

배포 및 호스팅

  • Netlify: 정적 사이트 호스팅
  • GitHub Actions: CI/CD 파이프라인
  • 자동 배포: main 브랜치 푸시 시 자동 배포

학습 포인트

이 프로젝트를 통해 다음을 학습했습니다:

  • React Hooks를 활용한 상태 관리
  • 컴포넌트 설계 및 재사용성
  • 로컬 스토리지를 활용한 데이터 영속성
  • 반응형 웹 디자인 구현
  • 사용자 경험 최적화

향후 개선 계획

  • 백엔드 API 연동
  • 사용자 인증 시스템
  • 실시간 동기화 (WebSocket)
  • PWA 기능 추가
  • 오프라인 지원 강화