아주 쉽게 NestJS 백엔드 서버 만들어보기

자바의 스프링, 파이썬의 장고, 자바스크립트의 익스프레스

이 세가지 프레임워크들은 모두 각 언어의 백엔드 프레임워크입니다.

그리고 NestJS도 익스프레스와 같이

자바스크립트의 백엔드 프레임워크입니다.

 

NestJS에 대해서는 더 소개할 내용들이 많지만,

간단하게 백엔드 서버를 하나 만들어보고 난 뒤에

다시 이야기해보도록 하겠습니다.

---

NestJS를 사용하기 위해서는 우선 NodeJS가 설치되어있어야 합니다.

https://nodejs.org/ko

Node.js

위 링크에서 NodeJS LTS 버전을 다운받아주세요.

여기서 왼쪽 것을 다운받으면 됩니다.

최신버전을 다운받으셔도 되긴 하지만,

프로그램을 안정적으로 구동하려면

LTS 버전을 다운받으시는게 좋습니다.

npm i -g nest

자 이제 위 명령어를 터미널에 입력해서 NestJS를 설치해줍니다.

nest new 프로젝트명

다음으로 위 명령어를 입력해 NestJS 프로젝트를 셋팅해줍니다.

프로젝트를 셋팅할 때 한가지 선택지가 등장하는데

어떤 패키지 매니저를 사용할 지 고르라는 뜻입니다.

가장 보편적인 npm을 선택해주시면 됩니다.

---

셋팅이 끝나면 아까 지정해준 프로젝트명으로 된 폴더에

src 폴더와 기타 여러 파일들이 생성됩니다.

우리가 가장 눈여겨볼 폴더는 src 폴더의 파일들입니다.

 

controller.ts는 NestJS 서버에 요청이 들어오면 그걸 처리해주는 역할을 합니다.

module.ts과 main.ts은 서버의 전반적인 셋팅을 담당합니다.

마지막으로 service.ts는 컨트롤러에 의해 제어되며 실질적인 비즈니스 로직을 담당합니다.

 

자바의 스프링이랑 좀 비슷하죠?

NestJS가 스프링을 참고하여 만들어졌기 때문입니다.

---

자 이제 NestJS 서버를 실행해보겠습니다.

npm run start:dev

NestJS 프로젝트 폴더에 진입하신 후 위 명령어를 입력해주세요.

명령어를 실행할때 주의해야할 점이 있는데,

반드시 여러분이 생성한 프로젝트 폴더에서 명령어를 실행해주셔야됩니다.

저는 nest-back이라는 이름으로 프로젝트를 생성했기 때문에

nest-back이라는 폴더에서 명령어를 실행했습니다.

npm run start

참고로 위 명령어로도 서버를 실행할 수 있지만

뒤에 :dev를 붙이면 코드 수정사항을 실시간으로 서버에 반영할 수 있습니다.

명령어가 정상적으로 실행되면 위와 같은 화면이 터미널에 뜹니다.

 

서버가 무사히 실행되었다면

인터넷 브라우저 주소창에 localhost:3000을 입력해줍니다.

그럼 브라우저 화면에 Hello World! 라는 문장이 보입니다.

---

자 이제 코드를 수정하면서 NestJS 서버의 구조를 살펴보겠습니다.

우선 src/app.service.ts 파일을 열어주세요.

 

service.ts 파일에는 실제 비즈니스 로직이 담겨있다고 했습니다.

우리는 여기서 굳이 비즈니스 로직이라는 단어에 대해 알 필요는 없지만

화면에 Hello World!를 보여주는 코드가

service.ts파일에 담겨있다는 사실은 알고 있어야 합니다.

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World!';
  }
}

여기서 return을 주목해주세요.

이 코드에서는 getHello()라는 함수가 실행되면

Hello World!라는 문장을 return합니다.

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return '헬로 월드!';
  }
}

이 문장을 조금 수정하고 저장해보았습니다.

브라우저를 새로고침하면 Hello World!라는 문장이 있던 자리에

헬로 월드! 라는 문장이 표시된 것을 확인할 수 있습니다.

 

이처럼 service.ts 파일의 코드들은 실제로 우리가 접하게 되는 데이터를

가공하고 편집하는 역할을 합니다.

---

이제 controller.ts 파일을 살펴보겠습니다.

컨트롤러는 요청을 처리하는 역할을 합니다.

import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

여러분의 controller.ts 파일을 열어보면 위와 같은 코드가 있습니다.

먼저 상단에 service.ts 파일이 import 되어 있는 것을 확인할 수 있습니다.

컨트롤러는 요청에 따라 service의 비즈니스 로직을 실행해야 하므로

저렇게 service.ts 파일을 import 하게 됩니다.

 

그리고 @Get() 밑을 살펴보시면 아까 service.ts 파일에서 봤던

getHello() 함수를 확인하실 수 있습니다.

 

컨트롤러에서는 Get요청이 들어오면 service.ts 파일에 있는 getHello() 함수를 실행하는 것 같습니다.

자 그럼 service.ts에서 다른 함수를 하나 더 만들어서 컨트롤러에 의해 실행되도록 만들어볼까요?

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return '헬로 월드!';
  }

  getBye(): string {
    return '바이 월드!';
  }
}

service.ts 파일에서 getBye()라는 함수를 하나 만들어주었습니다.

이 함수는 바이 월드!라는 문장을 return 해줍니다.

import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  // @Get()
  // getHello(): string {
  //   return this.appService.getHello();
  // }
  @Get()
  getBye(): string {
    return this.appService.getBye();
  }
}

이번엔 controller.ts 파일의 코드를 수정해줍니다.

기존의 getHello()함수를 호출하는 코드를 주석처리하고

getBye()함수를 호출하는 코드를 작성해주었습니다.

 

this.appService.getBye()를 반환하도록 되어있는데

이 코드가 service.ts파일에 있는 getBye()함수의 return 값을

controller에서 return한다는 의미입니다.

변경된 코드를 저장하고 다시 브라우저를 새로고침 하면

이렇게 바이 월드!라는 문장이 표시됩니다.

---

여기까지 가장 핵심이 되는 service와 controller에 대해 알아보았으니

이번엔 module.ts 파일을 살펴보겠습니다.

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

module.ts 파일에서는 contoller.ts 파일과 service.ts파일이 import 된 것을 확인할 수 있습니다.

그리고 @Module부분을 보시면

controllers에는 AppController가, providers에는 AppService가 있습니다.

AppController와 AppService는 각각 controller.ts 파일과 service.ts 파일을 import 하면서 붙여준 이름입니다.

즉, @Module에서는 내가 사용중인 컨트롤러와 서비스를 명시해줍니다.

---

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

마지막으로 main.ts파일입니다.

위 코드에서 app.listen(3000) 부분을 보시면

우리가 NestJS 서버에 접근할 수 있는 포트 번호를 확인하실 수 있습니다.

괄호 안의 3000을 다른 숫자로 바꾸면

그 숫자가 포트번호가 됩니다.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(8000);
}
bootstrap();

자 이렇게 포트 번호를 8000번으로 변경하면

주소를 localhost:8000으로 변경해야 NestJS 서버에 접근할 수 있습니다.