[Next.js Learn 문서 번역 #5] How Next.js Works - Compiling, Minifying, Bundling, Code Splitting이란?

(잘못해서 게시물을 삭제해버려서 다시 업로드합니다.)

Next.js 공식 문서에 상단 Learn 버튼 누르면 나오는 튜토리얼 문서인데 좋은 내용인 것 같아서 시리즈로 번역해서 올리려고 한다.

 

[원문 링크]

• https://nextjs.org/learn/foundations/how-nextjs-works/compiling
• https://nextjs.org/learn/foundations/how-nextjs-works/minifying
• https://nextjs.org/learn/foundations/how-nextjs-works/bundling
• https://nextjs.org/learn/foundations/how-nextjs-works/code-splitting
• https://nextjs.org/learn/foundations/how-nextjs-works/buildtime-and-runtime

 

---

 

What is Compiling?

개발자들은 JSX, TypeScript 그리고 모던 JavaScript와 같은 더 개발 친화적인 언어로 코드를 작성한다. 이런 언어들이 개발자의 자신감과 효율성을 향상시키는 동안, 브라우저가 이해할 수 있도록 JavaScript로 컴파일되어야 한다.

 

컴파일링은 하나의 언어로 된 코드를 가져다가 같은 언어의 다른 버전이거나 다른 언어로 산출하는 과정을 말한다.

 

 

Next.js에서 컴파일(Compilation)은 여러분이 코드를 편집하는 개발 단계에서 여러분의 어플리케이션을 프로덕션으로 준비시키기 위한 빌드 단계의 한 과정으로써 진행된다.

 

Quick Review

• 왜 여러분의 웹 어플리케이션 코드는 컴파일 되어야하는가?

• 코드를 브라우저가 이해할 수 있는 버전으로 변환하기 위해서

 

What is Minifying?

개발자는 인간이 읽을 수 있도록 최적화된 코드를 작성한다. 이러한 코드는 주석, 공백, 인덴트, 그리고 복수의 라인들과 같이 불필요한 정보들을 담고 있을 수 있다.

 

 

코드 축소(Minification)는 코드의 기능을 변환시키지 않고 불필요한 코드 포매팅이나 주석을 삭제하는 과정이다. 목적은 파일 크기를 줄여서 어플리케이션의 성능을 향상시키는 것이다.

 

Next.js에서 프로덕션을 위한 JavaScript와 CSS 파일은 자동으로 축소된다.

 

True or False

• Minifying은 여러분 코드에서 구문 하이라이팅(syntax highlighting)을 제거한다?

• False - 구문 하이라이팅은 여러분의 코드 에디터에서 제공하는 것이다.

 

What is Bundling?

개발자들은 그들의 어플리케이션을 어플리케이션의 더 큰 부분을 구축하는데 사용될 수 있도록 모듈, 컴포넌트, 그리고 함수로 쪼갠다. 이러한 내부 모듈(혹은 외부 써드 파티 패키지)을 Exporting하거나 Importing하는 것은 파일 의존성을 매우 복잡하게 만든다.

 

 

번들링(Bundling)은 유저가 웹 페이지를 방문했을 때 파일 요청 수를 줄이는 것을 목적으로 웹의 의존성을 정리하고 파일(혹은 모듈)을 브라우저를 위해 압축된 번들로 병합(또는 패키징)하는 과정이다.

 

Quick Review

• 웹 개발에서 컴파일링과 번들링의 차이점은 무엇인가?

• 컴파일링은 코드를 브라우저에 의해 파싱 가능한 형태로 변환하는 것이다. 번들링은 어플리케이션 의존성 그래프를 정리하고 파일 수를 줄이는 것이다.

 

What is Code Splitting?

개발자는 주로 어플리케이션을 다른 URL로부터 접근 가능한 여러 개의 페이지로 쪼갠다. 이러한 각각의 페이지들은 어플리케이션의 고유한 진입점이 된다.

코드 스플리팅은 어플리케이션 번들을 각 진입점에서 필요로하는 작은 청크 단위로 나누는 프로세스이다. 목적은 해당 페이지를 실행하는데 필요한 코드만 로드하여 어플리케이션의 첫 로드 시간을 줄이는 것이다.

 

 

Next.js는 코드 스플리팅(Code splitting)을 내장 지원한다. pages/ 경로에 있는 각 파일은 빌드 단계에서 자동으로 각각의 JavaScript 번들로 코드 스플릿된다.

 

더 나아가서:

• 각 페이지에서 공유하는 코드는 모두 별도의 번들로 쪼개져서 추가적인 페이지 이동 시 같은 코드를 다시 다운로드받지 않도록 한다.
• 첫 페이지 로드 이후에 Next.js는 유저가 이동할 가능성이 높은 다른 페이지의 코드를 프리 로드하기 시작할 수 있다.
• 무슨 코드를 처음으로 로드할 지 수동으로 분리하는 다른 방법 중 하나로 Dynamic imports가 있다.

 

Quick Review

다음 중 코드 스플리팅의 목적이 아닌 것은?

• A: 어플리케이션의 첫 로드를 향상시키기 위해
• B: 진입점에 필요한 코드만 로드하는 것
• C: 불필요한 코드를 삭제하는 것

• C: 불필요한 코드를 삭제하는 것

 

Build Time and Runtime

빌드 시간(또는 빌드 단계)은 프로덕션을 위해 어플리케이션 코드를 준비시키는 연속적인 단계를 일컫는 말이다.

 

어플리케이션을 빌드하면, Next.js는 여러분의 코드를 서버에 배포되어 유저에게 사용될 준비를 마친 프로덕션에 최적화된 파일로 변환할 것이다. 이러한 파일들은 다음을 포함한다:

• 정적으로 생성된 페이지를 위한 HTML 파일
• 서버에서 페이지 렌더링을 하기 위한 JavaScript 코드
• 클라이언트에서 페이지를 인터랙티브하게 만들어주는 JavaScript 코드
• CSS 파일들

 

런타임(또는 요청 시간)은 어플리케이션이 빌드되고 배포된 이후에 유저 요청에 대한 응답으로써 어플리케이션이 실행되는 시간을 말한다.

다음 섹션에서는 이 섹션에서 소개된 용어 몇 가지(클라이언트, 서버, 그리고 렌더링)에 대해서 알아보려고 한다.

 

True or False

• 빌드 시간은 유저 요청에 대한 응답으로 어플리케이션이 내제되는 시간(기간)을 말한다.

False (위 설명은 Runtime에 대한 설명이다)