NestJS Axios사용하기 (POST)

안녕하세요. 알렉스 입니다. 이번에는 NestJS을 이용하여 restAPI요청(POST)을 해보도록 하겠습니다. 

이전글 : NestJS Axios사용하기 (GET)

그런데 NestJS을 이용하여 GET요청을 하기전 Swegger와 Global Validation Pipe를 이용할 것입니다. 관련 자료는 아래 링크를 참고해 주시기 바랍니다.


링크 : NestJS http로 들어오는 파라메타, 쿼리, Body값들에 대해서 Global Validation Pipe 만들기

링크 : NestJS에 Swagger(스웨거) Document(문서)를 적용



이제 Axios을 이용하여 POST요청을 하겠습니다. 이거에 대한 공식 문서는 아래 링크를 참고하셔도 되고 아니면 이 블로그를 따라하시고 진행하셔도 됩니다.


링크 : HTTP Module


일단 NestJS에서 axios을 사용하기 위해서는 관련 npm을 설치해야 합니다.

npm i --save @nestjs/axios


사진1) 폴더 구조

이제 설치후 사진1과 같이 파일을 구성해 줍니다. 실제 POST요청을 할 폴더는 'rest-api'

입니다. 생성을 완료하시면 아래코드와 같이 작성을 하시면 됩니다.

// 경로 : src/app.module.ts
import { HttpModule } from '@nestjs/axios';
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { RestApiModule } from './rest-api/rest-api.module'; // 미리 코딩이 되어 있습니다.

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


app.module.ts에서 HttpModule, RestApiModule을 import해줍니다. HttpModule은 Get요청을 보내기 위한 모듈이고 RestApiModule은 실제 Get요청 수행할 API를 만드는 것입니다.


// 경로 : src/rest-api.module.ts
import { HttpModule } from '@nestjs/axios';
import { Module } from '@nestjs/common';
import { RestApiController } from './rest-api.controller';
import { RestApiService } from './rest-api.service';

@Module({
imports: [HttpModule],
controllers: [RestApiController],
providers: [RestApiService],
})
export class RestApiModule {}


위의 코드에서도 'HttpModule'를 추가해 줍니다.


// 경로 : src/rest-api.service.ts
import { HttpService } from '@nestjs/axios';
import { Injectable } from '@nestjs/common';
import { AxiosResponse } from 'axios';
import { map, Observable } from 'rxjs';
import { GetRestApiDto } from './dto/get-rest-api.dto';

@Injectable()
export class RestApiService {
constructor(private httpService: HttpService) {}

postRequest(dto: GetRestApiDto): Observable<AxiosResponse<Body>> {
// dto는 비어있기 때문에 Swagger에서 Object를 임의로 넣으면 됩니다.
console.log('Start Post request');
return this.httpService
.post('http://localhost:4000', {
...dto,
})
.pipe(
map((res) => {
console.log('response : ', res);
console.log('response(data) : ', res.data);
return res.data;
}),
);
}
}


위의 코드에서는 임시로 만든 서버(http://localhost:4000)로 POST요청을 보냈습니다. 그리고 그에 따른 응답을 res.data로 받도록 하였습니다.


// 경로 : src/rest-api.controller.ts
import { Body, Controller, Post } from '@nestjs/common';
import { ApiTags } from '@nestjs/swagger';
import { GetRestApiDto } from './dto/get-rest-api.dto';
import { RestApiService } from './rest-api.service';
@ApiTags('Axios')
@Controller('rest-api')
export class RestApiController {
constructor(private readonly restApiService: RestApiService) {}

@Post()
create(@Body() createRestApiDto: GetRestApiDto) {
return this.restApiService.postRequest(createRestApiDto);
}
}


이제 컨트롤을 만들고 'npm run start'을 터미널로 실행한 후 'http://localhost300/api-docs' url로 접속히면 Swagger문서를 볼수 있습니다.


사진2) Swagger화면


사진3) Swagger에서 Post요청


사진2,3과 같이 화면이 출력되면 이제 Post요청을 보낼수 있게 되는 것입니다. 사진2에서 'Try it out'을 누르고 생성된 버튼 'Exceute'버튼을 누르면 해당 서버로 Post요청을 보내게 됩니다.


사진4) Swagger로 Post요청 결과1

사진4에서 Body에 임의의 Object { "number" : 12345 }를 넣었고  Post요청을 하였습니다.

사진5) Swagger로 Post요청 결과2

사진 4,5와 같이 Post요청의 응답결과는 'You send me a Post request!' 와 Body값 입니다. 이는 제가 임시적으로 만든 서버이므로 다른서버에 Post요청을 할시 다른 결과가 나올수 있습니다.


 위 예제 GitHub 링크 및 Branch : postRequest





댓글

댓글 쓰기

이 블로그의 인기 게시물

Lesson 12_1 프로퍼티 노드(Property Node)

이미지
안녕하세요. 오늘은 프로퍼티 노드에 대해서 설명을 드리겠습니다. 프로퍼티 노드를 사용하는 방법은 2가지가 있는데 참조를 이용하는 방법과 직접 프로퍼티 노드를 생성해서 사용하는 방법이 있습니다. 오늘은 프로퍼티노드만을 이용해서 카운트를 올리는 프로그램을 만들도록 하겠습니다. 그림1) 버튼생성후 기계적동작 변경 새로운 VI를 생성후 그림 1과 같은 버튼을 설정 합니다. 스위치의 기계적 상태는 '놓을때 위치'로 설정을 합니다. 이후 'Start', 'Hold', 'Reset', 'Stop' 버튼을 만들어 같은 기계적 상태로 놓습니다. 그림2) 숫자형 컨트롤 생성 그림3) 숫자형 컨트롤 글짜크기 변경 그림4) 숫자형 컨트롤의 형을 변경 그림2~4까지 숫자형 컨트롤을 만들고 프런트 패널에 배치합니다. 그림5) 프런트패널 완성 그림6) 숫자형 컨트롤을 인디게이터로 변경 숫자형 인디게이터는 Count에만 사용하기 때문에 블록 다이어그램에서 인디게이터로 변환합니다. 그림7) 플랫 시퀸스, While, 이벤트 케이스 생성후 프로퍼티 생성그림7과 같이 플랫 시퀸스안에 케이스를 2개를 만듭니다. 2번째 케이스에 While루프와 그안에 이벤트 케이스를 만들어 줍니다. 첫번째 케이스에 각 버튼을 초기화 해야 하기 때문에 그림7에서 블록다이어그램에 있는 버튼을 우클릭후 프로퍼티 노드에 들어가서 값을 선택합니다. 그림8) 프로퍼티에 값과비활성화 포함 프로퍼티노드는 원하는 많큼 층을 만들수가 있습니다. 마우스로 프로퍼티노드를 아래로 끌면 다른 속성의 프로퍼티노드가 생성됩니다. 그리고 초기화하는 케이스에 비활성화를 선택해 줍니다. 그림9) 초기화 케이스구조 그림9는 프로그램이 처음 시작될때 버튼들을 초기화 해줍니다. 처음 시작되면 'Start', 'Stop' 버튼을 제외하고 모두 비활...
자세한 내용 보기

Lesson 12_2 참조를 이용한 프로퍼티노드(Property Node)

이미지
안녕하세요 알렉스 입니다. 오늘은 저번 글과 마찬가지로 프로퍼티 노드에 대해서 설명해 드리겠습니다. 저번에는 프로퍼티 노드 자체를 생성해서 사용했는데 이번에는 참조를 이용해서 만들어보도록 하겠습니다. 제가 참조를 이용해서 프로퍼티 노드를 사용하는 이유는 SubVI때분 입니다. 사실 글로벌 변수로 각 VI들이 데이터를 주고 받을수 있지만 참조를 통해서도 데이터를 교활할수 있습니다. 그럼 먼저 프로젝트를 생성하도록 하겠습니다. 그림1) 프로젝트 생성 그림2) 프로젝트에 Main.vi 생성 먼저 프로젝트를 생성한 후에 Main.vi를 생성해 줍니다. Main.vi는 프로젝트에서 우선적으로 동작될 프로그램 입니다. 그림3) 프런트 패널 디자인 그림4) Stop버튼을 놓을때 스위치로 변경 프런트 패널을 보시면 LED와 Stop버튼만 있습니다. 그림3과 같이 배치 해 주시고 그림4에서 Stop의 기계적 동작을 '놓을때 스위치'로 변경 하면 됩니다. 그림5) Stop버튼에 참조 생성 이제 불리언과 Stop버튼의 참조를 생성해 줍니다. 컨트롤 패널 또는 블록다이어 그램에서 마우스로 해당 컨트롤 또는 변수를 우클릭 한 후에 생성에 들어가면 참조를 생성할수 있습니다. 그림6) 프로퍼티노드 위치 저번 글과 달리 이번에는 참조를 이용한 프로퍼티 노드를 생성하는 방법 입니다. 블록다이어 그램에서 그림6에 위치함 프로퍼티 노드는 생성하시면 됩니다. 프로퍼티 노드 왼쪽에 참조값이 들어가면 기존의 프로퍼티 노드처럼 사용이 가능합니다. 그림7) 프로퍼티노드 속성 선택 프로퍼티 노드를 참조와 연결한 수에 좌클릭을 하시면 여러 속성이 나오는데 지금은 값을 선택하도록 하겠습니다. 그림8) 프로퍼티 노드를 쓰기로 변경 처음 플랫 케이스는 초기화이기 때문에 Stop의 프로퍼티노드를 False로 해야 합니다. 따라서 쓰기로 변경해 줍니다. 그림9) 프로퍼티 노드를 쓰기상태 ...
자세한 내용 보기

Nest JS란? 개념설명

이미지
Nest JS을 말하기 전 Node JS을 먼저 이야기 해야함  Node JS은 사용자가 모든것을 직접 설계하고 코딩하게 되어있습니다. 초기 최소한의 셋팅이 되어있고 개발자가 원하는 셋팅을 자유롭게 할수 있습니다. 이는 routing, API를 부르는법, 셋팅 또는 웹 소켓등입니다. 또한 코드적으로 코드, 파일 구조와 이름까지도 자유롭게 결정할수 있습니다.  이러한 셋팅을 더 간단하게 해주기 위해서 많은 프레임워크들이 나왔습니다. 대표적으로 Express.js입니다. 이러한 자유성은 양날의 검이 될수 있습니다. 향후 팀이 커지게 되면 해당 어플리케이션에 잠재적 문제가 될수 있기 때문입니다.   NestJS는 NodeJS의 자유성으로 인해 발생되는 문제들 보다 실제 어플리케이션에 발생하는 문제에 대해서 더 집중할수 있게 해줍니다. API를 부르는법, 에러 핸들링, 미들웨어 셋업, 타입스크립 셋업 등등의 디테일 등을 크게 신경쓰지 않도록 해줍니다.  SCALABLE : 시스템을 확정 또는 축소할수 있게 해줍니다. LOOSELY-COUPLED : 느슨한 결합으로 하나의 컴포먼트의 변경이 다른 컴포먼트들의 변경요구를 최대한으로 줄여준다.  TESTABLE : 작성한 코드를 테스트 할수 있다. MAINTAINABLE : 유지보수가 가능하다 NestJS는 위 4가지는 중점으로 개발이 되었습니다. 앞으로 코스를 진행하면서 각각 4가지에 대해서 자세하게 배우게 됩니다. 사실 NestJS에 규칙이 있다고 하지만 플러그인으로 Express, Fastify 또는 다른 것을 사용할수 있습니다. 
자세한 내용 보기