팀플) OpenWeather API 연결

처음 계획은 백엔드로 통신하고 값까지 검증해서 관측 가능한 상태랑 불가능한 상태로 나눌까 했었는데, 가만 생각해보니까 비효율적이라는 것을 깨닫고 오직 프론트에서만 돌아가도 된다고 결론이 났음.

왜? 데이터는 데이터대로 보여주고 마지막에 요청 위치의 날씨를 확인하고 그날 기후는 뭐 흐리니 관측이 어려울 수 있음. 만 말해주면 끝날 문제라 프론트에서 충분히 처리 가능함.

기존에 학원 과제 때문에 약식으로 만든 Weather API 프로젝트가 있어서 거기서 API KEY 가져와서 재사용하면 됨.

---

여튼 .env KEY 값 저장하고 시작하자.

useUserLocation훅을 사용해서 요청을 보낼거고, WeatherPage.js에서 mainPage접근시에 알아서 요청되게 했음.

그래서 일단 요청에는 성공했음.

여기 비회원이면 서울 기준으로 뜨는거고 1번 회원은 미국 위스콘신을 즐겨찾기 해둬서.

해당 위치로 요청한 데이터를 볼 수 있음.

이제는 원하는 데이터만 뽑아서 파싱하고 적절히 꾸미면 끝일듯,

여따가 아이콘만 넣으면 됨..

다 했다 SCSS도입 했고 WeatherCard로 Card는 분리해서 관리함.

이제 다른 세세한 스타일은 팀원한테 넘기면 될듯

아! 도시 이름도 파싱해서 검증해보니까 비회원은 서울로 요청 잘 하고 있고,

회원은 즐겨찾기한 위치 기준으로 가져옴.

만약 즐겨찾기가 없는 사용자가 로그인하면 서울로 알아서 가져오게도 해놨기 때문에 잘 작동할듯.

---

근데 좀 거슬리는게 사용자가 강제로 새로고침 해야지 그제셔아 화면에 출력됨. 그래서 mainPage에서 location의 변경이 감지되면 강제로 새로고침하는 로직 작성.

오우씨 무한 새로고침하네. 그래서 유저 인증상태로 바꿔서 해봤는데도 무한 새로고침함. 보니까 새로고침하면서 다시 페이지 접근하면 바뀐걸로 계속 인식하는듯.

그래서 아 새로고침은 해결 방법이 아니다 라는 결론에 도달함..

이미 상태 변화에 따른 데이터 업데이트 로직은 있음.

그래서 애진작 날씨 페이지에서 렌더링을 다시 할 방법을 찾아서 이런걸 도입

    const [renderKey, setRenderKey] = useState(0); // 강제 재렌더링 키

    useEffect(() => {
        // 로그인 상태가 변경되면 강제 재렌더링
        setRenderKey((prevKey) => prevKey + 1);
    }, [isAuthenticated]);

이게 이제 강제로 재렌더링 하는 코드, useEffect로 관리하게 함.

결과는?

잘 됨 이제.

내 정보에서 위치 즐겨찾기 바꾸고 뒤로가기 해도 재렌더링 덕에 그 위치의 날씨로 잘 바뀌어있음. 이럼 로직은 어느정도 완성이니 깃 올리고 머지 시켜야지.

끝! 이제 유성우 데이터 요청 및 끌어오기 하면 될듯.