![]()
Next.js conf에서 13버전이 공개됐습니다. 프런트엔드 개발자로서 이번 conf를 보고 대격변이라고 생각이 들 정도로 많은 기능들과 제품들을 소개했는데요. 어떤 것들이 있었는지 Next.js beta 공식문서를 하나씩 읽어보면서 알아보겠습니다. Routing Next.js 13에서는 새로운 file-system routing이 추가됐습니다. 기존에는 pages/ 디렉토리를 사용했었는데 이제는 app/ 을 사용하시면 됩니다. 점진적으로 도입하기 위해서 pages/ 디렉토리를 여전히 사용할 수도 있습니다. app에 생성한 component는 기본적으로 React Server Component이지만 Client Component로도 생성할 수 있습니다. React Server Component와 Cli..
코드 분할이란? 리액트에서의 코드 분할에 대해 알아보겠습니다. 유저가 처음 웹 페이지에 접속했을때 빌드된 main.js 파일을 로드한다고 생각해봅시다. 만약 프로젝트의 규모가 커진다면 main.js 파일의 크기 또한 커질 것이고 이를 로드하는데 많은 시간이 걸리므로 사용자 경험의 퀄리티가 저해될 것입니다. 따라서 main.js를 여러 파일로 나눠, 용량을 줄여줘야만 하겠죠? 여기서 사용하는 기술이 코드 분할입니다. 코드 분할의 방법 코드 분할을 하기 위해서는 물론 bundler가 설치되어있어야겠죠? 저는 제일 익숙한 webpack을 사용했습니다. 내장 import 함수 사용하기 코드 분할을 하는 가장 좋은 방법은 import() 문법을 사용하는 것이라고 공식 docs에 나와있습니다. 아래와 같이 butt..
