해당 문서는 Next.js의 동작 원리를 심도있게 이해하고자 작성된 공식문서 번역 문서입니다. 원문의 의미를 최대한 반영하는 동시에 자연스럽게 이해할 수 있는 방향으로 번역하고자 노력하였습니다. 오역이 있을 수 있으니 확인 부탁드리며 피드백 주시면 반영하도록 하겠습니다.
원문주소: https://nextjs.org/learn/foundations/how-nextjs-works
Next.js는 어떻게 동작하는가?
Next.js의 좀 더 심도있는 특징들을 학습하기 전에 기본적인 동작 원리를 이해하는 것이 도움이 될 것입니다.
이 챕터를 시작할 때, React는 우리가 만드는 어플리케이션을 구조화 하거나 만드는 방식에 대해 비교적 편향적이지 않은 1(unopinionated) 프레임워크 라고 소개하였습니다.(React를 활용하여 어플리케이션을 만드는 다양한 방법이 있기 때문입니다.) Next.js는 어플리케이션의 구축하는 프레임워크를 제공합니다. 뿐만 아니라 개발 과정과 그 과정을 통해 만들어지는 어플리케이션에 이르기 까지 전 과정을 더 빠르게 구축할 수 있는 최적화된 방식을 제공합니다.
다음 챕터에서 다음과 같은 다른 단계에서 우리가 만든 어플리케이션의 코드에 어떤 일이 일어나고 있는지 자세히 살펴볼 예정입니다.
- 코드가 실행되는 환경(where): 개발 환경 vs 상용 환경(Development vs Production)
- 코드가 실행되는 시점(when): 빌드타임 vs 런타임
- 렌더링이 되는 장소(where): 클라이언트 vs 서버
그러면, 이러한 개념들과 실제로 Next.js가 동작하는 과정에 대해 좀 더 심도있게 살펴보도록 하겠습니다.
개발 환경과 상용 환경
여기서 말하는 환경이란 코드가 실행되는 문맥을 말합니다.
개발을 하는 과정을 통해 우리는 로컬 환경에서 어플리케이션을 만들고 실행합니다. 상용 환경으로의 전환은 어플리케이션을 배포하여 사용자들이 사용할 수 있도록 준비하는 과정을 말합니다.
어떻게 Next.js에 적용할 것인가?
Next.js는 개발 및 상용 단계에서 다음과 같은 기능을 제공합니다.
- 개발 단계에서 Next.js 는 개발자와 어플리케이션을 개발하는 과정에 대해 최적화된 경험을 제공합니다. 타입스크립트, ESLint 통합, 빠른 새로고침 등과 같은 개발 경험을 향상하는데 그 목적이 있습니다.
- 상용 단계에서 Next.js는 최종 사용자를 위한 최적화된 경험을 제공합니다. 좀 더 성능적으로 우수하고 접근성이 좋은 어플리케이션으로 코드를 변환하는것을 목표로 합니다.
각 환경에 따라 고려해야할 사항과 목적이 다르기 때문에 개발 환경에서 상용 환경으로 이동시 많은 것들이 선행되어야 합니다. 예를 들어 어플리케이션 코드는 컴파일링, 번들링, 경량화, 코드스플리팅 등의 작업을 필요로 합니다.
Next.js 컴파일러
Next.js는 어플리케이션을 상용 환경으로 전환하는데 더 용이하도록 앞서 살펴본 코드의 변환(컴파일링, 번들링 등등)과 그 기반이 되는 인프라의 상당 부분을 다루고 있습니다.
이는 Next.js가 저급 수준 프로그래밍 언어인 Rust로 작성된 컴파일러와 컴파일, 경량화, 번들링 등의 기능을 제공하는 플랫폼인 SWC를 보유하고 있기 때문에 가능합니다.
다음 챕터에서 이러한 코드 변환에 대해 각각 살펴보겠습니다.
컴파일링이란 무엇인가?
개발자들은 개발자들에게 좀 더 친절한 언어(예를들어, JSX, 타입스크립트, 최신 버전의 JavaScript)를 활용하여 코드를 작성합니다. 이러한 형태의 언어는 개발자에게 개발에 대한 자신감과 효율성 증가를 가져다 주지만 브라우저가 해당 형태의 언어를 이해하도록 하기 위해서는 JavaScript의 형태로 컴파일 되어야 합니다.
컴파일링은 하나의 언어에서 또 다른 언어로 변환하는 과정을 말합니다. 또는 같은 언어의 다른 버전으로 변환하는 과정입니다.(우리가 작성한 코드는 실제로 아래의 그림에서와 같이 컴파일 됩니다!)
Next.js에서 컴파일링은 개발 단계에서 코드를 작성하고 변경할 때 진행됩니다. 이는 어플리케이션을 상용으로 전환하는데 필요로하는 빌드 단계의 일부 입니다.
경량화란 무엇인가?
개발자는 사람이 읽기 쉬운 방식으로 코드를 작성합니다. 이러한 방식으로 작성된 코드에는 주석, 공백, 들여쓰기, 다수의 줄바꿈 등과 같이 코드 실행에 불필요한 요소들이 포함됩니다.
경량화는 코드의 동작 및 기능에 영향을 주지 않으면서 불필요한 코드 포멧팅, 주석 등을 제거하는 과정입니다. 경량화의 목적은 파일의 크기를 줄임으로써 어플리케이션의 성능을 향상하는데 있습니다.
Next.js에서 JavaScript, CSS 파일은 자동으로 프로덕션 단계에서 경량화 됩니다.
- 편향적이지 않다는 의미는 어플리케이션을 만드는 방식이 하나가 아니라 다양한 방법으로 만들 수 있다는 의미입니다. [본문으로]
'FRONTEND' 카테고리의 다른 글
| [NextJS] 공식문서 읽어보기 Learn - SEARCH ENGINE OPTIMIZATION - Introduction to SEO (0) | 2023.04.29 |
|---|---|
| [NextJS] 공식문서 읽어보기 Learn - How Next.js Works - part.2 (0) | 2023.04.23 |
| [NextJS] config 파일 및 폴더 (0) | 2023.04.10 |
| [NextJS] Next.js 초기 세팅 테스트 (0) | 2023.04.03 |
| [Storybook] Storybook에 대해서 (0) | 2023.03.30 |
