localhost:3000시 Hello World!는 어디서 오는걸까?

※ 본 내용은 노마드코더 'NestJS로 API만들기'를 정리한 내용입니다. 

 

일단 결론부터 보죠. 

NestJS 프로젝트를 만들기 위해서 nest new 프로젝트 명령어를 통하여 NestJS 프로젝트를 하나 생성했습니다. 

아직 코드를 추가한 것은 없고, 디폴트(기본) 내용으로만 npm run start:dev를 통해 실행결과를 알아보았습니다. 

localhost:3000번은 왜 쓰고, 왜 브라우저에 결과값으로 Hello World!가 보이는 것인지 하나하나 파헤쳐보겠습니다. 

---

[main.ts] 

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

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

bootstrap : 함수 이름인데, 다른 이름으로 바꾸어서 사용해도 무방합니다. 

app : NestFactory의 create 메소드를 이용하여 Appmodule을 만들고, 그 app은 3000번 port를 리스닝하고 있습니다. 

이로써 localhost:3000에서 Nest.js 프로젝트의 실행결과를 볼 수 있는 것입니다. 

 

추가로, NestJS는 Node.js 서버 프레임워크를 기반으로 하고 있기 때문에 Node.js와 같이 3000번 port로 실행결과가 브라우저에 나타납니다. 

 

여기서 AppModule이 어디서 선언된건지 알아보기 위해 

AppModule에서 마우스 우클릭을 통해 Go to Definition을 클릭해서 AppModule이 선언된 곳으로 갑니다. 

---

[app.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 {}

AppModule이 빈 클래스 형태로 export 되었습니다. 여기에 AppModule이 작성되어 있었군요. 

 

@Module 데커레이터 

데커레이터는 Spring에서 annotation과 같은 기능을 합니다. 

그렇다면, Hello World!가 화면에 보여지려면 REST API중에서 어떤 기능을 써야 할까요? 

제 생각에는, GET 요청을 통해 localhost:3000번일때 Hello World!를 브라우저 화면에 뿌려주는 것 같아 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();
  }
}

바로 REST API에서 GET(데이터를 읽어오는) 요청을 처리하는 곳이 controller였죠. 

controller에도 @Controller 데커레이터가 쓰였으며, 그 안에 @Get()요청으로 getHello()라는 메소드가 쓰여있네요. 

그 안에서 string 형태로 getHello()를 반환하라고 하는데, appService에 getHello()라는 메소드가 있나봐요! 

 

다시 appService에 마우스 우클릭을 하고 Go to Type Definition으로 이동합니다. 

 

 

---

[app.services.ts] 

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

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

@Injectable() 데커레이터로 선언된 AppService 클래스 내부에는 

getHello() 메소드가 자리잡고 있습니다. 

 

그러고 Hello World!라는 string 형태의 문구를 return 하라는 명령이 있네요. 

이렇게 localhost:3000번에 Hello World!라는 한 줄의 코드를 브라우저에 보여주기까지 이렇게 많은 과정을 거쳐왔네요. 

---

정리하자면, 

localhost:3000번의 Hello World!가 나오기까지는 

1) main.ts

2) app.controller.ts 

3) app.service.ts 

4) getHello()의 4가지 과정을 거쳤습니다. 

 

이렇게 하나하나씩 추적해보는 것도 큰 도움이 되는 것 같네요 :)