[Next.js Learn 문서 번역 #4] How Next.js Works - Development와 Production 환경 (Next.js는 어떻게 동작하는가)

https://unsplash.com/photos/u7wE6BwUisw

 

Next.js Learn 문서 일부분에 대한 한글 번역입니다.

 

[원문 링크]

• https://nextjs.org/learn/foundations/how-nextjs-works
• https://nextjs.org/learn/foundations/how-nextjs-works/development-and-production

 

---

 

How Next.js Works

 

좀 더 상급의 Next.js 피쳐에 대해 공부하기 전에, Next.js가 어떻게 동작하는지 기본을 이해하면 더 도움이 될 것이다.

 

강좌 초반에 리액트가 어플리케이션을 빌드하고 구조화하는데 있어서 얼마나 상대적으로 자율성이 있는지에 대해서 얘기했었다 (리액트로 어플리케이션을 구축하는데 정말 여러가지 방법이 존재한다.) Next.js는 어플리케이션을 구조화할 때 필요한 프레임워크와 개발 과정 및 최종 어플리케이션 결과물을 더 빠르게 만드는데 도움을 주는 최적화 등을 제공한다.

 

다음 섹션에서는, 아래의 단계들에서 어플리케이션 코드에 어떤 일이 발생하는지 살펴볼 것이다.

• 여러분의 코드가 어느 환경에서(where) 실행되는지: Development vs. Production
• 여러분의 코드가 언제(when) 실행되는지: Build Time vs. Runtime
• 렌더링이 어디서(where) 일어나는지: Client vs. Server

 

Development and Production Environments

여러분은 환경(environments)을 여러분의 코드가 실행되는 컨텍스트라고 생각해볼 수 있다.

development 환경에서는 여러분의 로컬 머신에서 어플리케이션을 빌드하고 실행한다. Production으로 가는 것은 어플리케이션이 배포되고, 유저들에게 소비되도록 만드는 과정을 말한다.

 

How this applies to Next.js (이것들은 어떻게 Next.js에 적용되는가)

Next.js는 어플리케이션의 development와 production 단계 모두를 위한 피쳐를 제공한다. 예를 들어서:

• development 단계에서 Next.js는 개발자와 그들의 어플리케이션 빌드 경험을 최적화해준다. TypeScript와 ESLint integration, Fast Refresh 등과 같은 개발자 경험을 향상시키는 것을 목적으로 하는 피쳐들이 제공된다.
• production 단계에서 Next.js는 어플리케이션을 사용하는 최종 사용자와 그들의 경험을 최적화해준다. 이 단계에서는 성능과 접근성을 향상시키기 위해 코드를 변환하는 것을 목표로 한다.

각 환경이 다른 고려 사항과 목표를 가지고 있기 때문에, 어플리케이션을 development에서 production으로 옮기기 위해서는 많은 작업들이 진행되어야 한다. 예를 들어서 어플리케이션 코드는 compile되고, bundle되고, minified되고, 그리고 code split 되어야 한다.

 

The Next.js Compiler (Next.js 컴파일러)

Next.js는 이러한 코드 변환과 production에 배포하기 쉽도록 만들어주는 기초적인 인프라를 상당 부분 담당한다.

 

이 것이 가능한 이유는 Next.js가 저레벨 언어인 Rust와 컴파일, 코드 축소(minification), 번들링 등에 사용될 수 있는 플랫폼인 SWC로 만들어진 compiler이기 때문이다.

 

다음 섹션에서, 각 코드 변환 단계를 알아보도록 할 것이다.

 

 

Quick Review

다음 단계들 중에서 production 최적화 과정이 아닌 것은?

• A. Compiling
• B. Bundling
• C. Routing
• D. Minifying

C. Routing