[ Nest JS ] 기본 프로젝트에서 Nest 로직 흐름
🌈 프로그래밍/Nest JS

[ Nest JS ] 기본 프로젝트에서 Nest 로직 흐름

반응형

 

안녕하세요? 수구리입니다.

지난 포스팅에서는 Nest JS가 무엇인지, 어떤 특징을 가지는지, 어떻게 프로젝트를 생성하고 또 Nest가 기본적으로 만들어주는 파일들과 실행까지 알아보았었죠?

지난 포스팅을 안 보셨다면 보고 오시는 것을 추천드립니다.

2021.10.13 - [프로그래밍/Nest JS] - [ Nest JS 소개 ] Nest JS 프로젝트 시작하기

 

[ Nest JS 소개 ] Nest JS 프로젝트 시작하기

안녕하세요? 수구리입니다. 한창 Nest JS에 대해서 공부를 했었는데 차근차근 복습할 겸 정리를 해보도록 하겠습니다. 아래에는 Nest의 공식문서가 있습니다. 공식문서를 기반으로 정리를 한 내용

tasddc.tistory.com

 

이번 포스팅에서는 Nest가 무엇인지는 알았으니.. "localhost:3000/"으로 접속했을 때,

어떤 흐름, 로직에 의해서 브라우저에 출력이 되어지는지 기본 프로젝트에 대한 흐름을 Node와 비교해 가면서 알아보도록 하겠습니다.

우선, Nest의 기본 로직 흐름에 대해서 살펴보도록 하겠습니다.

 

[ Nest의 기본 로직 흐름 ]

초기 nest 프로젝트에서 hello world가 출력되어지는 과정

 

우선 간단하게 흐름도를 순서대로 표시해 놓았습니다.

크게 사람 모양의 클라이언트, 그리고 네모로 테두리를 친 부분이 서버단입니다.

 

 

  1. 우선, localhost:3000/으로 접속을 한다는 것은, Client가 Server 측에 get 요청(req)을 보낸다는 것을 의미합니다.
  2. 그리고는 Nest의 Controller가 이 요청을 받아들여 이 요청이 어떤 요청인지(get?, post?..) 판단합니다.
  3. 이후, Controller는 Service에게 Client에게 받은 요청을 처리해달라고 다시 한번 요청을 보냅니다.
  4. 그러면 Service 측에서 Controller에게 받은 요청을 적절하게 처리하여 return(res) 해줍니다.
  5. Service측에서 받은 응답을 Controller는 Client에 대한 응답을 얻을 수 있게 되고,
  6. 이 응답(res)을 최종적으로 Client에게 보내주는 것입니다.

 

보통 주소 뒤에는 '/'(슬래시)가 생략되어서 보내집니다.

그래서 초기에 localhost:3000의 맨 뒤에는 '/'(슬래시)가 있는 것이죠.

그럼 Controller에서 get('/') 요청에 대한 처리를 하기 위해서는 @Get( '/' ) 부분이 있어야겠죠?

보통 여기서 괄호 안의 '/'는 생략합니다. 

 

 

app.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();
  }
}

실제 프로젝트 코드의 컨트롤러 부분입니다.

'@'가 붙은 친구들은 데코레이터라고 합니다. 이는 나중에 추후 자세히 설명할 예정.

아무튼 AppController의 클래스 내부에는 @Get()이라는 컨트롤러가 존재하고 이는 클라이언트로부터 Get('/') 요청을 처리하는 친구라고 생각하시면 됩니다.

Typescript이므로 이 친구가 어떤 Type(자료형)의 반환을 해주는지도 나와있고,

실제로 하는 일은 서비스를 호출하고 리턴해주는 그런 구조입니다. 컨트롤러는 생각보다 간단하죠?

정리하자면, 컨트롤러는..

클라이언트에게 받은 요청을 적절히 판단 후, 서비스에게 " ~ 요청 왔으니 해줘! 그리고 나한테 알려줘~! "라고 한 뒤, 받은 응답을 다시 클라이언트에게 보내주는 역할이라고 생각하시면 됩니다.

 

 

app.service.ts

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

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

다음은 서비스 부분의 전체 코드입니다.

방금 getHello()라는 함수를 컨트롤러가 요청한 부분이 있었죠? 그 함수에 대한 로직이 이 서비스 측에 있다고 보시면 됩니다. 마찬가지로 어떤 Type을 반환하는지에 대한 정보가 있고 문자열로 'Hello World!'를 리턴하는군요.

정리하면 서비스는..

컨트롤러에게 받은 어떤 요청 즉, 클라이언트에게 받은 요청을 서비스 로직을 수행하고 해당 응답을 컨트롤러에게 응답을 보내주는 역할이라고 생각하시면 됩니다.

 

 

이 흐름은 Node를 공부해보셨거나, 직접 사용해보셨다면 매우 흡사하다는 것을 알 수 있습니다.

왜냐하면 Nest는 Node를 기반으로 실행되기 때문입니다!

Node에서 route라는 폴더에 어떤 요청을 이리로, 무슨 요청은 저리로 보내는 작업을 해보셨으면 이 Nest의 컨트롤러와 서비스에 대한 내용은 쉽게 이해가 갔으리라고 생각합니다.

이상으로 오늘의 포스팅을 마치도록 하겠습니다.

질문은 대환영입니다! 감사합니다.

반응형