refactor-fe: lazy loading 개선하기

[lurgi]

목적

lazy loading 최적화 하기

작업 세부사항

• [ ] api 요청 loader를 통해 lazy loading component 사용성 개선

참고 사항

일전에 사용성 개선을 통해 lazy loading되는 js파일을 prefetch 할 수 있을까? 에 대한 고민으로 시작한 부분이 있었는데요, 다음 아티클을 통해서 약간의 해답을 찾음과 동시에 React-Router의 loader를 알게 되었습니다.

article

간략히 소개하자면, lazy loading의 문제로

GET /components/UserProfile.tsx   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
GET /api/users/1                                    ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

다음과 같은 순서로 로딩이 되는데요, 코드를 수정하여

import { loader, UserProfile } from '../components/UserProfile'

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index element={<HomePage />} />
      <Route path="/users/:userId" loader={loader} element={<UserProfile />} />
    </Route>,
  ),
)

GET /components/UserProfile.tsx   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
GET /api/users/1                  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

이런식으로 시간을 단축할 수 있다고 소개하는데요, 실제로 병렬 처리 되는 건 아니겠지만, 서버데이터를 우선적으로 prefetch하는 전략임을 알 수 있었습니다. 이에 대한 조사, 프로젝트에 도입할 수 있는지를 파악하고, 개선해보고자 이슈 올립니다.

아래의 별표줄 밑에 요구사항 ID만 작성해주세요. Prefix 금지!

---

OPT_LAZY

[github-actions[bot]]

🚀 안녕하세요 @lurgi님! 작업을 시작하셨군요?

작업하실 브랜치를 컨벤션에 맞게 현재 이슈 ✨refactor-fe: lazy loading 개선하기✨에 연결하여 생성헤드렸어요! 생성된 브랜치명: fe-747-OPT_LAZY

해당 브랜치가 연결된 ⚡️Draft PR⚡️ 생성되었으니 확인해보세요

작업이 완료된 후, 리뷰어를 선택하고 Draft PR 내부의 Ready for review 버튼을 눌러주시면 됩니다! :) 제가 Slack으로 리뷰어에게 DM으로 알려드릴게요

[github-actions[bot]]

Could not create PR (Validation Failed: {"resource":"PullRequest","field":"base","code":"invalid"} - https://docs.github.com/rest/pulls/pulls#create-a-pull-request)