next.js4 최적화를 위한 Next.js 코드 스플리팅 코드 스플리팅이란?특정페이지에서 JS, 라이브러리, 페이지, 컴포넌트를 비동기적으로 렌더링을 해줍니다. 초기 렌더링시 초반에 불필요한 JS, 라이브러리, 페이지 등은 코드 스플리팅을 통해서 나중에 들고오기 때문에 성능적인면에서도 아주 매력적으로 다가오게 됩니다. 코드 스플리팅은 말그대로 이다. 코드를 분리시킨다 의미가 강하게 내포되어 있는거 처럼, 이 기능은 코드를 비동기적으로 로딩하는 방법을 만들어 줍니다. 나는 주로 차트 개발을 하면서 한번에 데이터를 들고와 chart를 뿌리는 작업을 하면서 렌더링 이슈를 많이 접하곤 했었다. (물론 한참 오래전인 2022년 이야기이다.)이러한 차트를 뿌리기 위해서는 데이터도 그만큼 상당하기도 하고 UI 차트들이 많이 차지하는 만큼 렌더링이 버벅 거리는 이슈와 느린 .. 2024. 5. 22. bundle-analyzer 이용한 Bundle size 최적화 저는 개인적으로 공부하다가 최적화 이슈를 발견하게 되었습니다. 그러다 보니 어떻게 성능을 잘 개선하면 되는지 연구를 계속하게 되었습니다. 그러다 보니 저는 bundle size를 최적화를 하여 조금더 필요없는 모듈을 정리 해야되겠다는 마음이 들어 모듈을 시각적으로 표현을 도와주는 bundle-analyzer 라는 것을 발견하였습니다. bundle-analyzer란? 우선 bundle-analyzer을 들어가기 앞서 bundle과 모듈이라는 용어는 미리 다 알고있다는 상태에서 말씀드리겠습니다. 잘 모르시겠다면, 각각 단어에 링크를 연결 해두겠습니다. bundle-analyzer는 정확히 프론트엔드 개발에서 사용하는 도구이며, 웹 어플리케이션에서 번들 사이즈를 분석하여 시각적으로 표현을 해줍니다. 번들안에서.. 2024. 1. 28. [ Next.js ] a tag, Next/link, route 다르게 작동된다고? 저는 회사에서 Next.js를 사용하면서 페이지 이동할때 사용하는 a태그, next/link, route 부분을 많이 다루고 있었습니다. 하지만 나는 여기에서 중요한 핵심 포인트를 정리하기 위해서 다시 블로그에 글을 적게 되었습니다. 우선 다양한 페이지 이동을 하는거에 바라보면 모두 비슷하고 다른점이 없다고 느끼는 경우도 많았습니다. 하지만 계속 아무런 의미없이 개발을 하게되었을땐 정말 실속없는 개발자가 되기가 뻔해 정리를 하였습니다. Next.js 의 Router https://nextjs.org/docs/app/building-your-application/routing/defining-routes Routing: Defining Routes | Next.js Learn how to create yo.. 2023. 11. 20. SSR, CSR, Hybrid rendering SSR, CSR 저는 Next.js 옛날에 개발하면서 느끼고 있는 것이 있는데 조금 더 구체적으로 내용을 정리할 필요가 있다고 생각이 들어 블로그를 정리하게 되었습니다. Next.js에서는 어떤 형태로 브라우저가 활성화 되는지 그리고 Hybrid rendering 개념은 무엇인지? SSR과 CSR라는 개념의 정리가 필요해 보였습니다. SSR는 (Server-Side Rendering) 의미로 사용자가 웹페이지에 접근을 시점부터 발생하게 되는데, 페이지를 불러오기 전에 필요한 경우에는 서버에서 외부 API, 파일 시스템, 데이터가 가공처리, 헤더 설정 등을 데이터 가져오기 됩니다. 그다음으로는 HTML 생성을 하여 브라우저에서 페이지 표시를 하게 됩니다. 원래는 브라우저 실행순서가 더 깊게 있지만 SSR .. 2023. 9. 23. 이전 1 다음
