[FE] refactor: 페이지별로 JS 파일 분리

[soosoo22]

• resolves [FE] 페이지별로 js 파일을 분리한다. #599

---

🚀 어떤 기능을 구현했나요 ?

suspense와 lazy를 이용해서 페이지별로 JS 파일을 분리하고 동적으로 불러옵니다.

🔥 어떻게 해결했나요 ?

처음엔 Outlet에 Suspense로 감싸는 방식으로 진행했지만 탑바에 있는 리뷰미 로고를 클릭 했을 때 홈으로 넘어가면 비동기 에러가 떴습니다.

홈 페이지는 Suspense로 감싸져 있는데 Suspense로 감싸져 있지 않은 탑바에서 홈 페이지로 이동할려고 하니 문제였습니다. 그래서 일단 Topbar, Footer 모두 Suspense로 감싸는 방식으로 진행했습니다.

const router = createBrowserRouter([
  {
    path: ROUTE.home,
    element: (
      <Suspense fallback={<LoadingPage />}>
        <App />
      </Suspense>
    ),
  // ....
]);

Q. lazy를 걸게 된 계기는?

Suspense로 감싼 후, fallback에 컴포넌트(ex. LoadingPage) 를 넣었을 때, 동적으로 불러오지 못해서

태그로 단순하게 넣었더니 해결되었습니다. 그래서 단순 태그는 동기적으로 작동하지만 컴포넌트는 비동기적으로 불러오기 때문에 컴포넌트에 lazy를 추가했습니다.

Q. Footer도 감싼 이유는?

Footer를 제외한 나머지 요소들을 Suspense로 감싸게 되면 첫 페이지에 들어갔을 때 Footer가 먼저 로드되어서 Layout Shift가 발생합니다.

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

[BadaHertz52]

동적 import를 하기 위해 suspense를 적용하고 suspense 때문에 또 suspense를 걸어야한다니
어렵네요 ㅠㅠ
startTransition으로 하려니, Footer 의 layoutShift 문제도 있네요

어려운 문제인데 고생 많았어요 쑤쑤,올리 👏👏👏👏👏

[ImxYJL]

비동기 잡느라 수고했어요~~

[chysis]

lazy import 때문에(?) suspense 처리가 복잡해졌네요... 고생했어요👍