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({   ...

 이번에는 버튼을 만들어서 버튼을 누르면 state의 상태에서 입력된 id가 삭제되도록 하겠다. import React , { Component } from 'react' import Newcompoment from './compoments/New_compoment' ; export class App extends Component { constructor ( props ){ // constructor를 만들어 props를 전달 super ( props ); // 기존의 props 유지 this . state = { // class이기 때문에 this를 사용 fruit : [ // 실제 상태를 바꿀 state.fruit { id : 0 , post : 'apple' }, { id : 1 , post : 'banana' } ] }; // del_state가 제대로 전달되도록 bind한다. this . del_state = this . del_state . bind ( this ); } // del_state는 state.fruit에서 선택된 id를 제거한다. del_state = ( id ) => { this . setState ({ fruit : this . state . fruit . filter (( ele ) => ele . id !== id ) }) } render () { return ( < div > < Newcompoment fruit = {this . state . fruit } del_state = {this . del_state } /> </ div > // New_compoment에 props로 state.fru...

  import React , { Component } from 'react' import New_compoment from './compoments/New_compoment' ; export class App extends Component { constructor ( props ){ // constructor를 만들어 props를 전달 super ( props ); // 기존의 props 유지 this . state = { // class이기 때문에 this를 사용 fruit : [ // 실제 상태를 바꿀 state.fruit { id : 0 , post : 'apple' }, { id : 1 , post : 'banana' } ] }; } render () { return ( < div > < New_compoment fruit = {this . state . fruit } /> </ div > // New_compoment에 fruit state 전달 ) } } export default App 위의 코드에서 state를 추가하며 New_compoment에 fruit라는 props를 전달한다. import React , { Component } from 'react' export class New_compoment extends Component { render ( props ) { return ( < div > { console . log ( this . props . fruit ) /*props 확인*/ } </ div > ...

React는 여러 compoments들이 모여서 만들어진다. 이때 각각의 compoment들에 정보 또는 메소드가 제공되고 거기에 따라 동작하게 해야한다. 일단 React를 설치하고 진행하도록 하겠습니다. 위 사진처럼 'Happy hacking!'이 나오면 제대로 설치가 된 것입니다. import React , { Component } from 'react' export class App extends Component { render () { return ( < div > </ div > ) } } export default App src폴더에 있는 App.js를 위와 같이 변경합니다. src폴더에 compoments폴더를 생성합니다. 그리고 그안에 New_compoment.js을 생성합니다. (아래코드 참고) import React , { Component } from 'react' export class New_compoment extends Component { render () { return ( < div > < h1 > Hello World! </ h1 > </ div > ) } } export default New_compoment 위 코드에서 div 태그 안에 h1테그가 있는것을 알수 있습니다. 이안에 "Hello World!"를 입력해 줍니다. import React , { Component } from 'react' import New_compoment from './compoments/New_compoment' ; export class App extends Co...

안녕하세요 알렉스입니다. 이번에는 OOP의 Inheritance에 대해서 설명해 드리겠습니다.   처음에 도서에 대한 정보를 출력할때 책에 대해서 각각 변수를 정의 하고 함수에서 각각의 파라메터값을 입력해서 출력 했습니다. 하지만 이 방법은 전에 이야기 했듯이 너무 많은 작업량과 비효율성을 나타냅니다. 반면 ' Object Oriented - OOP Encapsulation '에서 설명했듯이 Object와 this을 이용하여 각 도서에 대한 Book Object를 생성할수 있습니다. 하지만 이 방법도 도서의 갯수가 늘어남에 따라 Book Object 수가 늘어납니다.  그래서 Class는 틀을 짜놓고 'new'를 선언할때마다 새로운 객체를 생성하는 것입니다. 여기서 constructor는 각 항목에 대한 value를 저장합니다. register은 함수(여기서는 console.log로 도서정보 출력)를 실행합니다.  이렇듯 하나의 Class(클래스)를 이용하여 여러개의 객체를 생성할수 있습니다. 물론 각 객체마다 구조는 같지만 value값은 똑같거나 다를수 있습니다. 이 방법을 이용하면 궂이 Object를 일일이 만들 필요가 없어집니다. 다음 글 이전 글