Skip to content

A website that informs the weather using public api, react and redux-middleware

Notifications You must be signed in to change notification settings

BadaHertz52/weather_react

Repository files navigation

Weather

⛅ weather 사이트 바로가기


Index


1. Introduce

1) weather 소개

weather 는 kakao local REST API와 공공 데이터 포털에서 제공받은 데이터를 통해 사용자에게 사용자의 현재 위치에 따른 국내의 날씨 정보를 알려주는 날씨 정보 사이트입니다. 사용자는 현재의 자신의 위치에 따른 현 시점의 날씨, 앞으로 3일 이내의 시간별 날씨, 일출 일몰 시각을 제공받을 수 있습니다. 웹프론트, 웹디자인으로 네이버 날씨를 참고해 만들었습니다.

✨프로젝트 목적

  • CORS 정책을 준수하며 외부에서 제공하는 데이터를 REST FUL하게 받아오기
  • redux-toolkit , redux-middleware인 thunk 와 saga 의 차이점을 경험해보고 각각의 장단점과 언제 사용해야하는지 생각해보기
  • Github의 action 와 Secret를 사용해 API key 를 깃헙에 올리지 않고도 사용할 수 있게 하기
  • table,th,td,tr의 태그 사용에 익숙해지기
  • 시간별 날씨를 그래프로 표현해보기
  • Node.js를 사용해 서버를 만들고 React와 연동하기
  • Node 서버에서 외부 API에서 데이터를 Node 서버에서 받아서 프론트에 넘기기

2.Tech skill & API

Tech skill

  • js , typescript
  • scss
  • react
  • styled-components
  • react-icon
  • redux ,redux-toolkit
  • redux-saga
  • redux-thunk
  • chart.js
  • node.js , express

API


3. Getting Start

npm i

4. Layout and Operate

Loading and Main

web browser

mobile browser

Failure

데이터 불러오는 것 실패시 사 나타나는 화면

show how weather site work


5.Description

1) Structure

A. Server

server.js

B. Client

a. Modules

  src/modules
    - position
          -index
          -reducer
          -saga
          -thunk
          -toolkit
          -types
    - weather
          -index
          -reducer
          -saga
          -thunk
          -toolkit
          -types

b. 주요 컴포넌트

name description
Hourly 오늘로부터 3일간의 시간별 날씨 정보를 보여줌
Location 사용자의 위치정보를 찾고, 이를 보여줌
Loading 위치 정보와 날씨 정보를 불어올 때 화면에 나타나 현재 진행상황을 표시
None 날씨 정보가 없을 때 정보가 없음을 알려줌
Now 현재 사용자가 있는 장소의 실시간 날씨 정보를 알려줌
ScrollBtn 터치나 마우스로 스크롤이 가능한 요소를 왼쪽이나 오른쪽으로 넘겨주는 버튼
SkyIcon 하늘 상태를 아이콘을 표시
Sun 한국의 일출,일몰 시각을 표시
Week 사용자의 현재 위치에서 일주일 간의 날씨 정보를 알려줌

2) State

  rootState
    -position
    -weather
  • position state type

    type PositionState = {
      state: DataState;
      error: Error | null;
      longitude: string | null;
      latitude: string | null;
      sfGrid: SFGridItem | null;
    };
  • weather state type

    type WeatherState = {
      state: DataState;
      error: Error | null;
      nowWeather: NowWeather | null;
      tomorrowWeather: TomorrowWeather | null;
      threeDay: DailyWeather[] | null;
      week: Day[] | null;
      sunRiseAndSet: (SunRiseAndSet | Error)[] | null;
    };

3) Dispatch and Function

buttons that dispatch position action and weather action

  • redux-toolkit, redux-thunk ,redux-saga를 사용한 함수
position weather
toolkit toolkitPosition toolkitWeather
thunk getPositionThunk getWeatherThunk
saga getPositionSaga, positionSaga getWeatherSaga, weatherSaga

사용자가 선택한 버튼에 따라 redux-toolkit, redux-thunk, redux-saga 를 사용해 정의한 각각의 함수에서 action을 dispatch 한다.


6. Other

1) 프로젝트 진행하면서 배운 것들

2) 자료

About

A website that informs the weather using public api, react and redux-middleware

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages