완전한 기능을 갖춘 할 일 목록 관리 웹 애플리케이션입니다. 현대적인 UI와 RESTful API로 구성되어 있습니다.
- ✨ 현대적이고 반응형 디자인
- 📱 모바일 친화적 레이아웃
- 🎨 아름다운 그라데이션 배경과 카드 기반 UI
- 🔔 실시간 토스트 알림
- ⚡ 즉각적인 사용자 피드백
- ➕ 새로운 할 일 추가 (제목, 설명)
- ✅ 할 일 완료 상태 토글
- ✏️ 할 일 수정 (모달 기반 편집)
- 🗑️ 할 일 삭제 (확인 대화상자 포함)
- 📊 실시간 통계 (전체, 진행중, 완료)
- 🔍 필터링 (전체, 진행중, 완료)
- 완전한 CRUD 작업 지원
- JSON 기반 통신
- 표준화된 응답 형식
- 에러 핸들링
- Health check 엔드포인트
- Node.js: 런타임 환경
- Express.js: 웹 프레임워크
- In-Memory Storage: 데이터 저장소 (개발용)
- Vanilla JavaScript: 순수 자바스크립트
- CSS3: 현대적인 스타일링
- HTML5: 시맨틱 마크업
- Fetch API: 비동기 HTTP 통신
dingco-ralph-wiggum/
├── server.js # Express 서버 및 API 엔드포인트
├── package.json # 프로젝트 의존성 및 스크립트
├── README.md # 프로젝트 문서
└── public/ # 웹 프론트엔드 파일
├── index.html # 메인 HTML 페이지
├── styles.css # CSS 스타일시트
└── app.js # 클라이언트 JavaScript
- Node.js (v12 이상)
- npm (Node.js와 함께 설치됨)
# 의존성 설치
npm install# 서버 시작
npm start
# 또는
node server.js서버가 시작되면 다음과 같이 접속할 수 있습니다:
- 웹 인터페이스: http://localhost:3000
- Health Check: http://localhost:3000/health
http://localhost:3000/api/todos
GET /api/todos응답 예시:
{
"success": true,
"data": [
{
"id": 1,
"title": "프론트엔드 개발",
"description": "React 컴포넌트 작성",
"completed": false,
"createdAt": "2026-01-10T03:19:57.847Z",
"updatedAt": "2026-01-10T03:19:57.847Z"
}
],
"count": 1
}GET /api/todos/:id응답 예시:
{
"success": true,
"data": {
"id": 1,
"title": "프론트엔드 개발",
"description": "React 컴포넌트 작성",
"completed": false,
"createdAt": "2026-01-10T03:19:57.847Z",
"updatedAt": "2026-01-10T03:19:57.847Z"
}
}POST /api/todos
Content-Type: application/json
{
"title": "프론트엔드 개발",
"description": "React 컴포넌트 작성",
"completed": false
}응답 예시:
{
"success": true,
"data": {
"id": 1,
"title": "프론트엔드 개발",
"description": "React 컴포넌트 작성",
"completed": false,
"createdAt": "2026-01-10T03:19:57.847Z",
"updatedAt": "2026-01-10T03:19:57.847Z"
},
"message": "Todo created successfully"
}PUT /api/todos/:id
Content-Type: application/json
{
"title": "프론트엔드 완성",
"description": "모든 컴포넌트 작성 완료",
"completed": true
}응답 예시:
{
"success": true,
"data": {
"id": 1,
"title": "프론트엔드 완성",
"description": "모든 컴포넌트 작성 완료",
"completed": true,
"createdAt": "2026-01-10T03:19:57.847Z",
"updatedAt": "2026-01-10T03:20:20.722Z"
},
"message": "Todo updated successfully"
}DELETE /api/todos/:id응답 예시:
{
"success": true,
"data": {
"id": 1,
"title": "프론트엔드 개발",
"description": "React 컴포넌트 작성",
"completed": false,
"createdAt": "2026-01-10T03:19:57.847Z",
"updatedAt": "2026-01-10T03:19:57.847Z"
},
"message": "Todo deleted successfully"
}GET /health응답 예시:
{
"success": true,
"message": "Todo API is running",
"timestamp": "2026-01-10T03:19:37.592Z"
}- 색상 테마: 보라색 그라데이션 배경
- 카드 기반 레이아웃: 깔끔한 섹션 구분
- 반응형 디자인: 모바일, 태블릿, 데스크톱 지원
- 애니메이션: 부드러운 전환 효과
- 토스트 알림: 작업 결과 실시간 피드백
- 직관적인 인터페이스: 쉬운 네비게이션
- 실시간 업데이트: 즉각적인 변경 반영
- 확인 대화상자: 중요한 작업 전 확인
- 로딩 상태: 비동기 작업 진행 표시
- 빈 상태 메시지: 할 일이 없을 때 안내
{
id: Number, // 고유 식별자
title: String, // 할 일 제목 (필수)
description: String, // 할 일 설명 (선택)
completed: Boolean, // 완료 상태
createdAt: String, // 생성 시간 (ISO 8601)
updatedAt: String // 수정 시간 (ISO 8601)
}- 400 Bad Request: 잘못된 요청 (예: 제목 누락)
- 404 Not Found: 리소스를 찾을 수 없음
- 500 Internal Server Error: 서버 오류
모든 API 응답은 다음 형식을 따릅니다:
{
"success": Boolean,
"data": Object | Array,
"message": String,
"count": Number
}# 할 일 생성
curl -X POST http://localhost:3000/api/todos \
-H "Content-Type: application/json" \
-d '{"title":"테스트","description":"테스트 할 일"}'
# 모든 할 일 조회
curl http://localhost:3000/api/todos
# 특정 할 일 조회
curl http://localhost:3000/api/todos/1
# 할 일 수정
curl -X PUT http://localhost:3000/api/todos/1 \
-H "Content-Type: application/json" \
-d '{"completed":true}'
# 할 일 삭제
curl -X DELETE http://localhost:3000/api/todos/1이 프로젝트는 Ralph Loop를 사용하여 자동화된 반복 개발 프로세스로 구축되었습니다.
Ralph Loop는 Claude Code의 자동화 기능으로, 작업이 완료될 때까지 동일한 프롬프트를 반복적으로 실행하는 시스템입니다. 이를 통해 복잡한 프로젝트를 단계적으로 구축하고 검증할 수 있습니다.
/ralph-loop "할 일 목록을 위한 REST API를 웹, 서버를 만든 다음에 서로 연동시킵니다.
내부 스펙은 알아서 만들어주세요. 완료되면 DONE을 출력합니다."
--max-iterations 50
--completion-promise "DONE"-
백엔드 구축
- Express.js 기반 REST API 서버 생성
- CRUD 엔드포인트 구현
- 에러 핸들링 및 미들웨어 설정
-
프론트엔드 구축
- HTML, CSS, JavaScript로 웹 인터페이스 구현
- 반응형 디자인 적용
- 실시간 UI 업데이트 로직 구현
-
웹-서버 연동
- Express 정적 파일 서빙 설정
- Fetch API를 통한 비동기 통신
- 데이터 동기화 구현
-
E2E 테스트 (Playwright MCP)
- 브라우저 자동화 테스트
- 전체 CRUD 작업 검증
- UI 상태 및 데이터 일관성 확인
-
완료 조건 달성
- 모든 기능 정상 작동 확인
- 테스트 100% 통과
- 문서화 완료
- "DONE" 출력으로 자동 종료
- ✅ 자동화된 반복 개발: 작업이 완료될 때까지 자동으로 진행
- ✅ 점진적 개선: 각 반복마다 이전 작업을 기반으로 개선
- ✅ 완료 조건 명확화: completion-promise로 명확한 종료 조건 설정
- ✅ 최대 반복 제한: max-iterations로 무한 루프 방지
- ✅ 컨텍스트 유지: 이전 작업 결과를 다음 반복에서 활용
Ralph Loop를 통해 다음이 자동으로 완료되었습니다:
- ✅ REST API 서버 구축
- ✅ 웹 프론트엔드 구축
- ✅ 웹-서버 완벽 연동
- ✅ Playwright MCP를 이용한 E2E 테스트
- ✅ 종합 문서화 (README, 통합 보고서, 테스트 보고서)
총 반복 횟수: 자동 최적화로 최소 반복으로 완료 테스트 결과: 8/8 통과 (100%) 최종 상태: 프로덕션 준비 완료
- 데이터베이스 통합 (MongoDB, PostgreSQL)
- 사용자 인증 및 권한 관리
- 할 일 카테고리 및 태그
- 검색 기능
- 정렬 옵션
- 우선순위 설정
- 마감일 관리
- 첨부파일 지원
- 협업 기능 (공유, 댓글)
- 알림 시스템
- PWA (Progressive Web App) 지원
- 다크 모드
ISC
프로젝트에 기여하고 싶으시다면 Pull Request를 보내주세요!
문제가 발생하거나 질문이 있으시면 이슈를 등록해주세요.
Made with ❤️ using Node.js and Express