Firebase Studio로 날씨 앱 개발 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

JavaScript 프레임워크(React, NextJS)와 API 통합에 익숙한 개발자(중급 이상)

핵심 요약

• Firebase Studio와 OpenWeatherMap API를 활용한 날씨 앱 개발 과정 설명
• getWeather 함수를 통해 도시 ID 기반 날씨 데이터 가져오기 및 에러 처리 구현
• action.ts 파일에 포함된 모의 데이터(mock data)로 프로토타입 테스트 가능

섹션별 세부 요약

1. 앱 기능 정의

• Wireframe에 포함된 주요 기능
• 도시 이름 입력 필드
• 검색 버튼
• 기온, 습도, 풍속, 날씨 설명 표시 섹션
• 도시 미발견 시 에러 메시지 표시
• OpenWeatherMap API 사용을 위한 도시 ID 기반 요청 권장

2. 프로젝트 생성 및 파일 구조

• Firebase Studio로 1~2분 내 React, TypeScript, NextJS, Tailwind CSS 기반 프로젝트 생성
• action.ts 파일에 포함된 모의 날씨 데이터 예시

const mockWeatherData: { [key: string]: WeatherData } = {
  london: { temperature: 15.2, humidity: 72, ... },
  ...
};

3. API 통합 및 기능 구현

• OpenWeatherMap API 사용을 위한 환경 변수 설정
• process.env.OPENWEATHERMAP_API_KEY 사용
• getWeather 함수 수정 시 도시 ID 검색 및 API 요청 로직

1. src/app/city.list.json에서 도시 ID 검색
2. https://api.openweathermap.org/data/2.5/forecast?id={cityId} 요청
3. 에러 처리 포함 (타임아웃, 잘못된 응답 등)

4. 최종 결과 및 배포

• getWeather 함수 실행 후 실제 날씨 데이터 표시
• 모의 데이터 대신 실제 API 응답으로 앱 완성
• Firebase Studio에서 생성한 앱 배포 가능

결론

• OpenWeatherMap API 사용 시 도시 ID 기반 요청이 필수적
• getWeather 함수에서 타임아웃 처리(AbortController)와 에러 메시지 반환 구현 필수
• 모의 데이터(action.ts)는 프로토타입 단계에서 테스트 용도로 사용 후 실제 API로 교체해야 함