들어가며
이 글에서는 NestJS, Vite 및 esbuild가 무엇인지, 이 세 가지를 조합하는 방법, 다른 두 도구를 종속성으로 사용하도록 NestJS 앱을 구성하는 방법, 그 과정에서 실제 시나리오와 주요 기능 및 사용 사례에서 조합하여 작업하는 방법을 공부합니다. 이 글은https://blog.logrocket.com/getting-started-with-nestjs-vite-esbuild 원문을 참고하여 한글로 작성하였습니다.
목차
- NestJS란?
- Vite란?
- esbuild란?
- NestJS 설치 및 구성
- NestJS 보일러플레이트 살펴보기
- NestJS와 함께 Vite와 esbuild 설치
NestJS란?
NestJS는 효율적이고 확장 가능한 엔터프라이즈 서버 측 백엔드 애플리케이션을 구축하기 위한 Node.js 프레임워크입니다. 문서에 따르면 JavaScript와 TypeScript의 모든 최신 ECMAScript 버전을 지원합니다.
NestJS는 잘 알려진 프로그래밍 개념과 OOP의 철학, 기능적 프로그래밍, 기능적 반응 프로그래밍을 결합하여 확장 가능하고 유지 관리가 용이하고 쉽게 테스트할 수 있고 밀접하게 결합되지 않은 백엔드 애플리케이션 설계의 아키텍처 문제를 해결합니다.
NestJS는 플랫폼에 독립적이며 바인딩이 작성되면 모든 Node.js 라이브러리와 함께 작동할 수 있지만 NestJS는 기본적으로 Express를 종속성으로 사용하며 Fastify를 사용하도록 구성할 수도 있습니다. 다른 타사 모듈과 함께 노출된 API를 통해 프레임워크를 쉽게 구성할 수 있으므로 개발자가 사례별로 프레임워크를 매우 쉽게 사용자 지정할 수 있습니다.
Vite란?
Vite는 많은 기능을 갖춘 빌드 도구이며, 그 중 가장 중요한 것은 거의 즉각적인 개발 서버 시작 시간입니다. 브라우저에 네이티브 ES 모듈을 도입하고 네이티브 코드로 컴파일하는 언어로 작성된 도구를 활용하여 성능과 관련된 이전 빌드 도구(webpack, Parcel 등)의 문제를 해결합니다.
Vite는 먼저 애플리케이션의 모듈을 종속성과 소스 코드의 두 가지 범주로 나누는 방식으로 작동합니다. 종속성은 개발 중에 거의 변경되지 않기 때문입니다. Vite는 esbuild를 사용하여 이러한 종속성을 사전 번들로 제공합니다. 변환이 필요할 수 있는 소스 코드(CSS, JSX 등)의 경우 Vite는 기본 ESM을 통해 브라우저에 제공합니다.
브라우저가 소스 코드를 요청하면 Vite는 요청 시 변환 및 로드하고 브라우저는 경로 기반 코드 분할 및 조건부 동적 가져오기를 사용하여 필요한 코드를 묶을 수 있으므로 매우 빠른 프로세스로 동작합니다.
esbuild란?
esbuild는 Go로 작성된 매우 빠른 JavaScript 번들러이며 Go의 병렬 처리와 소스 코드를 기계 코드로 변환하는 기능을 사용합니다. 그 기능은 다음과 같습니다.
- 방대한 플러그인 지원
- Minifier
- Typescript 및 JSX 지원
- ES2015 및 CommonJS 모두 지원
- Tree Shaking 기능
NestJS 설치 및 구성
이제 NestJS, Vite 및 esbuild를 살펴보았으니 Vite와 esbuild를 사용하도록 NestJS 앱을 구성하여 함께 구성하는 방법에 대해 알아보겠습니다. 이 과정에서 실제 시나리오, 주요 기능 및 주요 사용 사례에서 사용하는 방법에 대해서도 알아보겠습니다.
NestJS를 시작하려면 시작 코드를 생성하는 CLI를 설치하여 주세요. NestJS를 처음 접하는 사람들에게는 좋은 방법입니다.
또 다른 옵션은 GitHub에서 스타터 리포지토리를 복제하는 것입니다. 스타터 프로젝트의 JavaScript 버전을 설치하려면 이 리포지토리를 복제할 수 있지만 바닐라 JavaScript로 컴파일하려면 Babel이 필요합니다.
CLI를 설치해 보겠습니다. 다음 커맨드를 실행합니다.
npm i -g @nestjs/cliCLI 설치가 끝나면 새로운 Nest 프로젝트를 생성할 수 있습니다.
nest new nest_vite_esbuild_study이 커맨드를 실행한 결과는 다음과 같습니다.
nest new nest_vite_esbuild_study
⚡ We will scaffold your app in a few seconds..
CREATE nest_vite_esbuild_study/.eslintrc.js (665 bytes)
CREATE nest_vite_esbuild_study/.prettierrc (51 bytes)
CREATE nest_vite_esbuild_study/README.md (3340 bytes)
CREATE nest_vite_esbuild_study/nest-cli.json (118 bytes)
CREATE nest_vite_esbuild_study/package.json (2007 bytes)
CREATE nest_vite_esbuild_study/tsconfig.build.json (97 bytes)
CREATE nest_vite_esbuild_study/tsconfig.json (546 bytes)
CREATE nest_vite_esbuild_study/src/app.controller.spec.ts (617 bytes)
CREATE nest_vite_esbuild_study/src/app.controller.ts (274 bytes)
CREATE nest_vite_esbuild_study/src/app.module.ts (249 bytes)
CREATE nest_vite_esbuild_study/src/app.service.ts (142 bytes)
CREATE nest_vite_esbuild_study/src/main.ts (208 bytes)
CREATE nest_vite_esbuild_study/test/app.e2e-spec.ts (630 bytes)
CREATE nest_vite_esbuild_study/test/jest-e2e.json (183 bytes)
? Which package manager would you ❤️ to use? (Use arrow keys)
❯ npm
yarn
pnpm컴퓨터에 최신 Node.js 버전이 설치되어 있는지 확인하세요 (지원되지 않는 v13 제외).
위에서 볼 수 있듯이 프로젝트 디렉토리는 Nest의 핵심 파일, 종속성 및 기본 모듈로 채워져 있습니다. 단계에 따라 원하는 패키지 관리자를 선택합니다. 이 포스트에서는 npm을 사용합니다. 설치 종료 시의 폴더 구조는 아래와 같습니다.
다음 커맨드를 실행하여 디렉토리로 이동한 후 프로젝트를 실행해주세요.
cd nest_vite_esbuild_study
npm run start프로젝트 실행 시 아래와 같은 아웃풋을 확인할 수 있습니다.
> nest_vite_esbuild_demo@0.0.1 start /Users/jhyeo/study/nest_vite_esbuild_study
> nest start
[Nest] 93902 - 2022. 09. 16. 오전 11:42:19 LOG [NestFactory] Starting Nest application...
[Nest] 93902 - 2022. 09. 16. 오전 11:42:19 LOG [InstanceLoader] AppModule dependencies initialized +67ms
[Nest] 93902 - 2022. 09. 16. 오전 11:42:19 LOG [RoutesResolver] AppController {/}: +6ms
[Nest] 93902 - 2022. 09. 16. 오전 11:42:19 LOG [RouterExplorer] Mapped {/, GET} route +2ms
[Nest] 93902 - 2022. 09. 16. 오전 11:42:19 LOG [NestApplication] Nest application successfully started +2ms위의 대안으로, 아래 명령을 실행하여 파일 변경 사항을 감시하고, 빌드를 다시 컴파일하고, 개발 서버를 다시 로드하기 위해 개발 모드에서 애플리케이션을 시작할 수도 있습니다.
npm run start:dev그런 다음 브라우저에서 http://localhost:3000/으로 이동합니다. 또한 NestJS의 핵심 종속성을 수동으로 설치할 수도 있습니다. 이 설정에서 아래 명령을 실행하여 원하는 대로 프로젝트 구조를 설정할 수 있습니다.
npm i --save @nestjs/core @nestjs/common reflect-metadataNestJS 보일러플레이트 살펴보기
프로젝트 폴더 내의 src 디렉토리로 이동하면 생성된 기본 파일들을 볼 수 있습니다.
- 하나의 라우트로 컨트롤러를 나타내는 app.controller.ts 파일
- 컨트롤러를 슬림하게 유지하기 위해 메소드 또는 유틸리티 기능과 관련된 모든 것을 처리하는 app.service.ts 파일
- 응용 프로그램의 기본 모듈을 처리하는 app.module 파일(응용 프로그램 구성 요소를 구조화하는 방법)
- 컨트롤러 로직 테스트를 처리하는 app.controller.spec.ts 파일
- 애플리케이션의 진입점인 main.ts 파일은 핵심 NestFactory 기능을 사용하여 Nest 애플리케이션 인스턴스를 생성합니다.
NestJS는 개발자가 단일 모듈을 나타내는 소스 디렉토리 내부의 각 디렉토리를 사용하여 애플리케이션 아키텍처를 가능한 한 모듈화하도록 권장합니다. 각 Nest 애플리케이션에는 애플리케이션 그래프를 빌드하기 위한 시작점인 루트 모듈인 하나 이상의 모듈이 있어야 합니다.
예를 들어 다음 명령을 실행하여 새 모듈을 만들 수 있습니다.
nest g module product_study
위에서 볼 수 있듯이 product_study 모듈을 생성했습니다. 그런 다음 다른 필요한 파일(컨트롤러 및 서비스)을 만들고 product_study 모듈을 앱 기본 모듈로 가져올 수 있습니다.
NestJS 기본 사항 및 기능에 대한 자세한 내용은 테스트, 공급자, 수명 주기 이벤트, 데코레이터, 미들웨어, 모듈 등을 포함한 문서를 참조하여 프레임워크를 숙달할 수 있습니다. 다음으로 NestJS 애플리케이션에서 Vite 및 esbuild를 설정해 보겠습니다.
NestJS와 함께 vite와 esbuild 설치
Vite는 플러그인 기반이며 최적화되고 빠른 빌드 프로세스와 함께 제공되어 전반적인 개발자 생산성과 경험을 크게 향상시킬 수 있습니다. 또한 즉시 사용 가능한 TypeScript를 지원합니다.
이제 Vite를 NestJS 백엔드 앱에 통합해 보겠습니다. 핫 모듈 교체로 노드 개발 서버를 실행하는 플러그인을 통해 Vite를 설치할 것입니다.
dev dependency로 아래 명령을 실행합니다.
npm install vite vite-plugin-node -D
다음으로, 프로젝트 디렉토리의 루트에서 플러그인을 사용하도록 프로젝트를 구성하는 vite.config.ts 파일을 생성합니다. 아래에서 해당 파일의 내용을 확인해보겠습니다.
import { defineConfig } from 'vite';
import { VitePluginNode } from 'vite-plugin-node';
export default defineConfig({
// ...vite configures
server: {
// vite server configs, for details see \[vite doc\](https://vitejs.dev/config/#server-host)
port: 3000
},
plugins: [
...VitePluginNode({
// Nodejs native Request adapter
// currently this plugin support 'express', 'nest', 'koa' and 'fastify' out of box,
// you can also pass a function if you are using other frameworks, see Custom Adapter section
adapter: 'nest',
// tell the plugin where is your project entry
appPath: './src/main.ts',
// Optional, default: 'viteNodeApp'
// the name of named export of you app from the appPath file
exportName: 'viteNodeApp',
// Optional, default: 'esbuild'
// The TypeScript compiler you want to use
// by default this plugin is using vite default ts compiler which is esbuild
// 'swc' compiler is supported to use as well for frameworks
// like Nestjs (esbuild dont support 'emitDecoratorMetadata' yet)
// you need to INSTALL `@swc/core` as dev dependency if you want to use swc
tsCompiler: 'esbuild',
})
],
optimizeDeps: {
// Vite does not work well with optionnal dependencies,
// mark them as ignored for now
exclude: [
'@nestjs/microservices',
'@nestjs/websockets',
'cache-manager',
'class-transformer',
'class-validator',
'fastify-swagger',
],
},
});
다음으로 viteNodeApp(위의 Vite 구성 exportName 필드에 있음) 또는 위의 Vite 구성 파일에서 구성한 다른 이름을 내보내도록 앱 서버 파일(main.ts)의 진입점을 업데이트해야 합니다. 아래를 참조하십시오.
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
if (import.meta.env.PROD) {
async function bootstrap() {
const app = await NestFactory.create(AppModule);
await app.listen(3000);
}
bootstrap();
}
export const viteNodeApp = NestFactory.create(AppModule);
다음으로 package.json 파일에서 npm 스크립트를 추가하여 일반 npm run dev 명령으로 dev 서버를 실행할 수 있습니다.
"scripts": {
"dev": "vite"
}
앞서 언급했듯이 Vite는 기본 ESM을 통해 소스 파일을 제공하는 개발 서버와 함께 제공됩니다. 전체 설정 후 npm run dev 명령을 사용하여 Vite dev 서버로 앱을 실행할 수 있습니다.
모든 것이 여전히 예상대로 작동하는지 확인하려면 npm run test 명령으로 테스트를 실행하고 정상적으로 동작하는 지 확인해봅니다.
플러그인은 또한 Vite의 서버 측 렌더링 모드를 사용하여 앱을 빌드합니다. 이 기능을 사용하기 위해 package.json 파일에 빌드 스크립트를 추가할 수 있습니다(Nest 대신 Vite를 사용하여 앱을 빌드).
"scripts": {
"build": "vite build"
},vite build 명령은 코드를 Rollup과 번들로 제공하고 프로덕션 환경에 고도로 최적화된 자산을 내보냅니다. 전체 설정 후 npm run build 명령을 실행하여 Vite로 앱을 빌드하면 아래 출력을 볼 수 있습니다.
❯ npm run build
> nest_vite_esbuild_demo@0.0.1 prebuild /Users/jhyeo/study/nest_vite_esbuild_study
> rimraf dist
> nest_vite_esbuild_demo@0.0.1 build /Users/jhyeo/study/nest_vite_esbuild_study
> vite build
vite v3.1.1 building SSR bundle for production...
✓ 5 modules transformed.
dist/main.mjs 3.00 KiB앞서 언급했듯이 Vite는 esbuild를 사용하여 TypeScript를 JavaScript로 변환합니다. 이는 매우 빠른 변환 프로세스입니다. 일반 TypeScript 컴파일러보다 최대 20배 더 빠를 수 있으며 HMR 업데이트는 50ms 이내에 브라우저에 반영될 수 있습니다.
Vite 플러그인(vite-plugin-node)을 사용할 때의 장점 중 하나는 이 포스트에서는 esbuild만 사용했지만 esbuild 또는 swc를 사용하여 TypeScript 파일을 컴파일하도록 선택할 수 있다는 것입니다.
마치며
이 게시물에서 우리는 NestJS, Vite 및 esbuild를 사용하는 방법을 배웠습니다. 우리가 보았듯이 NestJS는 OOP, FP 및 FRP에 대한 철학으로 Node.js 애플리케이션을 구축하는 흥미롭고 새로운 접근 방식을 가지고 있습니다. 이러한 개선 사항은 모듈과 구성 요소를 설계하는 방법에 대해 고민할 필요가 없기 때문에 장기적으로 개발자 시간과 생산성을 크게 향상시킵니다. NestJS는 우리를 위해 그것을 해결하고 폴더당 하나의 모듈 패턴을 제안합니다. TypeScript의 기능을 사용하여 백엔드 코드를 작성할 수도 있습니다.
반면 Vite는 빌드 도구의 세계에서 완전히 새로운 수준에 있습니다. 인기 있는 JS 기반 번들러와 NodeJS 에코시스템의 빌드 도구가 성능 면에서 향상되어야 하는 시기에 오고 있습니다. Vite는 webpack 및 Parcel과 완전히 다른 접근 방식을 사용하여 코드를 네이티브 코드로 컴파일합니다. 우리가 배운 것처럼 번들링을 위해 브라우저와 기본 ESM을 사용합니다.
결국 우리는 이러한 멋진 기술을 결합하여 다음 NestJS 프로젝트의 시작점이 될 수 있는 간단한 상용 백엔드를 구축했습니다.
읽어주셔서 감사합니다.
참고
https://blog.logrocket.com/getting-started-with-nestjs-vite-esbuild
