Next JS 코드 스플리팅 적용해보기 (Dynamic Import)

이번 포스트에서는 Next JS에서 동적 불러오기(Dynamic Import)를 통해 코드분할(Code Splitting)을 적용해보도록 하겠습니다. React의 경우 모든 페이지가 하나의 페이지에서 랜더링 되는 SPA (Single Page Application)이기 때문에 코드분할을 따로 해주지 않으면 퍼포먼스에 영향이 가게 되고 이는 곧 좋지 않은 사용자 경험으로 이어지게 됩니다. 물론 한 페이지에서 실행되는 로직이 복잡하지 않다면 크게 영향을 받지는 않지만 로직이 복잡해지고 많은 양의 데이터를 불러와야 한다면 각 라우트마다 코드 스플리팅을 해주는 편이 좋습니다. 그렇다면 Next JS는 어떨까요? 넥스트 JS를 배워보자 1편 에서 언급했다시피 Next JS는 파일 시스템의 라우트를 내장하고 있기 ..

2022.07.03