웹사이트 케이웨더의 현재, 오늘, 내일, 모래의 날씨와 미세먼지 정보를 보여주는 기능 구현 최하단 구현 사이트 바로가기 링크있습니다!

프로젝트를 시작하게 된 이야기 :

일상적으로 가장 많이 이용하는 정보를 웹 뿐 아니라 모바일에서도 볼 수 있도록 구현하고 싶었습니다.

1. 실시간 오픈 API ‘openweathermap’를 통해 받은 JSON 데이터를 내가 원하는 대로 활용하기

2. React의 Component와 Router, Props 등 기본에 충실해보기

3. 반응형 작업하기

페이지 하단 Nav바를 이용하여 이동

ㄴ 최초 랜더링 시에는 클릭 요소가 없기 때문에 작동하지 않았다.

⇒ NavLink의 boolean속성을 이용한 activestyle로 해결

작동하지 않았을 때의 코드 작성 예시 ⇒ axios가 이터러블 하지 않다는데 이터러블이 뭐죠…?반복 …?ㅠ)

export const Data = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const URL1 = `APIURL1`;
		const URL2 = `APIURL2`;

    axios
      .all([axios.get(URL1), axios.get(URL2)])
      .then(res1, res2 => {
      let RES1 = res1;
      let RES2 = res2;
      let res = [..RES1,...RES2]
        setData(res)
      })
      .catch(err => {
        console.log(err)
      })
  }, []);
  return data;
}

MDN문서 & npm 공식사이트 참고하여 고친 코드 예시

export const Data = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
		Promise.all([p1, p2, p3, p4, p5])
					 .then(values => {
									  setData(values);
								 })
					 .catch(error => {
									  console.log(err)
								 });
	}, []);
  return data;
}

참고 문서

날씨 API의 데이터와 내가 작성한 한국어 지명을 함께 화면에 나타내고 싶었다.

⇒ 내가 작성한 데이터(cities)는 상위 component에서 map을 돌리고,

JSON 데이터 처리 될 하위 component를 map안에 넣어 내 데이터를 props로 내려서 해결!

cities는 내가 작성한 데이터 🙂 const cities = […]

{
        cities.map((cities, idx) => <div key={cities.id}>
          <div className="title">{cities.한국어지역명}</div>
          <WeatherDataInfo key={cities.id} cities={cities} />
        </div>
        )
      }

axios 로 받아온 데이터는 전국의 대기에 대한 모든 데이터의 합이었다.

이 데이터를 그대로 props로 보내서, 하위 component에서 점 표기법으로 특정 값에 접근하니 typeError가 났다.

⇒ JSON data를 받은 axios안에서 JSON데이터 하위로 접근하여 state에 저장 후 하위component에게 props로 전달하여 해결

props를 받은 하위 component에서 JSON 특정 요소로 접근 (실패)

<div>{values[0].data.list[0].main.aqi;}</div>

상위 component에서 state에 저장한 상태로 props전달 (성공)

const [pollution, setPollution] = useState([]);
let aqi = values[0].data.list[0].main.aqi;
setPollution(aqi);
  

시작한 후에는, 전국 날씨 정보를 한 화면에 싣기 위해 많은 정보를 불러올 때 axios를 어떻게 활용해야 할지, 불러온 데이터와 한국어 지명을 섞어서 어떻게 화면에 보여줄 수 있는지에 대한 고민의 시간이 가장 길었다.

axios multiple request같은 경우에는 검색을 많이 했다. 모든 블로그 기타 자료에 axios.all을 하면 된다 했는데 안되어서 정말이지 한나절을 고민했었다. 그런데 공식 문서를 찾아보던 중 promise.all 을 써야 하고 반환 받을 때 스프레드 연산자를 쓰지 않아도 된다고 했다.

적용하니 바로 해결되었다.

역시 공식 문서를 항상 먼저 찾아보고 그 다음 다른 자료를 보아야 한다는 것을 다시 한번 느꼈다.

현재 이용한 API는 해외에서 지원하는 데이터인데, 날씨 같은 정보는 현지 API를 이용하는 것이 좋다는 생각이 들기도 했다.

날씨 정보는 데스크탑에서 접근하기보다 모바일 기기에서 접근할 비율이 많은 것으로 생각 되어 모바일에서 보기 편하도록 반응형으로 작업하였다.