Engineering_S/W & H/W

해당 글을 사용하기 전에 참고하면 좋은 글 nest js - install & Create Project from Linux or Ubuntu NestJS에 Swagger(스웨거) Document(문서)를 적용 NestJS http로 들어오는 파라메타, 쿼리, Body값들에 대해서 Global Validation Pipe 만들기   Swagger를 이용해서 API문서를 만들다 보면 단일 Class를 한꺼번에 생성하기 위해서 배열로 받아야 하는 상황이 있습니다. 이를 위해서 기존 Class를 배열로 적용하다보면 Swagger에서 다르게 표시되는 경우가 있습니다. 사진1) 한개의 DTO사용 위의 2개의 num, str을 배열 {num : number, str : string}[]로 저장할수 있는 API를 만들도록 하겠습니다. import {   Body,   Controller,   Get,   HttpCode,   HttpStatus,   Post, } from '@nestjs/common'; import { ApiOkResponse, ApiOperation } from '@nestjs/swagger'; import { AppService } from './app.service'; import { CreateManyTest1ArrayDto, CreateOneTest1Dto } from './dto/test1.dto'; @Controller() export class AppController {   constructor(private readonly appService: AppService) {}   @Get()   getHello(): string {     return this.appService.getHello();   }   @Post('element/one')   @ApiOperation({   ...

 안녕하세요. 이번에는 NestJS에서 클라이언트로 받는 값을 검증하고 변환하는 것을 전체(Global)에 적용하도록 하겠습니다. 일단 해당 npm 모듈을 설치해야 합니다. $ npm i class-validator class-transformer @nestjs/mapped-types copy 설치가 완료된 다음 해당 app의 'useGloblePipes을 설정해 줍니다. app . useGlobalPipes ( new ValidationPipe (), ); /src/main.ts 위 코드를 'const app = await NestFactory.create(AppModule);'아래쪽에 추가를 해 줍니다.   'ValidationPipe는 '@nestjs/common'에서 import할수 있습니다. 이제 Input을 제어하기 위한 dto를 작성하겠습니다. import { IsInt , IsString } from 'class-validator' ; export class CreateAppDto { @ IsString () readonly name : string ; @ IsString () readonly sex : string ; @ IsInt () readonly age : number ; } /src/app.dto.ts @IsString() : 위 데코레이터는 해당 name, sex에 string이 제대로 들어가는지를 확인한다 @IsInt() : 위 데코레이터는 해당 age에 number가 제대로 들어가는지 확인한다. import { Body , Controller , Get , Post } from '@nestjs/common' ; import { AppService } from './app.service' ; import { CreateAppDto } from './appDto...

  // body값을 읽기 위하여 Post요청을 만든다. @ Post () // create에서 Body를 받을수 있도록 코딩한다. create (@ Body () body ) { // 클라이언트에서 받은 body를 확인하기 위해서 // 다시 클라이언트로 응답한다. return body ; } 해당 컨트롤러(위 코드는 coffee컨트롤러에 있음)에 위 코드를 작성한다. 위 코드를 입력하고 Insomnia에서 POST요청을 할때 위 사진과 같이 Body로 보낸 요쳥을 서버에서 다시 응답으로 오는것을 알수 있습니다.  // body값을 읽기 위하여 Post요청을 만든다. @ Post () create ( @ Body ( 'name' ) name : string , // body의 name만 따로 name변수에 저장 @ Body ( 'message' ) message : string // body의 message만 따로 message변수에 저장 ) { // create에서 Body를 받을수 있도록 코딩한다. console . log ( "request from client(POST)" ) // 클라이언트에서 받은 body를 확인하기 위해서 // 다시 클라이언트로 응답한다. return ( `당신의 이름은 ${ name } 이고 보낸 메세지는 ' ${ message } ' 입니다.` ); } 만약 해당 body에 무엇이 들어올지 알면 미리 변수로 지정을 할수 있습니다. 여기서는 name, message를 body에서 받아서 변수로 지정을 합니다. 그리고 응답을 보낼때 하나의 문자열로 클라이언트로 보냅니다.

 안녕하세요. 알렉스 입니다. 이번에는 Express를 이용해서 Client에서 들어온 request의 Body를 JSON형식으로 읽어보도록 하겠습니다. const express = require ( 'express' ) const app = express (); // POST app . post ( '/login' , ( req , res ) => { console . log ( req . body ) // body확인 가능 부분 res . status ( 201 ); res . send ({ message : "Login Successful" , body : req . body }) }) app . listen ( 3500 , () => { console . log ( "Server is working" ); }) 위 코드와 사진을 확인하면 실제 Postman에서 request한 body내용이 전혀 읽혀지지 않은것이 확인이 됩니다. 이렇한 원인은 통신에 있습니다. http통신의 body는 한번에 들어오는 것이 아닙니다. 부분(또는 chunk) 부분 들어오고 그것을 조합하고 나야 완전한 body가 되는 것입니다. app . use ( function ( req , res , next ) { let data = '' ; // chunk를 하나로 모음 req . on ( 'data' , function ( chunk ) { data += chunk ; console . log ( chunk ); }); // chunk를 모으는 것이 끝남 req . on ( 'end' , function () { // req.rawBody = data; console . log ( 'on end: ' , data ) if ( ...

  기존의 HTML 코드에 css파일을 추가하여 디자인을 변경하도록 하겠습니다. HTML 파일명은 'index.html'로 하고 경로는 './public/index.html'로 합니다. 코드는 위의 방법으로 작성하고 저장을 합니다. CSS가 적용되지 않은 상태는 위와 같은 페이지가 출력됩니다.  css또한 폴더를 생성(./public/css)하고 style.css파일을 저장합니다. (파일, 폴더, 경로는 자유롭게 생성 가능) background : 뒷 배경 color : 글자 색 일단 위 글은 css에 대한 설명이 아니기 때문에 위의 css에 대한 설명만 적겠습니다. <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = "stylesheet" href = "css/style.css" > <!-- CSS파일을 HTML에 삽입 --> > < title > My HomePage </ title > </ head > < body > < h1 > My HomePage </ h1 > < p > 테스트 홈페이지. </ p > < p > 테스트 홈페이지. </ p > </ body ...