React · Weather App

날씨 앱의 API 상태 모델

외부 API를 쓰는 날씨 앱은 fetch 예제에서 끝나지 않고, 위치 입력, 요청 제한, 단위 변환, 실패 화면을 함께 설계해야 완성도가 난다.

01

검색 입력

사용자가 도시를 입력하거나 위치 권한으로 좌표를 얻는다.

02

요청 구성

도시명 또는 좌표와 단위, 언어를 API query로 변환한다.

03

응답 매핑

외부 API 응답을 앱 내부 WeatherSummary 모델로 정리한다.

04

화면 분기

맑음 아이콘만이 아니라 로딩, 오류, 마지막 갱신 시각을 표시한다.

City search
텍스트 기반 조회 오타, 중복 도시명, 빈 입력을 검증
검색 버튼 또는 debounce
Geolocation
현재 위치 브라우저 권한과 HTTPS 조건이 필요
권한 거부 화면 준비
Units
섭씨·화씨 API query와 표시 단위를 함께 관리
저장된 선호도 가능
Rate limit
외부 API 제한 짧은 시간 반복 요청을 줄이고 오류를 안내
키 노출 정책 확인

API key · 응답 변환 · 권한 실패 점검

API key 프런트에 노출 가능한 키인지 서비스 정책을 확인한다.
응답 변환 외부 API 필드명을 컴포넌트 곳곳에서 직접 쓰지 않는다.
권한 실패 위치 권한 거부 시 도시 검색으로 이어진다.
갱신 시각 사용자가 데이터가 언제 조회됐는지 알 수 있다.