NestJS 및 React를 사용하여 새 프로젝트를 부트스트랩하는 방법

NestJS는 서버 측 애플리케이션 구축을 위한 Node.js의 효율적이고 확장 가능한 프레임워크입니다. 그것은 빠르게 인기를 얻고 있으며 현재 내가 가장 좋아하는 서버 측 프레임워크입니다(Rails는 항상 내 마음 속에 있을 것입니다).



시작하기 전에 Node.js와 npm을 설치해야 합니다. 아직 패키지 관리자가 없는 경우 nvm과 같은 패키지 관리자를 사용하는 것이 좋습니다.


전체 코드베이스가 동일한 언어로 될 수 있기 때문에 Nest를 React 프런트엔드와 페어링하는 것이 좋습니다. 백엔드를 위한 Ruby 개발자와 프런트 엔드를 위한 PHP 개발자를 찾을 필요가 없습니다. 타자기 아기!

어쨌든 NestJS 및 React 사용을 시작하는 것은 매우 간단하며 단계별로 안내해 드리겠습니다.

참고: Nest는 Typescript로 작성되었으므로 아직 Javascript에서 잘 전환하지 않은 경우--

설정

먼저 프런트엔드와 백엔드에 대해 별도의 폴더를 생성하려고 합니다.

$ mkdir frontend && mkdir backend

이제 새로운 Nest 프로젝트를 초기화하겠습니다. 아직 다운로드하지 않았다면 @nestjs/cli를 다운로드해야 합니다. 이것을하기 위해:

$ npm i -g @nestjs/cli
$ nest new backend

엄청난! 이제 프런트엔드의 경우 실제로 Create React App을 사용할 것입니다. 단일 페이지 React 애플리케이션을 생성하기 위해 공식적으로 지원되는 방법입니다. 구성이 없는 최신 빌드 설정을 제공합니다.

$ npx create-react-app frontend --template typescript

대박! 이제 좋은 시작을 위해 모든 것을 다운로드했습니다.

개발 서버

다음을 사용하여 백엔드 개발을 시작할 수 있습니다.

$ npm start:dev

다음을 포함하는 프런트엔드 개발 서버:

$ npm start

물론 해당 디렉토리에 있는지 확인하십시오.

테스트

아직 앱 테스트를 설정하지 않았다면 지금이 적기입니다. 기본적으로 Nest는 Jest을 사용합니다. Jest가 Typescript를 트랜스파일하려면 ts-jest를 설치해야 합니다.

다음과 같이 할 수 있습니다.

$ npm i -D @nestjs/testing ts-jest @types/jest

문제가 있는 경우 Jest가 변환할 파일을 알 수 있도록 구성 파일을 만들어야 할 수 있습니다.

$ npx ts-jest config:init

그리고 그게 다야! 문제가 있는 경우 여기에서 공식 문서를 확인하세요.

NestJS
Create-React-App
Jest
ts-jest

그리고 항상 그렇듯이 원하는 경우 할 수 있습니다clone the repo.

다음 블로그 게시물에서는 아마도 또 다른 흥미로운 스택을 설정할 것입니다! 이 물건은 확실히 하나의 소스에 있는 것이 좋습니다. 이것이 도움이 되길 바라며 해피 코딩!!!