# API 채택하기

## 개요

API는 창의적인 웹 개발을 위한 무한한 가능성을 열어줍니다! 이 과제에서는 외부 API를 선택하여 실제 문제를 해결하거나 사용자에게 가치 있는 기능을 제공하는 브라우저 확장 프로그램을 만들어 보세요.

## 지침

### 1단계: API 선택
이 엄선된 [무료 공개 API 목록](https://github.com/public-apis/public-apis)에서 API를 선택하세요. 다음 카테고리를 고려해 보세요:

**초보자에게 인기 있는 옵션:**
- **엔터테인먼트**: 무작위 강아지 사진을 위한 [Dog CEO API](https://dog.ceo/dog-api/)
- **날씨**: 현재 날씨 데이터를 위한 [OpenWeatherMap](https://openweathermap.org/api)
- **명언**: 영감을 주는 명언을 위한 [Quotable API](https://quotable.io/)
- **뉴스**: 최신 헤드라인을 위한 [NewsAPI](https://newsapi.org/)
- **재미있는 사실**: 흥미로운 숫자 사실을 위한 [Numbers API](http://numbersapi.com/)

### 2단계: 확장 프로그램 계획
코딩 전에 다음 계획 질문에 답하세요:
- 확장 프로그램이 해결하는 문제는 무엇인가요?
- 대상 사용자는 누구인가요?
- 로컬 스토리지에 어떤 데이터를 저장할 것인가요?
- API 실패 또는 요율 제한을 어떻게 처리할 것인가요?

### 3단계: 확장 프로그램 제작
확장 프로그램에는 다음이 포함되어야 합니다:

**필수 기능:**
- 필요한 API 매개변수를 위한 폼 입력
- 적절한 오류 처리를 포함한 API 통합
- 사용자 환경 설정 또는 API 키를 위한 로컬 스토리지
- 깔끔하고 반응형 사용자 인터페이스
- 로딩 상태 및 사용자 피드백

**코드 요구사항:**
- 최신 JavaScript (ES6+) 기능 사용
- API 호출에 async/await 구현
- try/catch 블록을 통한 적절한 오류 처리 포함
- 코드 설명을 위한 의미 있는 주석 추가
- 일관된 코드 형식 준수

### 4단계: 테스트 및 다듬기
- 다양한 입력으로 확장 프로그램을 테스트하세요
- 엣지 케이스 처리 (인터넷 없음, 잘못된 API 응답 등)
- 브라우저 재시작 후에도 작동하는지 확인
- 사용자 친화적인 오류 메시지 추가

## 추가 도전 과제

확장 프로그램을 한 단계 업그레이드해 보세요:
- 더 풍부한 기능을 위한 다중 API 엔드포인트 추가
- API 호출을 줄이기 위한 데이터 캐싱 구현
- 자주 사용하는 작업을 위한 키보드 단축키 만들기
- 데이터 내보내기/가져오기 기능 추가
- 사용자 맞춤 설정 옵션 구현

## 제출 요구사항

1. 선택한 API와 성공적으로 통합된 **작동하는 브라우저 확장 프로그램**
2. **설명서(README 파일)**:
   - 어떤 API를 선택했는지 및 그 이유
   - 확장 프로그램 설치 및 사용 방법
   - 필요한 API 키 또는 설정
   - 확장 프로그램 작동 화면 스크린샷
3. 현대적인 JavaScript 관행을 따르는 **깔끔하고 주석이 포함된 코드**

## 평가 기준

| 기준 | 우수(90-100%) | 적합(80-89%) | 발전 중(70-79%) | 초보(60-69%) |
|----------|---------------------|---------------------|---------------------|--------------------|
| **API 통합** | 완벽한 API 통합과 포괄적인 오류 처리 및 엣지 케이스 관리 | 기본 오류 처리를 포함한 성공적인 API 통합 | API는 작동하지만 제한된 오류 처리 | API 통합에 심각한 문제 있음 |
| **코드 품질** | 모범 사례를 따르는 깔끔하고 잘 주석 처리된 최신 JavaScript 코드 | 적절한 주석과 좋은 코드 구조 | 작동하지만 더 나은 조직 필요 | 주석이 거의 없는 저품질 코드 |
| **사용자 경험** | 뛰어난 로딩 상태 및 사용자 피드백을 갖춘 세련된 인터페이스 | 기본 사용자 피드백이 있는 좋은 인터페이스 | 적절하게 작동하는 기본 인터페이스 | 혼란스러운 인터페이스로 불량한 사용자 경험 |
| **로컬 스토리지** | 데이터 검증 및 관리를 포함한 정교한 로컬 스토리지 사용 | 주요 기능을 위한 적절한 로컬 스토리지 구현 | 기본적인 로컬 스토리지 구현 | 로컬 스토리지 사용이 최소화되거나 부적절함 |
| **문서화** | 설치 지침과 스크린샷이 포함된 포괄적인 README | 대부분 요구사항을 충족하는 좋은 문서 | 일부 세부 정보가 누락된 기본 문서 | 문서가 없거나 부실함 |

## 시작 팁

1. **간단하게 시작**: 복잡한 인증이 필요 없는 API 선택
2. **문서 읽기**: 선택한 API의 엔드포인트와 응답을 철저히 이해
3. **UI 계획**: 코딩 전에 확장 프로그램 인터페이스 스케치
4. **자주 테스트**: 점진적으로 빌드하고 각 기능 추가 시 테스트
5. **오류 처리**: API 호출 실패 가능성을 항상 고려하고 계획

## 자료

- [브라우저 확장 프로그램 문서](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions)
- [Fetch API 가이드](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch)
- [로컬 스토리지 튜토리얼](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
- [JSON 파싱 및 처리](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)

유용하고 창의적인 무언가를 만들어 보세요! 🚀

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**면책 조항**:  
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다했으나, 자동 번역물에는 오류나 부정확성이 포함될 수 있음을 유의하시기 바랍니다. 원문 문서가 권위 있는 근거 자료로 간주되어야 합니다. 중요한 정보의 경우, 전문 인력에 의한 번역을 권장합니다. 본 번역 사용으로 인해 발생하는 오해나 해석상의 문제에 대해 당사는 책임을 지지 않습니다.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->