# 📝 Todo REST API Application

JSON Server를 사용하여 RESTful API를 구현한 Todo 관리 애플리케이션입니다. jQuery와 XMLHttpRequest를 활용하여 CRUD 기능을 제공합니다.

## ✨ 주요 기능

### 기본 CRUD 기능
- **📋 목록 조회**: 모든 Todo 항목을 테이블 형태로 표시
- **🔍 개별 조회**: ID를 입력하여 특정 Todo 항목 조회
- **➕ 항목 추가**: 새로운 Todo 항목 등록
- **✏️ 항목 수정**: 기존 Todo 항목의 내용 및 완료 상태 수정
- **🗑️ 항목 삭제**: Todo 항목 삭제

### 필터링 기능
- **✅ 완료된 항목만 보기**: completed가 true인 항목만 필터링
- **⏳ 미완료 항목만 보기**: completed가 false인 항목만 필터링

## 🛠️ 기술 스택

- **Frontend**: HTML5, CSS3, JavaScript (jQuery)
- **Backend**: JSON Server (RESTful API)
- **HTTP 통신**: XMLHttpRequest
- **데이터 형식**: JSON

## 📁 파일 구조

```
project/
├── ex.36.asyncprogramming2.html    # 메인 HTML 파일
├── ex.36.asyncprogramming2.js      # JavaScript 로직
├── todos.json                      # JSON 데이터 파일
└── README.md
```

## 🚀 실행 방법

### 1. JSON Server 설치 및 실행

```bash
# JSON Server 전역 설치
npm install -g json-server

# todos.json 파일 생성
echo '[
  {"id":1, "todo":"할일1", "completed":true},
  {"id":2, "todo":"할일2", "completed":false}
]' > todos.json

# JSON Server 실행 (포트 7777)
json-server --watch todos.json --port 7777
```

### 2. 애플리케이션 실행

1. `ex.36.asyncprogramming2.html` 파일을 웹 브라우저에서 엽니다
2. JSON Server가 `http://localhost:7777`에서 실행 중인지 확인합니다

## 📊 API 엔드포인트

| 메서드 | 엔드포인트 | 설명 |
|--------|------------|------|
| GET | `/todos` | 모든 Todo 목록 조회 |
| GET | `/todos/:id` | 특정 ID의 Todo 조회 |
| GET | `/todos?completed=true` | 완료된 Todo만 조회 |
| GET | `/todos?completed=false` | 미완료 Todo만 조회 |
| POST | `/todos` | 새 Todo 추가 |
| PUT | `/todos/:id` | 특정 Todo 수정 |
| DELETE | `/todos/:id` | 특정 Todo 삭제 |

## 🎯 사용 방법

### 1. Todo 목록 보기
- **"목록버튼"** 클릭하여 모든 Todo 항목을 테이블에 표시

### 2. 특정 Todo 조회
1. 번호 입력 필드에 원하는 ID 입력
2. **"입력 목록 보기"** 버튼 클릭

### 3. 새 Todo 등록
1. **번호 등록**: 고유한 ID 입력
2. **할 일 등록**: Todo 내용 입력  
3. **완료 여부**: true/false 선택
4. **"등록하기"** 버튼 클릭

### 4. Todo 수정
1. 테이블에서 원하는 항목의 내용을 직접 수정
2. 완료 상태를 드롭다운에서 변경
3. **"수정하기"** 버튼 클릭

### 5. Todo 삭제
- 테이블에서 원하는 항목의 **"삭제하기"** 버튼 클릭

### 6. 필터링
- **"완료 목록만 보기"**: 완료된 항목만 표시
- **"미완료 목록만 보기"**: 미완료 항목만 표시

## 💡 주요 특징

### 데이터 검증
- 빈 필드 체크로 필수 입력값 검증
- 중복 ID 방지 기능
- 존재하지 않는 ID 조회 시 알림

### 동적 UI 업데이트
- 테이블 내에서 직접 수정 가능한 입력 필드
- 실시간 데이터 반영
- 사용자 친화적인 알림 메시지

### RESTful API 패턴
- HTTP 메서드별 적절한 API 사용
- 쿼리 파라미터를 활용한 필터링
- JSON 데이터 포맷 활용

## 🔧 핵심 함수

### `datarow(responseArr)`
- 받은 데이터 배열을 기반으로 테이블 행 생성
- 각 행에 수정/삭제 버튼 이벤트 바인딩

### 이벤트 핸들러들
- **목록 조회**: `#listBtn` 클릭 이벤트
- **개별 조회**: `#numberBtn` 클릭 이벤트  
- **등록**: `#regiBtn` 클릭 이벤트
- **필터링**: `#falseComBtn`, `#trueComBtn` 클릭 이벤트

## 🐛 알려진 제한사항

- JSON Server가 실행 중이어야 정상 동작
- 브라우저의 CORS 정책에 따른 제한 가능
- ID는 숫자 타입으로 제한

## 🎓 학습 포인트

이 프로젝트는 다음과 같은 웹 개발 개념을 학습할 수 있습니다:
- RESTful API 설계 및 활용
- XMLHttpRequest를 통한 HTTP 통신
- jQuery를 이용한 DOM 조작
- JSON 데이터 처리
- 동적 이벤트 바인딩
- 사용자 입력 검증

## 📝 라이선스

이 프로젝트는 학습 목적으로 제작되었습니다.

---

**Happy Coding! 🚀**