Weather API & data component

일자와 날씨 반영

오늘자 todolist 작업

1. 와이어 프레임 + 컴포넌트 나누기.

2.Data , Weather Component 만들기.

 

1. 와이어 프레임 + 컴포넌트 나누기.

와이어 프레임

전체 페이지는 App에 띄우고, 다른 컴포넌트들은 각자 할일을 작게 나누어 만들기로 했다.

나눈 컴포넌트들

App에 표시될 컴포넌트 외에는 List폴더에 따로 담아두었다.

어떻게 state와 props를 내려주어야 할지 헷갈릴것 같아서 부모자식간의 트리구조도 표현해봤다.

todo 트리구조

매일 반복할 일정을 띄울 DayLoop와 당일 일정후엔 리셋 될 TodoList는

AddList를 통해 사용자가 일정을 추가할때 토글버튼을 이용해 맞는 컴포넌트Prop으로 내려 줄 예정.

remove는 어디에 포함해야할지 잘모르겠어서 진행하다가 끼워넣을거 같은데 아마 addlist에 들어가지않을까...

 

2. Data , Weather Component 만들기.

<Data />

Data 컴포넌트 날짜를 표시해야해서 Date가 맞지만 그냥 넘어..갔...

함수형 컴포넌트를 만들어준뒤, 변수에 한국식 표기의 일정을 만들어 span태그에 담아 리턴(간단)

 

<Wheather />

API는 첨부한 곳의 Current Weather data를 사용했다.

https://openweathermap.org/current

Current weather data - OpenWeatherMap

fetch를 이용해 날씨앱의 URL데이터를 받아왔다.

api.openweathermap.org/data/2.5/
weather?lat={원하는곳의 경도}&lon={원하는곳의 위도}&appid={나의 API key}

const request = 'http://api.openweathermap.org/data/2.5/weather?lat=37&lon=127&appid={API key}'
const temp = fetch(request) 
  .then((response) => response.json())  //응답을 JSON 형태로 변환시켜서 다음 Promise로 전달
  .then((result) =>  {  
  //전달받은 promise객체의 키를 찾아들어가서 원하는 temp조회
    const kelbinTemp = result.main.temp;
 //온도가 kelbin?식으로 나와서 섭씨로 변경한뒤 소수점 뒤의 한 자리만 남겨줌.    
    setWeather((kelbinTemp-273.15).toFixed(1));
 //날씨 API에서 icon을 지원함 키weather의 0번째 랭스의 icon을 usestate에 넘겨줌.   
    setIcon(result.weather[0].icon)
  });

이후 리턴문 안에서 태그안에 중괄호를 이용해 state로 넣어주었고 

icon은 URL로 이용가능해서 백틱을 이용해 icon state를 적용해주었다.

error컨트롤도 적어놨었지만, 일단은 지웟다 (어떻게 써야할지 아직모르겠다..)

 

<App />

App에 띄워준 모습

app에 띄우고 css를 사용하여 조금 만졌다.

 

컴포넌트 단위 개발이 유지보수면에서 편하다는 말을 좀더 체감할 수 있었고,

진짜 리액트 손도 못댓는데 하다보면 되는구나 하는 생각이 들었고,

날씨 부분이 생소해서 시간이 많이 걸렸다.

그래도 어려워하던 Fetch, State, API적용을 모두 해볼 수 있어서 많은 공부가 되었다.

 

내일은 AddList 적용하자.