React · Weather Project

외부 날씨 API 앱의 요청·표시 계약

날씨 앱은 외부 API를 호출하는 예제가 아니라, 위치 입력과 API 응답을 앱 모델로 바꾸고 실패·제한·갱신 시각을 사용자에게 설명하는 프로젝트다.

01

입력 선택

도시 검색과 현재 위치 사용 중 어떤 흐름을 제공할지 정한다.

02

요청 구성

검색어, 좌표, 단위, 언어를 API query로 변환하고 이전 요청을 취소한다.

03

응답 매핑

외부 API의 필드명을 컴포넌트 전역에 퍼뜨리지 않고 내부 모델로 바꾼다.

04

화면 표시

온도, 설명, 아이콘, 갱신 시각, 오류와 재시도 행동을 함께 제공한다.

Geolocation
현재 위치 브라우저 권한과 HTTPS 조건이 필요
거부 시 도시 검색 대체
City
검색 입력 빈 값, 오타, 중복 도시명을 처리
debounce 또는 제출 버튼
Units
표시 단위 섭씨·화씨 선택이 요청과 UI 모두에 반영
선호도 저장 가능
Rate limit
외부 제한 짧은 시간 반복 요청과 API 제한 오류 안내
API key 정책 확인

키 노출 · 모델 변환 · 권한 실패 점검

키 노출 브라우저에 노출 가능한 API key인지 정책을 확인한다.
모델 변환 컴포넌트가 외부 API 응답 구조에 직접 묶이지 않는다.
권한 실패 위치 권한 거부 후 다른 입력 방법이 남아 있다.
최신성 갱신 시각과 오래된 데이터 여부가 화면에 드러난다.