3줄 요약
1. createBrowserRouter 사용하는 이유와 적용
2. 로컬스토리지 쉽게 내려주기
3. 코드스플리팅 사용하기
https://velog.io/@wns450/%EC%BD%94%EB%93%9C-%EC%8A%A4%ED%94%8C%EB%A6%AC%ED%8C%85-%ED%86%A0%EC%8A%A4%ED%8A%B8-%EC%A0%84%EC%97%AD%EC%9C%BC%EB%A1%9C-%EB%BF%8C%EB%A6%AC%EA%B8%B0
(코드 스플릿 시도했지만 실패했었다)
저번 블로그에서 코드스플링을 사용하려고 했지만,
좋은 효과를 얻지 못하였다.
공식문서에 따르면 라우터를 최신 문법이 아닌 문법을 사용한다.
그래서 빠르게 하려면 예전 방법을 사용하면 됐지만
개발자라면 트렌디함에 민감해야 한다고 생각했기 때문에
따로 시간을 내서 최신문법에 맞춰 사용하고 싶어 더 깊게 공부하였다.
1. createBrowserRouter 사용하는 이유와 적용
이유를 생각해본 결과 createBrowserRouter 사용한 라우팅 방법의 차이라고 생각했다.
내가 이 문법을 사용한 이유는 프리프로젝트할 때 이부분 작성하신 분 코드가 기존의 코드보다 줄바꿈이 확실해 읽기가 좋았다고 생각이 들어서 받아들였던 부분이었다.
그런데 외관적인 이유보다 이 코드를 사용한 이유에 대해서 살펴보질 못해서
이부분을 탐구하고 Suspense 를 어떻게 활용하면 좋을지 고민하고자 한다.
https://reactrouter.com/en/main/routers/picking-a-router
We recommend updating your app to use one of the new routers from 6.4.
알아보니 v6.4 권장하는 라우터 라고 한다. 데이터 api 연동해서 받아올 수 있는 방법이고 권장하는 방법이니 여기에 맞춰 문법을 업그레이드 하려고 한다.
https://www.crocus.co.kr/1814
블로그를 참고하면 outlet이라는 것을 사용해서 자식 컴포넌트를 대체할 수 있게 로직을 짤 수 있는데 이문법에 맞게 업그레이드 해봐야겠다.
const router = createBrowserRouter([
{
path: '/',
element: withLayout(Main),
errorElement: <Loading />,
},
{
path: '/test',
element: <Test />,
},
{ path: '/auth', element: <Auth /> },
]);현재 사용하는 문법
(중간에 필요없는 부분은 생략하였다.)
https://medium.com/@_diana_lee/default-export%EC%99%80-named-export-%EC%B0%A8%EC%9D%B4%EC%A0%90-38fa5d7f57d4
default export와 named export의 차이로 인해서 문제가 생겼다.
lazy loading을 하려면 default export 에서만 지원하기 때문이다.
2. 로컬스토리지 쉽게 내려주기
그래서 이 문제를 해결하려면 파일을 여러개 만들어서 default로 선언해야하는 불필요한 문제가 생겨 이문제를 개선하였다.
기존에는 useSession 이라는 커스텀 훅을 이용해 엑세스 토큰을 받아왔다.
useSession.tsx
근데 이문제는 주기적으로 내려줘야한다는 문제점이 있었고,
레이지로딩에 방해가 되어서 개선이 필요해보였다.
프로젝트 진행 중 이 문제점을 항상 인지하고 있었다.
부트캠프 다른 팀 코드를 뜯어 보던 중 이 문제를 해결할 수 있는 코드를 발견하여 활용하였다.
export const session = localStorage.getItem('access_token');
이 한줄을 파일에 추가함으로서 토큰 문제를 해결하였다.
기존의 useSession을 제거하고 심플하게 작성할 수 있었다.
라우팅 문법 또한 지저분하다고 생각하였는데, 이 문제 또한 개선하였다.
그리고 기존의 import 방법을 lazy 로딩으로 업데이트하여 최적화를 하였다.
const Login = React.lazy(() => import('./Pages/Login'));
const PaymentPage = React.lazy(() => import('Pages/PaymentPage'));
const ProductListPage = React.lazy(() => import('Pages/CategoryListPage'));
const BasketsPage = React.lazy(() => import('Pages/BasketPage'));
const ProductPage = React.lazy(() => import('Pages/ProductPage'));
const AllProductsPage = React.lazy(() => import('Pages/AllProductsPage'));
const Search = React.lazy(() => import('Pages/Search'));
const MyPage = React.lazy(() => import('Pages/MyPage'));
https://www.crocus.co.kr/1814
Outlet에 관한 설명을 읽고 업데이트 하였다.
lazy loading 까지 완료하고나서, 성능 확인을 하였다.
요청 26건
4.6 MB
13.6 MB 리소스 (1.2MB 감소)
완료: 1.98초 (0.35초 단축)
DOMContentLoaded: 1.24초 (0.04초 단축)
로드: 1.63초 (0.3초 단축)
이정도로 단축이 되었다. 디테일적인 것을 더 노력해서 극적인 변화를 도모해봐야겠다.
추가) Suspense를 추가하니 Placeholder가 안되어있는 문제점이있어서 그문제점을 개선하고자
BG백그라운드(placeholder 역할할 흰색 창)를 추가하였고, Footer가 붙었다가 떨어지는 장면이 보고싶지않은 장면이라서 Footer까지 suspense 안에 넣어서 UX를 개선하였다.
그랬더니 성능 또한 더 개선이 되었다.
Footer까지 집어넣어서 UX , 성능 둘다 잡을 수 있었다.
처음과 비교했을때
요청 26건
4.6 MB 전송됨
13.5 MB 리소스 (1.3MB 감소)
완료: 1.77초(0.55초 단축)
DOMContentLoaded: 1.14초 (0.14초 단축)
로드: 1.49초 (0.44초 단축)
이런 결과를 얻을 수 있었다.
페이지를 사용해본 결과 UX가 많이 개선되어서 만족스럽다.
