song-jiae / react-weather

날씨 앱

OpenWeatherMap API를 활용한 날씨 정보 앱

데모 사이트

프로젝트 데모 사이트 바로가기

프로젝트를 실제로 사용해보고 싶다면 위 링크를 방문하세요.

🌦 기능

• 실시간 날씨 정보: OpenWeatherMap API를 통해 현재 위치 또는 선택한 도시의 날씨 정보를 실시간으로 표시합니다.
• 다양한 배경 이미지: 날씨에 따라 다양한 배경 이미지로 앱이 자동으로 변경됩니다.
• 도시 선택 기능: 특정 도시 목록에서 원하는 도시를 선택하여 날씨를 확인할 수 있습니다.

🚀 설치 및 실행

1-1. 프로젝트를 클론합니다.

git clone https://github.com/song-jiae/weather-app.git

1-2. 프로젝트 폴더로 이동한 후 설치합니다.

cd weather-app
npm install

1-3. 앱을 실행합니다.

npm start

1-4. http://localhost:3000에서 앱을 확인

사용한 기술 및 라이브러리

React: UI 구성 및 상태 관리

OpenWeatherMap API: 날씨 정보 제공

react-spinners: 로딩 스피너 컴포넌트

CSS: 스타일링

🌈 사용한 컬러 팔레트

메인 색상: #3498db

부가 색상: #2ecc71, #f39c12, #e74c3c

🌍 사용 방법

앱을 실행하면 현재 위치의 날씨 정보가 자동으로 표시됩니다.
상단의 도시 버튼을 클릭하여 특정 도시의 날씨를 확인할 수 있습니다.