시즌 2 #7. 기초부터 따라하는 Nest.js 2 : 간단한 API 구현하기

 

https://suloth.tistory.com/201

시즌 2 #6. 기초부터 따라하는 Nest.js 2 : Nest.js 프로젝트 생성 & 구조 설명

 

지난 포스팅에서는 Nest.js 프로젝트를 생성하는 방법과 구조에 대해서 간단하게 배웠습니다.

이번 포스팅에서는 정말 간단한 API를 한 번 구현해보겠습니다.

 

---

과제 정답

---

지난번 과제는 바로 "nest g 명령을 사용하지 않고 프로젝트 폴더를 다시 만드는 것" 이었습니다. 한땀 한땀 손으로 코딩하면 됩니다.

 

일단, 기본적으로 user, comment, post의 모듈, 컨트롤러, 서비스의 형식은 다음과 같습니다.

 

Module

// user.module.ts
import { Module } from '@nestjs/common';
import { UserService } from './user.service';
import { UserController } from './user.controller';

@Module({
  controllers: [UserController],
  providers: [UserService],
})
export class UserModule {}

 

Controller

// user.controller.ts
import { Controller } from '@nestjs/common';
import { UserService } from './user.service';

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}
}

 

Service

// user.service.ts
import { Injectable } from '@nestjs/common';

@Injectable()
export class UserService {}

 

위의 예는 user만 적었지만 post, comment도 동일한 형식으로 작성해주시면 됩니다.

 

그리고 가장 중요한 AppModule입니다.

// app.module.ts
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { UserModule } from './res/user/user.module';
import { PostModule } from './res/post/post.module';
import { CommentModule } from './res/comment/comment.module';

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

 

 

그림으로 표현하자면 이렇습니다.

 

 

AppModule이 Nest.js 서버가 시작되는 지점이라고 했죠? AppModule에 UserModule, PostModule, CommentModule을 넣어줌으로서 Nest.js 서버가 User, Post, Comment의 컨트롤러를 통해 서비스에 접근할 수 있게 된겁니다.

---

간단한 API 제작

---

API란?

이제 본격적으로 API를 제작해보도록 하겠습니다.

API라고 하면 무엇인지 잘 모르시는 분들도 있으실 텐데, API는 Application Programming Interface의 줄임말입니다. 직역하면 어플리케이션을 프로그래밍하기 위한 인터페이스라는 뜻으로 내가 서비스(어플리케이션)를 개발할 때, 다른 사람이 미리 만들어둔 기능(서비스 코드)을 사용하고 싶다면, 미리 정의해둔 API를 이용하여 개발을 할 수 있습니다.   

쉽게 말하면, 백엔드에서 서비스 코드를 작성하죠? 그러면 프론트엔드에서 해당 코드를 미리 정의된 약속에 따라, 정해진 HTTP 메소드, url 등의 형식을 지정하여 요청을 보내면 백엔드에서 미리 만들어진 서비스를 이용할 수 있습니다. 그리고 이렇게 백엔드에서 미리 만들어진 서비스를 API라고 합니다.

API는 프론트엔드-백엔드 사이에서만 쓰이는 용어는 아니기 때문에 개념만 이해하면 좋을 것 같습니다. 구글에 검색하면 자세한 설명이 많으니 참고해주세요.

 

 

API 제작

/user 경로로 GET 요청이 들어오면, "User Main Page"라는 문자열을 보내주는 서비스를 만들어보도록 합시다.

 

먼저, /user라는 경로로 요청을 보내면 서비스를 제공해야하기 때문에, UserController에 함수를 작성해줘야겠죠?

 

UserController

// user.controller.ts
import { Controller, Get } from '@nestjs/common';
import { UserService } from './user.service';

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Get()
  async getUserMainPage(): Promise<string> {
    const res = await this.userService.getUserMainPage();

    return res;
  }
}

 

@Get() - Get이라는 데코레이터를 사용해서 아래의 async getUserMainPage 함수를 꾸며줍니다. 파라미터를 입력해서 @Controller의 인자인 user에 이어서 경로를 설정해줄 수 있습니다. 즉, @Get("/hello") 라고 작성하면, /user/hello로 GET요청을 보내면 함수가 실행되도록 만들어줍니다. 데코레이터가 무엇인지 아직은 자세히 알 필요는 없습니다. "이렇게 작성하면 이런식으로 동작하는구나"만 알아갑시다.

 

타입스크립트의 함수의 형태는 다음과 같습니다.

함수명(인자): 리턴타입 {}

 

따라서 getuserMainPage의 리턴타입은 Promise<string>입니다. Promise는 비동기의 개념에서 나오는 용어인데, 함수 앞에 적은 async라는 키워드와 관련이 있습니다. 일단은! 외워둡시다. 함수 앞에 async를 적고, 리턴 타입에는 Promise<타입> 을 적는구나~ 라고 생각합시다.

 

그리고 getUserMainPage 함수에서는 userService의 getUserMainPage라는 함수를 실행시켜서 리턴하는 코드를 작성해주었습니다.

 

하지만 우리는 UserService에 getUserMainPage라는 함수를 아직 만들어두지 않았으므로 빨간줄이 뜨는 것을 볼 수 있습니다. 그러면 이제 UserService로 가서 함수를 작성해봅시다.

// user.service.ts
import { Injectable } from '@nestjs/common';

@Injectable()
export class UserService {
  async getUserMainPage(): Promise<string> {
    return 'User Main Page';
  }
}

 

위와 같이 작성해주면 됩니다.

 

그러면 이제 UserController에서 오류(빨간줄)가 없어진 것을 볼 수 있습니다.

User Controller의 함수

 

 

자, 그러면 이제 Nest.js 서버를 실행시켜봅시다.

터미널로 가서 Nest.js 프로젝트 폴더로 이동해줍시다.

그리고 터미널에서 아래 명령어를 입력하면 서버가 실행됩니다.

npm start

 

이제 브라우저를 열고 주소창에 http://127.0.0.1:3000/user 를 입력하면 다음과 같은 화면이 뜨는 것을 볼 수 있습니다.

 

이런식으로 말이죠!

백엔드는 데이터만 넘겨줄뿐, 브라우저로 넘어간 데이터를 프론트엔드가 가공해서 이쁘게 보이도록 처리해주는 일을 합니다.

저 User Main Page라는 문자열도 프론트엔드가 받아서 이쁘게 꾸며줄 수 있습니다. 지금은, 프론트가 없어서 문자열이 그대로 출력된 겁니다.

 

 

그리고, 가장 중요하게 확인해야할 부분은 UserService와 UserController가 UserModule에 등록되어있는지 확인하고, UserModule이 AppModule에 등록되어있는지 확인해야합니다.

그래야 Nest.js 서버가 정상적으로 실행되어 UserModule을 인식하고 그 안에 있는 UserController와 UserService를 인식할 수 있기 때문입니다.

UserController가 controllers에 등록되어 있는지 확인

UserService가 providers에 등록되어 있는지 확인

 

UserModule이 AppModule의 imports에 등록되어 있는지 확인

 

---

과제

---

 

이번 포스팅에서 /user 경로로 GET 요청을 보내면 User Main Page라는 문자열을 보내도록 API를 작성했습니다.

HTTP Method에는 여러가지 메소드가 있습니다. GET 말고도, POST, PUT, PATCH, DELETE 등 여러 메소드들이 많죠.

 

과제 1.

이번에는 /post 경로로 POST 요청을 보내면 Post Main Page라는 문자열을 보내도록 API를 작성해보도록 합시다.

POST는 create라는 의미를 가지고 있지만, 꼭 create를 하도록 로직을 안 짜도 됩니다.

힌트를 드리자면, Get 요청일 때는 @Get 데코레이터를 사용했으니... Post 요청일 때는 @Post 데코레이터를 사용해야겠죠?

 

시험할 때는 Postman 프로그램을 이용해서 다음과 같이 요청을 날리면 됩니다!

 

과제 2.

/comment/main 경로로 GET 요청을 보내면 Comment Main Page라는 문자열을 보내도록 API를 작성해봅시다.

 

위의 두 과제를 수행하실 수 있다면, 이번 강의에 대한 내용을 잘 이해한겁니다! 그럼 화이팅!