Weather

⛅ weather 사이트 바로가기

---

Index

1. Introduce

2.Tech skill & Built with

3. Getting Start

4. Layout and View

5. Description

6.Other

---

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

• 공공 데이터 포털
• kakao local REST API

---

3. Getting Start

npm i

• 개발 환경에서 실행 방법

  npm run dev // 서버 실행
  

  http://localhost:5000/weather_react/ 이동

---

4. Layout and Operate

Loading and Main

web browser

mobile browser

Failure

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

---

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

• 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) 프로젝트 진행하면서 배운 것들

• 👩‍💻React(CRA) 개발 시 API Key 설정,보안 (width Github Actions ,Secrets)

• 👩‍💻redux-thunk 와 redux-saga

• 👩‍💻React 와 Node(express) 연동

• 👩‍💻React와 Node 연동 시 404error

• 👩‍💻Node.js 를 통한 mixed-content 오류 해결

• 👩‍💻weather 프로젝트 후기

2) 자료

• 파비콘 출처 icon by Icons8