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

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

오늘 배울 내용

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

---

1. 프로젝트 구조

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 서비스

// 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 컴포넌트

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. Effect - 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 여정에 도움이 되었기를 바랍니다! 🚀