Weather Map Project(Side Project)

프로젝트 개요

이 프로젝트는 기상청 API를 사용하여 날씨 데이터를 가져오고, Leaflet을 이용하여 지도의 특정 위치에 날씨 정보를 표시하는 웹 애플리케이션입니다. 클라이언트는 React를 사용하여 인터페이스를 구현하고, 서버는 Node.js와 Express를 사용하여 API 요청을 처리합니다.

목표

• 기상청 API를 통해 특정 지역의 날씨 데이터를 실시간으로 가져온다.
• Leaflet을 사용하여 지도에 날씨 정보를 시각적으로 표시한다.
• 사용자가 지도의 특정 위치를 선택하면 해당 위치의 날씨 정보를 표시한다.
• 서버와 클라이언트 간의 데이터 통신을 원활하게 처리한다.

개발 기간

• 개발 기간 : 14일(시간 날떄 틈틈히)

주요 기능

• 기상청 API를 통해 날씨 데이터 조회
• Leaflet을 사용하여 지도에 날씨 정보를 표시
• 서버와 클라이언트 간의 데이터 통신

기술 스택

• 프론트엔드: React, Leaflet
• 백엔드: Node.js, Express, Axios
• API: 기상청 OpenAPI

설치 및 실행

1. 서버 설치 및 실행

1. 서버 디렉토리로 이동:

   cd server

2. 의존성 설치: npm install
3. .env 파일 설정: SERVICE_KEY=YOUR_DECODED_SERVICE_KEY (디코딩, 인코딩 경우 encodeURIComponent 기입)
4. 서버실행: npm start

API 사용법

서버는 기상청 API로부터 날씨 데이터를 가져와 클라이언트에 제공합니다. 클라이언트는 /weather 엔드포인트를 통해 날씨 데이터를 요청할 수 있습니다.

요청 예시

• URL: http://localhost:3000/weather
• 방법: GET
• 응답 형식: JSON

개발 및 배포

개발

• 개발 X 로컬로 이용

배포

• 배포 X 로컬로 이용