[Angular 마스터하기] Day 20 - 실전 프로젝트, Todo 앱 완성하기

이제와서 시작하는 Angular 마스터하기 - Day 20 “지금까지 배운 모든 것을 활용하여 완전한 앱을 만들어봅시다! 🎉”

오늘 배울 내용

• 지금까지 배운 내용 총정리
• 완전한 Todo 앱 구현
• CRUD 기능
• LocalStorage 영속성
• 배포까지 완료

---

1. 프로젝트 구조

앞에서 배운 standalone 컴포넌트, signal·computed, 서비스 주입과 ngModel을 합치는 실습입니다. 파일을 모두 만든 뒤 브라우저에서 실행하는 기존 Angular 프로젝트에 연결하세요. 여기서는 서버 API나 계정별 동기화 없이 현재 브라우저의 localStorage에 저장합니다.

todo-app/
├── src/
│   ├── app/
│   │   ├── models/
│   │   │   └── todo.model.ts
│   │   ├── services/
│   │   │   └── todo.service.ts
│   │   ├── components/
│   │   │   ├── todo-list/
│   │   │   ├── todo-item/
│   │   │   └── todo-form/
│   │   └── app.component.ts

---

2. Todo 모델

// models/todo.model.ts
export interface Todo {
  id: number;
  text: string;
  completed: boolean;
  priority: 'low' | 'medium' | 'high';
  createdAt: Date;
}

---

3. Todo 서비스

먼저 비공개 todos와 읽기용 allTodos를 보고, 추가·토글·삭제 메서드 끝의 saveToStorage()를 찾으세요. 저장은 각 메서드가 직접 호출하며, 이 코드에는 effect()가 없습니다. 생성자는 저장된 JSON을 다시 Signal에 넣습니다.

JSON.parse() 오류 처리와 날짜 객체 복원은 생략되어 있습니다. 저장된 createdAt은 다시 읽으면 문자열이 되므로, 모델에 Date라고 선언된 것만으로 런타임의 날짜 객체까지 복구되지는 않습니다.

// services/todo.service.ts
import { Injectable, signal, computed } from '@angular/core';
import { Todo } from '../models/todo.model';

@Injectable({ providedIn: 'root' })
export class TodoService {
  private todos = signal<Todo[]>([]);

  allTodos = this.todos.asReadonly();
  activeTodos = computed(() => this.todos().filter(t => !t.completed));
  completedTodos = computed(() => this.todos().filter(t => t.completed));

  constructor() {
    this.loadFromStorage();
  }

  addTodo(text: string, priority: Todo['priority'] = 'medium') {
    const todo: Todo = {
      id: Date.now(),
      text,
      completed: false,
      priority,
      createdAt: new Date()
    };

    this.todos.update(todos => [...todos, todo]);
    this.saveToStorage();
  }

  toggleTodo(id: number) {
    this.todos.update(todos =>
      todos.map(t => t.id === id ? { ...t, completed: !t.completed } : t)
    );
    this.saveToStorage();
  }

  deleteTodo(id: number) {
    this.todos.update(todos => todos.filter(t => t.id !== id));
    this.saveToStorage();
  }

  private saveToStorage() {
    localStorage.setItem('todos', JSON.stringify(this.todos()));
  }

  private loadFromStorage() {
    const saved = localStorage.getItem('todos');
    if (saved) {
      this.todos.set(JSON.parse(saved));
    }
  }
}

---

4. App 컴포넌트

긴 코드에서는 아래쪽 클래스의 filter와 filteredTodos를 먼저 보고 템플릿의 필터 버튼·반복문을 연결하세요. 할 일 두 개를 추가하고 하나를 완료한 뒤, 진행 중/완료 필터가 서로 다른 한 개씩을 보여주는지 확인합니다. 새로고침 후에도 두 항목과 완료 표시가 남으면 저장·복원 흐름까지 확인한 것입니다. 가운데 스타일은 이 상태 흐름과 독립적으로 읽어도 됩니다.

import { Component, inject, signal } from '@angular/core';
import { TodoService } from './services/todo.service';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="todo-app">
      <header>
        <h1>📝 Todo App</h1>
        <p class="stats">
          전체: {{ todoService.allTodos().length }} |
          진행: {{ todoService.activeTodos().length }} |
          완료: {{ todoService.completedTodos().length }}
        </p>
      </header>

      <div class="input-section">
        <input
          [(ngModel)]="newTodoText"
          (keyup.enter)="addTodo()"
          placeholder="할 일을 입력하세요...">

        <select [(ngModel)]="newTodoPriority">
          <option value="low">낮음</option>
          <option value="medium">보통</option>
          <option value="high">높음</option>
        </select>

        <button (click)="addTodo()">추가</button>
      </div>

      <div class="filter-buttons">
        <button
          (click)="filter.set('all')"
          [class.active]="filter() === 'all'">
          전체
        </button>
        <button
          (click)="filter.set('active')"
          [class.active]="filter() === 'active'">
          진행 중
        </button>
        <button
          (click)="filter.set('completed')"
          [class.active]="filter() === 'completed'">
          완료
        </button>
      </div>

      <div class="todo-list">
        @for (todo of filteredTodos(); track todo.id) {
          <div class="todo-item" [class.completed]="todo.completed">
            <input
              type="checkbox"
              [checked]="todo.completed"
              (change)="todoService.toggleTodo(todo.id)">

            <span class="text">{{ todo.text }}</span>

            <span class="priority" [class]="'priority-' + todo.priority">
              {{ todo.priority }}
            </span>

            <button (click)="todoService.deleteTodo(todo.id)">🗑️</button>
          </div>
        }
      </div>
    </div>
  `,

  styles: [`
    .todo-app {
      max-width: 600px;
      margin: 50px auto;
      padding: 30px;
      background: white;
      border-radius: 20px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    }

    header {
      text-align: center;
      margin-bottom: 30px;
    }

    h1 {
      margin: 0;
      color: #333;
    }

    .stats {
      color: #666;
      margin-top: 10px;
    }

    .input-section {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    input[type="text"] {
      flex: 1;
      padding: 12px;
      border: 2px solid #ddd;
      border-radius: 8px;
      font-size: 1em;
    }

    select, button {
      padding: 12px 20px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-weight: bold;
    }

    select {
      border: 2px solid #ddd;
    }

    button {
      background: #667eea;
      color: white;
    }

    .filter-buttons {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    .filter-buttons button {
      flex: 1;
      background: #f5f5f5;
      color: #333;
    }

    .filter-buttons button.active {
      background: #667eea;
      color: white;
    }

    .todo-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px;
      background: #f9f9f9;
      border-radius: 8px;
      margin-bottom: 8px;
    }

    .todo-item.completed .text {
      text-decoration: line-through;
      opacity: 0.6;
    }

    .text {
      flex: 1;
    }

    .priority {
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.8em;
    }

    .priority-high {
      background: #ffebee;
      color: #f44336;
    }

    .priority-medium {
      background: #fff3e0;
      color: #ff9800;
    }

    .priority-low {
      background: #e8f5e9;
      color: #4CAF50;
    }
  `]
})
export class AppComponent {
  todoService = inject(TodoService);

  newTodoText = '';
  newTodoPriority: 'low' | 'medium' | 'high' = 'medium';
  filter = signal<'all' | 'active' | 'completed'>('all');

  filteredTodos = computed(() => {
    switch (this.filter()) {
      case 'active':
        return this.todoService.activeTodos();
      case 'completed':
        return this.todoService.completedTodos();
      default:
        return this.todoService.allTodos();
    }
  });

  addTodo() {
    if (this.newTodoText.trim()) {
      this.todoService.addTodo(this.newTodoText, this.newTodoPriority);
      this.newTodoText = '';
    }
  }
}

---

🎉 축하합니다!

완성한 기능들

• ✅ Todo CRUD (생성, 읽기, 수정, 삭제)
• ✅ 우선순위 설정
• ✅ 필터링 (전체/진행/완료)
• ✅ LocalStorage 영속성
• ✅ 통계 표시
• ✅ 반응형 디자인

사용한 개념들

20일 동안 배운 모든 것을 사용했습니다:

1. Component - 재사용 가능한 UI
2. Signal - 반응형 상태 관리
3. Service - 비즈니스 로직 분리
4. Computed - 자동 계산
5. LocalStorage - 추가·토글·삭제 메서드에서 직접 저장
6. Forms - 사용자 입력
7. Directive - 조건부 렌더링

---

📝 전체 시리즈 정리

Phase 1: 기초 다지기 (Day 1-5)

• ✅ Angular 소개 및 환경 설정
• ✅ 컴포넌트 기초
• ✅ 템플릿 문법
• ✅ 이벤트 처리
• ✅ 조건과 반복

Phase 2: 핵심 개념 (Day 6-10)

• ✅ Signal 상태 관리
• ✅ 컴포넌트 간 통신
• ✅ 서비스와 의존성 주입
• ✅ 라우팅
• ✅ HTTP 통신

Phase 3: 실전 활용 (Day 11-15)

• ✅ 폼 다루기
• ✅ Reactive Forms
• ✅ 파이프
• ✅ 생명주기
• ✅ 에러 처리

Phase 4: 고급 & 프로젝트 (Day 16-20)

• ✅ Signal 고급
• ✅ 성능 최적화
• ✅ 테스팅
• ✅ 배포
• ✅ 실전 프로젝트

---

🚀 다음 단계

이제 여러분은 Angular 개발자입니다! 🎉

추가 학습 자료

1. 공식 문서: angular.dev
2. RxJS: 고급 반응형 프로그래밍
3. NgRx: 상태 관리 라이브러리
4. Angular Material: UI 컴포넌트 라이브러리
5. NestJS: Backend with TypeScript

실전 프로젝트 아이디어

• 📝 블로그 플랫폼
• 🛒 쇼핑몰
• 📊 대시보드
• 💬 채팅 앱
• 🎮 게임

---

💬 마무리 인사

“늦었다고 생각할 때가 가장 빠른 때입니다.”

20일간의 여정을 완주하신 여러분, 정말 축하합니다! 🎊

Angular는 처음엔 어려워 보이지만, 하나씩 배우다 보면 어느새 멋진 앱을 만들 수 있게 됩니다.

이제 시작입니다. 계속해서 성장하세요! 💪

---

감사합니다!

“이제와서 시작하는 Angular 마스터하기” 시리즈를 읽어주셔서 감사합니다. 여러분의 Angular 여정에 도움이 되었기를 바랍니다! 🚀