230804 Next.js: 기본 동작원리

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

---

0. Next.js의 기능 제공

Next.js에선 애플리케이션 개발 및 프로덕션 단계에서 여러기능을 제공하는데,

• 개발단계에서 TypeScript 및 ESLint통합, 빠른 새로 고침 등을 통해 개발자와 애플리케이션 빌드경험을 최적화한 다. 
• 프로덕션단계에서는 성능과 접근성을 높이기 위해 코드를 변환하는 것을 목표로 해 클라이언트(유저)와 애플리케이션 사용경험을 최적화 한다.

프로젝트를 진행함에 있어 환경 및 사용 목적 등 고려하는 상황이 다르기 때문에 애플리케이션을 개발에서 프로덕션 단의 단계로 넘어가려면 코드 컴파일, 번들링, 경량화 그리고 코드 분할등의 작업이 필요한데, 이 내용은 찬찬히 나온다. 

1. Next.js Compiler?

컴파일러(Compiler)는 한국어로 번역기, 또는 해석기 정도로 생각하면 되는데, 이는 특정 프로그래밍 언어로 쓰인 문서를 다른 프로그래밍 언어로 출력하는 프로세다. 예를들면, 최신 JS문법을 지원하지 않는 브라우저에서도 동작하도록 BABEL이 코드를 변환해 동작을 도와주는데 이를 컴파일 과정이라고 할 수 있겠다.

Next.js는 저수준 프로그래밍 언어인 Rust, 컴파일, 최소화, 번들링 등에 사용할 수 있는 플랫폼인 SWC(Speedy Web Compiler)컴파일러를 가지고 있기 때문인데, 이는 쉬운 프로덕션 전환을 도와준다.

아래 이미지는 React 컴포넌트 HomePage를 정의하고 내보내는 과정을 나타내며, 브라우저에서 이 모듈을 사용하면 해당 홈 페이지 컴포넌트를 렌더링하는데 활용할 수 있다.

HomPage함수 컴파일 과정

컴파일 과정을 한 줄 한 줄 해석해보면 이러하다.

1. Object.defineProperty(exports, "__esModule", { value: true });
	ES6 모듈의 일부 기능을 활용하는 것으로, 현재 모듈이 ES6 모듈임을 나타낸다. 
    	__esModule이라는 특별한 속성을 설정하여 true 값을 할당하고, 
    	이를 통해 이 모듈이 ES6 모듈 시스템과 호환되는 것임을 나타낸다.

2. exports.default = HomePage;
	현재 모듈에서 default로 내보내는 객체를 설정하는 부분으로,
    	HomePage 컴포넌트를 default로 내보냄으로써 이 모듈을 다른 곳에서 불러와 사용할 때, 
    	HomePage 컴포넌트를 바로 가져올 수 있게 된다.

3. function HomePage() { ... }
	이 부분은 HomePage라는 React 함수 컴포넌트를 정의하는 부분으로, 웹 페이지의 홈 페이지를 나타낸다. 
    	JSX와 React.createElement 함수를 사용해 화면에 표시할 내용을 정의한다.

4. React.createElement("div", null, "DX of the Future");
	HomePage 컴포넌트의 내용을 정의하는 부분으로 React.createElement 함수를 사용하여 
    	가상 DOM 요소를 생성하고, 이를 JSX 없이 표현하는 방식이다. 
    	여기선 "DX of the Future"라는 텍스트를 담는 <div> 요소를 생성합니다.

5. return /*__PURE__*/ React.createElement(...);
	이 부분은 컴파일러 최적화를 위한 주석이며, 생성된 코드의 크기를 줄이기 위해 사용되는 기법 중 하나다. 
    	컴파일러가 이 주석을 인식하면 불필요한 코드 최적화를 수행하게 된다.

 

 

Next.js에서의 컴파일은 프로덕션을 위해 애플리케이션을 준비하는 빌드 단계의 일부로 실행되며, 개발단계 중 코드를 편집 할 때 실행된다.

2. Minifying(경량화)

경량화는 코드의 기능을 변경하지 않고 기타 코드 작성 시 사용하는 포맷팅, 즉 주석, 공백, 들여쓰기, 여러 줄 코드 작성 등, 기능실행에 필요하지 않은 것들을 제거하는 프로세스이다.

경량화 된 코드

Next.js에서 프로덕션을 위해 자동으로 컴파일 된 코드의 주석, 띄어쓰기, 들여쓰기를 경량화 하면 오른쪽처럼 필요없는 것들이 제거되어 빈틈없는 코드가 된다. 

3. Bundling(번들링)

번들링이란, 웹 애플리케이션을 구성하는 다양한 파일들을 하나로 묶어주는 프로세스를 말한다. 웹 애플리케이션은 여러개의 JS, CSS, 이미지 등 리소스 파일들로 구성되어있는데, 이들을 하나의 번들파일로 묶으면 웹페이지의 로딩속도가 개선되고 필요한 리소스를 효율적으로 받아올 수 있게 된다.

Next.js에 의해 자동으로 진행되는 번들링은 앱의 성능을 향상시키는데 도움되고, 개발자들이 최적화 작업을 보다 편하게 할 수 있도록 해준다.

---

참고
https://velog.io/@surim014/how-next.js-works#nextjs%EC%97%90-%EC%A0%81%EC%9A%A9%EB%90%98%EB%8A%94-%EB%B0%A9%EC%8B%9D

https://nextjs.org/learn/foundations/how-nextjs-works