React 비동기 데이터

날씨 정보 앱 API 연동: 검색, 로딩, 실패 화면

날씨 앱은 API 호출 예제가 아니라 입력과 외부 실패를 다루는 작은 제품입니다. key 보관, 검색 조건, 단위 변환, 실패 화면을 함께 봅니다.

01

검색 조건과 debounce

API key, query debounce, unit conversion, empty city, network failure를 검색 흐름에 맞춰 나누고 의미 없는 요청을 먼저 줄입니다.

요청 수명 주기
02

요청 모듈과 key 보관

검색 입력은 query만 만들고, API module은 요청 URL과 응답 변환을 맡습니다. key는 환경 변수나 서버 proxy 위치를 기준으로 노출 범위를 확인합니다.

오류 처리
03

로딩·빈 도시·네트워크 오류

검색 중 spinner, 도시 없음, 401 key 오류, 네트워크 실패를 서로 다른 화면 문구로 보여야 사용자가 재검색할지 기다릴지 판단할 수 있습니다.

캐시 갱신
04

응답 샘플과 단위 확인

섭씨/화씨 변환, 지역명, 아이콘, 업데이트 시각을 응답 샘플과 함께 남기면 API 변경이 화면에 미치는 영향을 바로 볼 수 있습니다.

response sample
검색 입력
빈 도시명, 앞뒤 공백, 같은 도시 재검색을 요청 전에 처리한다 query 정리가 입력 컴포넌트 안에만 묻히면 API 모듈 테스트에서 같은 조건을 다시 만들기 어렵습니다.
query
API 요청
endpoint, key, 단위 옵션을 한 요청 함수에서 조립한다 요청 형식이 흩어지면 도시 검색, 즐겨찾기, 새로고침마다 서로 다른 API 호출을 만들게 됩니다.
endpoint
응답 표시
날씨 카드에는 장소, 온도, 단위, 갱신 시각이 함께 보인다 값이 비어 있을 때는 0도처럼 보이게 두지 말고 데이터 없음 상태를 분리해 표시합니다.
weather card

날씨 앱에서 꼭 재현할 장면

도시 검색 서울, London처럼 다른 언어의 도시명을 넣어도 로딩 후 장소명과 온도 단위가 명확히 표시됩니다.
요청 실패 네트워크 실패나 401 응답은 이전 날씨 카드를 덮어쓰지 않고 재시도 안내를 렌더링합니다.
보안과 단위 key 노출 여부와 섭씨/화씨 변환을 함께 확인해야 배포 뒤에도 같은 화면을 신뢰할 수 있습니다.

비동기 데이터 점검

질문: 검색어 하나가 어떤 요청 URL과 어떤 화면 상태로 바뀌는가
순서: query 정리 -> API 요청 함수 -> 로딩/오류/빈 상태 -> 날씨 카드와 단위 표시
위험: 실패 응답을 정상 데이터처럼 렌더링하면 사용자는 오래된 날씨를 최신 정보로 믿게 됩니다.