[weather-NextJS] 개발기 #5

수행한 것

• 기능 최종 완성
  • 모바일 사이즈일 때 사용할 수 있는 모달에 기능을 추가했다. 도시를 검색하고 저장하면, 해당 도시 아이템이 목록에 뜨게 된다. 이때 도시 아이템을 클릭하면 메인 화면의 날씨를 해당 도시의 날씨로 바뀌게 했다.
    • 이를 위해서, 도시 아이템을 클릭했을 때 해당 도시의 오늘 날씨, 주간 날씨, 시간 별 날씨를 가져오기 위해 fetch를 한번 더 수행했다.
• 리팩토링
  • 기존에 사용했다가, 로직을 수정하면서 사용하지 않게된 코드를 모두 삭제했다.
  • 날씨에 따른 아이콘을 보여주기 위해 case문을 사용했는데, 코드가 길어져서 자주 사용하는 함수는 모두 따로 모듈로 분리했다.
  • 기존에 모달에서 fetch요청 시 따로 만들어둔 utils에서 함수를 사용했다. 이미 동일한 기능을 하는 함수를 /api에서 처리하고 있었기 때문에, utils를 삭제했다.
  • 모든 코드를 component에서 처리했는데, 각 코드의 특징에 따라 폴더 별로 나눴다.
• 디자인 적용
  • 모달 open, close시 애니메이션 추가
  • 도시 아이템 클릭 시 해당 도시의 날씨로 변경되는 섹션에 애니메이션 추가
  • 도시 아이템 onHover 애니메이션
  • 날씨 아이콘 추가
• 배포
  • 최종적으로 기능을 구현하고 나서, Cloud Flares에 배포했다.

---

고민한 것

• 배포가 가장 큰 걸림돌이었다. Cloud Flares에는 Next.JS, Next.JS(Static HTML) 두 가지 옵션이 있다. 처음에는 어떤 걸로 해야하는지 몰라 다른 블로그를 참고해서 Static으로 설정하고 시도를 했는데, 오류가 발생했다.
  • '/'(page.tsx) error, prerender error, window is not defined
    • '/'(page.tsx) error : page.tsx는 async한 컴포넌트를 export하고 있다. async한 이유는, 초반에 server-side rendering을 수행할 때 api fetch를 하기 때문이다. 미리 데이터를 불러오고, 이를 Section 컴포넌트에 전달해서 날씨 데이터를 렌더링 하는 구조이다. Section에서 오류가 발생한다길래, dynamic import를 사용해도 오류는 해결되지 않았다. 정확히 원인이 무엇인지는 모르겠으나, static HTML 옵션으로 배포를 시도하는데 server-side rendering을 통해 데이터를 전달하려고 해서 그런 것 같다.
    • prerender error : 이것도 동일한데, /api/... 에서 api fetch를 수행하는 route handler가 있어서 그런것 같다.
    • window is not defined: Modal.tsx에서 window 객체를 사용하는 코드가 있어서 발생했다. 렌더링이 되기도 전에 window를 사용하려고 했기 때문인데 이는 Modal을 dynamic import로 변경하니 해결됐다.
  • 시도한 해결책
    • stackoverflow를 참고해보니, export const dynamic = 'force-static'을 모든 코드에 작성하라고 했다. ➡️ 안됐다.
    • Section을 dynamic import로 변경하기. ➡️ 안됐다.
    • fetch시 옵션에 cache:'force-cache' 설정하기. ➡️ 안됐다.
    • 배포 옵션 변경하기 & runtime 설정 ➡️ 됐다.
      • Next.JS(Static HTML)에서 Next.JS로 변경
      • page.tsx와 /api/...에 존재하는 모든 route.ts에 export const runtime = 'edge' 추가
• Tomorrow.io 의 단점?
  • 오늘의 날씨를 사용하기 위해 Realtime Weather를 사용했는데, 이는 현재 온도는 제공하지만 최저, 최고 온도를 제공하지 않는다. 그래서, 부득이하게 1d 단위로 Weather Forecast를 추가로 사용해야 했다.
  • 이 같은 이유 때문에, 여러번 중복해서 api 호출을 수행해야 했다..

---

배운 것

• 이번에는 배포에서 굉장히 많은 시간을 쏟았다. Cloud Flares에서의 두 가지 배포 옵션이 뭐가 다른건지, 에러는 해결했지만 정확히 왜 이렇게 해야되는지는 잘 모르고 해결에만 급급했다.
  • 두 옵션의 차이점과 에러의 원인, 해결에 대해 다시 한번 찾아봐야겠다.
• 처음 마이그레이션을 시작하겠다고 다짐을 먹었을 때는, 시간이 많이 걸릴 거라고는 생각하지 못했다.중간 중간 다른 프로젝트를 하느라 상대적으로 봤을 때 완성하는데 소요된 시간이 오래 걸린 것 처럼 보이지만, 절대적인 시간은 그렇게 많이 소요된 것 같진 않다.
• localstorage, route handler에도 시간을 많이 쏟았던 것 같고, 특히 세부적인 로직처리를 어떻게 할지 고민하는데 시간을 많이 쏟았다. 그리고, Splitter..
• 브라우저의 사이즈에 따라 모달을 사용할지 안할지가 결정되는데, 사이즈에 따라 어떻게 로직을 처리해야 할지도 굉장히 큰 고민이었다.
• 현재는 브라우저 사이즈를 state로 설정하고, useEffect에서 window에 브라우저 사이즈를 측정하는 handler를 하나 추가해서 다루고 있다. 그리고 Modal.tsx에 모바일과 데스크탑일 때의 서로 다른 2개의 모달을 만들고 부모 요소에서 isBottom(모바일인지 여부) 속성을 주어서 return문에서 isBottom에 따라 특정 모달을 반환하도록 했다.
  (return isBottom ? bottomModalContent : sideModalContent)
  • 이 부분은 코드가 너무 길고 더러워서 추가적인 리팩토링이 반드시 필요해 보인다. 로직을 다시 생각해서 더 나은 코드로 수정해야겠다.

---

결과물

모바일	데스크탑