04.05 ~ 04. 08 (주말은 스킵!)

간단하게 API를 호출하여 각 지역의 기온 및 날씨를 화면에 보여주는 것부터 시작했다

1. 메인에는 선택한 지역들을 배열
2. 지역을 선택하면 detail 페이지로 넘어가, 선택한 지역의 온도를 보여준다
3. 뒤로가기 버튼도 쌈뽕하게 만들기

---

공공데이터포털

위 사이트에서 기상청단기예보 ((구)동네예보) 조회서비스 를 신청해, 인증키를 받아왔다.

인증키를 입력하는 방식은 해당 리액트 폴더 최상위 경로에 .env 로 파일을 만들고

REACT_APP_SERIVICE_KEY=인증키

이렇게 적어놓은 뒤 저장한다

우리는 디테일 페이지에서 이 API를 사용할 것이기에 detail.jsx를 vs코드로 연다

자바스크립트에 내장된 객체인 fetch()를 이용하여 다음 코드를 짰다

import React, { useEffect } from 'react' //useEffect 함수 불러오기

function Detail(){
	const servicekey = process.env.REACT_APP_SERVICE_KEY; //인증키
    
    useEffect(()=>{
    	const fetchData = async()=>{ //비동기 처리
        	const url = "http://주소";
            let queryParams = "?" + encodeURIComponent("serviceKey") + "=" + '인증키;
            
            
            //여기서부터
            queryParams +=
        "&" + encodeURIComponent("pageNo") + "=" + encodeURIComponent("1");
      queryParams +=
        "&" +
        encodeURIComponent("numOfRows") +
        "=" +
        encodeURIComponent("1000");
      queryParams +=
        "&" + encodeURIComponent("dataType") + "=" + encodeURIComponent("JSON");
      queryParams +=
        "&" +
        encodeURIComponent("base_date") +
        "=" +
        encodeURIComponent("240408"); //오늘 날짜만 보고 싶어 임의로 적음
      queryParams +=
        "&" +
        encodeURIComponent("base_time") +
        "=" +
        encodeURIComponent("0600");
      queryParams +=
        "&" + encodeURIComponent("nx") + "=" + encodeURIComponent(region.nx);
      queryParams +=
        "&" + encodeURIComponent("ny") + "=" + encodeURIComponent(region.ny);
        //여기까진 필요한 부분만 공공데이터포털 사이트에서 제공하는 샘플 코드 가져옴
        	region.nx, ny는 미리 앞에서 정해둔 변수 활용


        try {
          const response = await fetch(url + queryParams);
          const data = await response.json();
          // 상태 업데이트로 변경
          settemperature(data.response.body.items.item[3].obsrValue); //내가 가져고오고 싶은 값을 찾아서 하드코딩

          console.log(data.response.body.items.item)
          console.log(data.response.body.items.item[3].obsrValue)
        } catch (e) {
          console.log(e);
        }
      }
    fetchData();
  };

//화면에 렌더링
  return(
    <>
      <div>{region.name}</div>
      <div>{temperature}도</div>
    </>
  )
}
        }}
}

위 코드를 바탕으로 서버를 켜보면

노트북을 사용해서 그런지 좀... 늦게 로딩되긴 하는데 성공적으로 잘 된다!

아직 공부를 덜해서 추후에 설명을 보완해 추가할 예정

---

오늘의 느낀점
짱어렵다!!!!! 나는 스스로 코드 짜는 법이 너무너무 약하다는 걸 새삼 느꼈다... 좀 더 복습하고 공부해야겠다
그리고 너무 재밌다!!! 멘토님이 내가 막 버벅거리고 엉뚱한 데서 헤매도 잘 기다려주시고 설명도 너무 잘해주신다..... 중고딩때 선생님이셨으면 빡대가리인 나라도.. 국립대에 갔지 않았을까 싶을 정도의 강의력이시다..........

공부하면서 나는 왜 이런 것 하나 할 줄 모를까?
금방 배웠는데도 모르는 걸까? 자학을 좀 했었다
하지만 주위 개발자 지인들이 하는 조언들을 또 들어보면 모든 걸 아는 개발자는 없다고 한다
중요한 건 자신의 취약점을 알고 그 부분을 향상시키는 거라 한다
그리고 다들... 이것저것 많이 배우다보니 까먹는 것도 많아 다시 찾아보고 또 계속 공부한다고 얘기들해줬다
그래서 느낀 점은...... 자학할 에너지로 문법이나 하나 더 공부하고 복습하자!!