Next.js Todo App - 실습용 보일러플레이트

Next.js 16, React 19, TypeScript를 활용한 Todo 앱 실습 프로젝트입니다.

시작하기

1. 의존성 설치

npm install

2. 개발 서버 실행

npm run dev

브라우저에서 http://localhost:3000을 열어 확인하세요.

프로젝트 구조

src/
├── actions/
│   └── todo.ts          # 서버 액션 (CRUD 로직 구현 필요)
├── app/
│   ├── layout.tsx       # 루트 레이아웃
│   ├── page.tsx         # 홈 페이지
│   ├── globals.css      # 전역 스타일
│   └── stats/
│       └── page.tsx     # 통계 페이지 (통계 로직 구현 필요)
├── components/
│   ├── Header.tsx       # 네비게이션 헤더
│   ├── TodoForm.tsx     # Todo 입력 폼
│   ├── TodoList.tsx     # Todo 목록 (정렬 로직 구현 필요)
│   └── TodoItem.tsx     # 개별 Todo 아이템
├── data/
│   └── todos.json       # 데이터 저장소
└── lib/
    ├── types.ts         # 타입 정의
    └── db.ts            # 데이터베이스 함수 (구현 필요)

실습 과제

1단계: 데이터 레이어 구현 (src/lib/db.ts)

• getTodos(): JSON 파일에서 todos 읽어오기
• saveTodos(): todos를 JSON 파일에 저장하기

2단계: 서버 액션 구현 (src/actions/todo.ts)

• addTodo(): 새 Todo 추가
• deleteTodo(): Todo 삭제
• toggleTodo(): 완료 상태 토글
• updateTodo(): 제목 수정

3단계: 통계 페이지 구현 (src/app/stats/page.tsx)

• 전체 할 일 개수 계산
• 완료/미완료 개수 계산
• 완료율 계산
• 최근 7일간 생성된 Todo 개수 계산

4단계: 목록 정렬 구현 (src/components/TodoList.tsx)

• 미완료 항목을 먼저 표시
• 같은 상태 내에서는 최신순 정렬

주요 개념

Server Components vs Client Components

• Server Components (기본값): 서버에서 렌더링, 데이터 페칭에 적합
  • TodoList.tsx, Header.tsx, page.tsx
• Client Components ('use client'): 클라이언트에서 렌더링, 상호작용에 필요
  • TodoForm.tsx, TodoItem.tsx

Server Actions

'use server' 지시어를 사용하여 서버에서 실행되는 비동기 함수를 정의합니다.

'use server';

export async function addTodo(formData: FormData) {
  // 서버에서 실행됨
}

캐시 무효화

데이터 변경 후 revalidatePath('/')를 호출하여 페이지를 새로고침합니다.

참고 자료

• Next.js 공식 문서
• React 19 문서

완성본 참고

완성된 코드는 my-nextjs-project 폴더를 참고하세요.