- 최재완 (팀장) - 주간 날씨 구현, css, 확장프로그램 모듈 개발, 라우팅
- 김민상 (팀원) - Spring / React 인증관련 구현 , 재난 및 날씨 뉴스페이지 구현, 즐겨찾기 CR 구현
- 장주찬 (팀원) - 통합 대기 페이지 구현, 모달 및 차트 구현, CSS 구현
- 이영재 (팀원) - 메인페이지 구현, 차트 구현, CSS 구현
Installation
cd weather-app
npm install
Backend
cd backendResource
java -jar weather_WEB-1.0-SNAPSHOT.jar
Frontend
npm start
이 프로젝트는 사용자가 현재 위치를 기반으로 한 시간대별 오늘의 날씨, 주간 예보, 대기 상태 정보, 실시간 뉴스 등을 쉽게 확인할 수 있는 웹페이지를 제작하였습니다.
이를 통해 사용자는 언제 어디서든 필요한 날씨 정보를 실시간으로 확인할 수 있습니다.
- Spring에서 인메모리 방식과 세션 인증 방식을 사용하여 서버 측 인증을 구현하였습니다. React에서는 Redux를 사용하여 클라이언트 측에서의 사용자 상태 관리를 구현하였습니다. 이를 통해 사용자는 개인화된 서비스를 받을 수 있습니다.
- 단기 예보 API를 활용하여 실시간 날씨 정보를 제공합니다. 메인페이지에서는 주요 도시들의 현재 날씨를 한 눈에 확인할 수 있으며, 시간별 예보 그래프를 통해 날씨 변화를 미리 파악할 수 있습니다. 또한 강수량, 바람세기, 하늘상태 등의 다양한 정보를 제공하여 사용자가 보다 상세한 날씨 정보를 얻을 수 있습니다.
- 사용자가 원하는 도시를 검색해 최대, 최저 기온과 강수확률, 하늘 상태 등의 정보를 확인할 수 있습니다. 로그인을 진행하여 저장을 할 경우 웹페이지 재방문 시 검색 없이 저장된 도시의 정보를 확인할 수 있습니다. 이를 통해 사용자는 자신이 관심 있는 도시의 날씨 변화를 쉽게 파악하고, 그에 따른 계획을 세울 수 있습니다.
- 전국의 대기 오염 실황 정보와 사용자가 거주하는 지역의 미세먼지, 초미세먼지, 황사, 오존 등의 데이터를 다양한 차트 형식으로 표현해 페이지에 제공합니다.
- 각 지역별 재난 특보에 대한 정보를 제공합니다. 또한 유튜브 API를 이용해 일기예보가 보도된 지상파 유튜브 링크를 불러와 날씨에 대한 정보를 얻을 수 있으며 네이버news api를 활용해 날씨 키워드가 들어간 최근 뉴스들을 볼 수가 있습니다.
- 페이지 상단에는 재난문자API를 활용하여 5초마다 다음 재난문자로 자동으로 넘어갈 수 있게 하여 재난 문자 내용을 보여줍니다.
- API를 이용해 얻어온 실시간 날씨 데이터 및 주간 날씨 데이터를 크롬 확장 프로그램을 이용해 크롬 내 어느 웹페이지에서도 확인할 수 있습니다. 현재 시간을 기준으로 가장 최근에 보도된 인터넷 기사를 불러와 페이지 상단에 위치시켜 예보에 대한 정보를 제공합니다.
- 메인 페이지
실시간 날씨 정보 제공
시간별 기온 제공
기온 외 다양한 정보 제공
- 주간 예보 페이지
주간 예보 제공
도시 검색 기능
즐겨찾기 기능
- 대기 오염 페이지
전국 대기 오염 정보 제공
현재 위치 오염 정보 제공
시간대 및 주간별 정보 제공
- 실시간 뉴스 페이지
재난 특보 소식 제공
일기예보 유튜브 제공
다양한 뉴스 소식 정보 제공
- 확장 프로그램
📦src
┣ 📂components
┃ ┣ 📂airPollution
┃ ┃ ┣ 📜AirMain.js
┃ ┃ ┣ 📜AirQualityModal.js
┃ ┃ ┣ 📜api2.js
┃ ┃ ┣ 📜Chart.js
┃ ┃ ┣ 📜Chart2.js
┃ ┃ ┣ 📜cities.js
┃ ┃ ┣ 📜FineDustModal.js
┃ ┃ ┣ 📜Forecast.js
┃ ┃ ┣ 📜OzoneModal.js
┃ ┃ ┣ 📜SulfurModal.js
┃ ┃ ┣ 📜UltraFineDustModal.js
┃ ┃ ┗ 📜Weather.js
┃ ┣ 📂auth
┃ ┃ ┣ 📜AuthForm.js
┃ ┃ ┣ 📜AuthTemplate.js
┃ ┃ ┣ 📜LoginPage.js
┃ ┃ ┗ 📜RegisterPage.js
┃ ┣ 📂common
┃ ┃ ┗ 📜Button.js
┃ ┣ 📂exponsion
┃ ┃ ┣ 📜ex-current.js
┃ ┃ ┣ 📜ex-dust-item.js
┃ ┃ ┣ 📜ex-dust.js
┃ ┃ ┣ 📜ex-today-item.js
┃ ┃ ┣ 📜ex-today.js
┃ ┃ ┣ 📜ex-week-item.js
┃ ┃ ┣ 📜ex-week.js
┃ ┃ ┗ 📜expension.js
┃ ┣ 📂Main
┃ ┃ ┣ 📜DateTime.js
┃ ┃ ┣ 📜MainChart.js
┃ ┃ ┣ 📜MainPage.js
┃ ┃ ┗ 📜Weather.js
┃ ┣ 📂news
┃ ┃ ┣ 📜DisasterMsgList.js
┃ ┃ ┣ 📜NewsItem.js
┃ ┃ ┣ 📜NewsList.js
┃ ┃ ┣ 📜NewsMain.js
┃ ┃ ┗ 📜YoutubeVideo.js
┃ ┣ 📂Sidebar
┃ ┃ ┗ 📜Sidebar.js
┃ ┣ 📂week
┃ ┃ ┣ 📜favorate-week.js
┃ ┃ ┣ 📜LocationSearchInput.js
┃ ┃ ┣ 📜week-item.js
┃ ┃ ┣ 📜week-page.js
┃ ┃ ┗ 📜week.js
┃ ┣ 📜article.js
┃ ┗ 📜container.js
┣ 📂containers
┃ ┣ 📂auth
┃ ┃ ┣ 📜LoginForm.js
┃ ┃ ┗ 📜RegisterForm.js
┃ ┗ 📂common
┃ ┃ ┗ 📜HeaderContainer.js
┣ 📂css
┃ ┣ 📂airPollution
┃ ┃ ┣ 📜airMain.css
┃ ┃ ┣ 📜Forecast.css
┃ ┃ ┣ 📜Modal.css
┃ ┃ ┣ 📜Pollution.css
┃ ┃ ┗ 📜Weather.css
┃ ┣ 📂expension
┃ ┃ ┣ 📜ex-today.css
┃ ┃ ┣ 📜ex-week-item.css
┃ ┃ ┣ 📜ex-week.css
┃ ┃ ┣ 📜expension.css
┃ ┃ ┗ 📜expention-dust.css
┃ ┣ 📂header
┃ ┃ ┗ 📜DateTime.css
┃ ┣ 📂Main
┃ ┃ ┗ 📜Weather.css
┃ ┣ 📂news
┃ ┃ ┣ 📜Animation.css
┃ ┃ ┣ 📜NewsItem.css
┃ ┃ ┣ 📜NewsList.css
┃ ┃ ┗ 📜NewsMain.css
┃ ┣ 📂Sidebar
┃ ┃ ┗ 📜Sidebar.css
┃ ┣ 📂week
┃ ┃ ┣ 📜favorate-week.css
┃ ┃ ┣ 📜location-search-input.css
┃ ┃ ┣ 📜weather-item.css
┃ ┃ ┗ 📜week.css
┃ ┣ 📜App.css
┃ ┣ 📜index.css
┃ ┗ 📜reset.css
┣ 📂hooks
┃ ┣ 📜useCurrentDust.js
┃ ┣ 📜useCurrentLocation.js
┃ ┣ 📜useTodayWeather.js
┃ ┣ 📜useWeekCloud.js
┃ ┗ 📜useWeekTemp.js
┣ 📂lib
┃ ┣ 📂api
┃ ┃ ┣ 📜auth.js
┃ ┃ ┗ 📜client.js
┃ ┣ 📂styles
┃ ┃ ┗ 📜palette.js
┃ ┗ 📜createRequestSaga.js
┣ 📂modules
┃ ┣ 📜auth.js
┃ ┣ 📜index.js
┃ ┣ 📜loading.js
┃ ┗ 📜user.js
┣ 📜App.js
┣ 📜index.js
┗ 📜setupProxy.js
- 개발 도구 : Visual Studio Code, Spring Boot, React
- 개발 언어 : HTML5, CSS3, JavaScript, Node.js