선장 일지

Pipe란?

@Injectable() 데코레이터로 주석이 달린 클래스이다. Data Transformation과 Data Validation 위해서 사용한다. 컨트롤러 경로 처리기에 의해 처리되는 인수에 대해 작동한다.

request가 올 때, 바로 handler로 가지 않고 pipe를 거쳐간다. handler에 도달하기 전, Data Transformation과 Data Validation을 하기 위해서이다. 만약, 통과되지 않는다면 handler로 가지않고 Error를 발생시킨다.

Data Transformation?

입력 데이터를 원하는 형식으로 변환 (Ex, String to int)

만약, 숫자를 받길 원하는데 문자열 형식으로 온다면 파이프에서 자동으로 숫자로 변환한다.

Data Validation?

입력 데이터를 평가하고 유효한 경우 변경되지 않은 상태로 전달하면 된다. 그렇지 않으면 데이터가 올바르지 않을 때 예외를 발생시킨다. 예를들어, 입력 길이가 10 이하여야 하는데, 10자 이상이면 예외를 발생시킨다.

Pipe를 사용하는 법 (Binding Pipes)

사용방법은 3가지로 Handler-level Pipes, Parameter-level Pipes, Global-level Pipes가 있다. 

Handler-level Pipes

  @Post()
  @UsePipes(pipe)
  createBoard(@Body() CreateBoardDto: CreateBoardDto): Board {
    return this.boardsService.createBoard(CreateBoardDto);
  }

핸들러 레벨에서 @UsePipes() 데코레이터를 이용해서 사용할 수 있다. 이 파이프는 모든 파라미터에 적용이 된다. (CreateBoardDto 내의 속성)

Parameter-level Pipes

  @Post()
  createBoard(@Body(ParameterPipe) CreateBoardDto: CreateBoardDto): Board {
    return this.boardsService.createBoard(CreateBoardDto);
  }

파라미터 레벨의 파이프라는 이름처럼 특정한 파라미터에만 적용이되는 파이프이다. 위처럼 CreateBoardDto에만 적용이 된다.

Global Pipes

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

이름처럼 애플리케이션 레벨의 파이프이다. 클라이언트에서 들어오는 모든 요청에 적용이 된다. 가장 상단 파일인 main.ts에 넣어주면 작동한다.

Build-in Pipes

Nest.js에 기본적으로 사용할 수 있게 만들어 놓은 6가지의 파이프가 있다.

• ValidationPipe
• ParseIntPipe
• ParseBoolPipe
• parseArrayPipe
• parseUUIDPipe
• DefaultValuePipe

네이밍만으로도 어떤 역할을 하는지 알 수 있게끔 되어있다. 예시로 ParseIntPipe를 사용해보자.

  @Get("/:id")
  getBoardById(@Param("id", ParseIntPipe) id: number): Board {
    return this.boardsService.getBoardById(id.toString());
  }

위와같이 작성된 parameter-level pipe 안에 Nest.js에서 제공하는 ParseIntPipe를 사용하여 number를 받도록 코드를 작성했다.

int 값을 보내야하지만, absd라는 문자열을 보낸 결과 아래와 같은 에러 메시지가 온다.

{ "message": "Validation failed (numeric string is expected)", "error": "Bad Request", "statusCode": 400}

에러 메시지로 어떠한 request 오류가 있는지 한 번에 알 수 있도록 해준다. (편리하네)

파이프를 이용한 유효성 체크

  @Post()
  createBoard(@Body() CreateBoardDto: CreateBoardDto): Board {
    return this.boardsService.createBoard(CreateBoardDto);
  }

현재 게시판 서비스를 만들고 있는데, 게시판의 제목과 내용에 ""인 공백을 입력해도 post가 되는 문제가 있다. 파이프를 이용해서 게시물을 생성할 때 유효성을 체크하도록 구현해보려고 한다.

필요한 모듈

• class-validator
• class-transformer

위 두개의 모듈이 필요하다. 해당 모듈은 명령어를 통해 가져올 수 있다. 아래 명령어를 터미널에서 실행해주자.

npm install class-validator class-transformer --save

document 페이지는 링크에 있다. 문서를 읽어보면 @IsNotEmpty()라는 데코레이터를 사용하면 원하는 기능이 구현될 것 같다. 

import { IsNotEmpty } from "class-validator";

export class CreateBoardDto {
  @IsNotEmpty()
  title: string;

  @IsNotEmpty()
  description: string;
}

파라미터에 받아오는 Dto에 위와같이 @IsNotEmpty()를 추가해주었다.

  @Post()
  @UsePipes(ValidationPipe)
  createBoard(@Body() CreateBoardDto: CreateBoardDto): Board {
    return this.boardsService.createBoard(CreateBoardDto);
  }

controller에도 @UsePipes 데코레이터를 추가하여 Handler-level pipe를 추가해주었다. ValidationPipe는 built-in pipe로 유효성을 체크하겠다는 의미이다.

그렇다면, 테스트를 해보자.

{ "message": [ "title should not be empty", "description should not be empty" ], "error": "Bad Request", "statusCode": 400}

성공적으로 핸들러에서 에러를 처리하는 모습을 볼 수 있다.

커스텀 파이프를 이용한 유효성 체크

구현 방법

PipeTransform interface를 새롭게 만들 커스텀 파이프에 구현해줘야 한다. PipeTransform interface는 모든 파이프에서 구현해줘야 하는 인터페이스이다. 해당 Interface는 transform() 메소드를 필요로 하는데, nest.js가 인자를 처리하기 위해서 사용된다.

transform 메소드

• value
• metadata

위 두개의 인자를 가진다. 해당 메소드에서 return된 값은 route 핸들러로 전해지고, 예외가 발생한다면 클라이언트에 바로 전달된다.

실제 사용

import { ArgumentMetadata, PipeTransform } from "@nestjs/common";

export class BoardStatusValidationPipe implements PipeTransform {
  transform(value: any, metadata: ArgumentMetadata) {
    console.log("value", value);
    console.log("metadata", metadata);
     
    return value;
  }
}

위와 같이 PipeTransform class를 만들고

  @Patch("/:id/status")
  updateBoardStatus(
    @Param("id") id: string,
    @Body("status", BoardStatusValidationPipe) status: BoardStatus
  ) {
    return this.boardsService.updateBoardStatus(id, status);
  }

위와 같이 사용하고 싶은 곳에 넣어주면 된다. 

직접 돌려보면, Pipe 코드를 읽어 log가 출력되는 것을 확인할 수 있다. 그렇다면, 현재 enum에 없는 값으로 update해도 작동하고 있는데 pipe를 통해 막아보자.

export class BoardStatusValidationPipe implements PipeTransform {
  readonly StatusOptions = [BoardStatus.PRIVATE, BoardStatus.PUBLIC];

  transform(value: any, metadata: ArgumentMetadata) {
    value = value.toUpperCase();

    if (!this.isStatusValid(value))
      throw new BadRequestException(`${value} isn't in the status`);

    return value;
  }

  private isStatusValid(status: any): boolean {
    const index = this.StatusOptions.indexOf(status);
    return index !== -1;
  }
}

코드를 위와같이 변경해주고 테스트해보자.

정상적으로 예외처리하는 것을 확인할 수 있다.

Reference

• https://www.youtube.com/watch?v=3JminDpCJNE
• https://github.com/typestack/class-validator?tab=readme-ov-file#manual-validation

Nest.js Module

모듈은 @Module() 데코레이터로 주석이 달린 클래스이다. @Module() 데코레이터는 Nest.js가 애플리케이션 구조를 구성하는 데 사용하는 메타 데이터를 제공한다. 여기서 데코레이터는 @Moudle() 속성이 모듈을 설명하는 단일 개체를 사용한다.

App Module 안에 BoardModule과 Auth Module이 있으면 각 모듈 안에 Controller, Entity, Service 등이 있다. (이렇게 모듈별로 나눠서 MSA를 구축하는건가???)  -> 맞는 것 같다. 효과적으로 모듈을 구성하는 것이 중요해 보인다. 대부분의 애플리케이션에서 결과 아키텍처는 밀접하게 관련된 기능 세트를 각각 캡슐화하는 여러 모듈을 사용한다고 한다.

각 응용 프로그램은 하나 이상의 모듈(루트 모듈)이 있다. 루트 모듈은 Nest가 사용하는 시작점이다. 

• providers
  • nest 인젝터에 의해 인스턴스화되고 적어도 해당 모듈 전체에서 공유될 수 있는 공급자
• controllers
  • 인스턴스화되어야 하는 이 모듈에 정의된 컨트롤러 세트
• imports
  • 해당 모듈에 필요한 공급자를 내보내는 가져온 모듈 목록
• exports
  • 하위 집합은 providers 모듈에서 제공되며, 모듈을 가져오는 다른 모듈에서 사용할 수 있어야 한다. 공급자 자체 또는 해당 토큰만 사용할 수 있다.

모듈은 기본적으로 공급자를 캡슐화한다. 즉, 현재 모듈에 직접 포함되지 않거나 가져온 모듈에서 내보낸 공급자를 삽입할 수 없다. 따라서 모듈에서 내보낸 공급자를 모듈의 공용 인터페이스 또는 API로 간주할 수 있다.

Feature Module

CatsController, CatsService는 동일한 애플리케이션 도메인에 속한다. 서로 밀접하게 관련되어 있으므로 기능 모듈로 이동하는 것이 좋다. 기능 모듈은 단순히 특정 기능과 관련된 코드를 구성하여 코드를 체계적으로 유지하고 명확한 경계를 설정한다. 이는 특히 애플리케이션의 규모가 커짐에 따라 복잡성을 관리하고 SOLID 원칙으로 개발하는데 도움이 된다.

Cat/cats.module.ts

import { Module } from '@nestjs/common';
import { CatsController } from './cats.controller';
import { CatsService } from './cats.service';

@Module({
  controllers: [CatsController],
  providers: [CatsService],
})
export class CatsModule {}

!힌트
CLI를 사용하여 모듈을 생성하려면 $ nest g moudle cats 명령을 실행하기만 하면 된다.

위 에서는 CatsMoudle 파일에 cats.module.ts를 정의하고 이 모듈과 관련된 모든 것을 cats 디렉터리로 옮겼다. 마지막으로 해야 할 일은 이 모듈을 루트 모듈로 가져오는 것이다. 

app.module.ts

import { Module } from '@nestjs/common';
import { CatsModule } from './cats/cats.module';

@Module({
  imports: [CatsModule],
})
export class AppModule {}

현재 디렉터리 구조는 아래와 같다.

공유 모듈

nest에서 모듈은 기본적으로 싱글톤이므로 여러 모듈 간에 모든 공급자의 동일한 인스턴스를 쉽게 공유할 수 있다. 모든 모듈은 자동으로 공유 모듈이 되기 때문에 일단 생성되면 모든 모듈에서 재사용할 수 있다. 여러 다른 모듈 간에 CatsService 인스턴스를 공유해야된다고 가정해본다면, 아래와 같이 CatsService exports 공급자를 모듈의 배열에 추가하여 공급자를 내보내야 한다.

cats.module.ts

import { Module } from '@nestjs/common';
import { CatsController } from './cats.controller';
import { CatsService } from './cats.service';

@Module({
  controllers: [CatsController],
  providers: [CatsService],
  exports: [CatsService]
})
export class CatsModule {}

이제 catsmodule를 가져오는 모든 모듈은 Cats Service에 액세스할 수 있으며 이를 가져오는 다른 모든 모듈과 동일한 인스턴스를 공유한다. 

Module re-exporting

위에서 볼 수 있듯 모듈은 내부 공급자를 내보낼 수 있다. 추가적으로, 가져온 모듈을 다시 내보낼 수도 있다. 아래 예에서는 CommonMoudle을 coremodule로 가져오거나 내보내므로 이 항목을 가져오는 다른 모듈에서 사용할 수 있다.

@Module({
  imports: [CommonModule],
  exports: [CommonModule],
})
export class CoreModule {}

Dependency Injection

모듈 클래스는 공급자도 주입할 수 있다.

import { Module } from '@nestjs/common';
import { CatsController } from './cats.controller';
import { CatsService } from './cats.service';

@Module({
  controllers: [CatsController],
  providers: [CatsService],
})
export class CatsModule {
  constructor(private catsService: CatsService) {}
}

그러나 모듈 클래스 자체는 순환 종속성으로 인해 공급자로 주입될 수 없다. 

전역 모듈

동일한 모듈 세트를 모든 곳에서 가져와야 한다면 불편할 수 있다. Nest와 달리 Angular는 providers 전역 범위에 등록된다. 일단 정의되면 어디에서나 사용할 수 있다. 그러나 Nest는 모듈 범위 내에 공급자를 캡슐화한다. 캡슐화 모듈을 먼저 가져오지 않으면 다른 곳에서 모듈 공급자를 사용할 수 없다.

즉시 사용 가능한 모든 곳에서 사용할 수 있는 공급자 세트를 제공하려는 경우 데코레이터를 사용하여 모듈을 전역으로 @Global()하면 된다.

import { Module, Global } from '@nestjs/common';
import { CatsController } from './cats.controller';
import { CatsService } from './cats.service';

@Global()
@Module({
  controllers: [CatsController],
  providers: [CatsService],
  exports: [CatsService],
})
export class CatsModule {}

데코레이터 @Global()은 모듈을 전역 범위로 만든다. 전역 모듈은 일반적으로 루트 또는 코어 모듈에 의해 한 번만 등록되어야 한다.

동적 모듈

Nest 모듈 시스템은 동적 모듈이라는 강력한 기능이 포함되어 있다. 이 기능을 사용하면 공급자를 동적으로 등록하고 구성할 수 있는 사용자 정의 가능한 모듈을 쉽게 만들 수 있다. 동적 모듈은 링크에서 광범위하게 다룬다. 

아래는 DatabaseModule에 대한 동적 모듈 정의의 예이다.

import { Module } from '@nestjs/common';
import { createDatabaseProviders } from './database.providers';
import { Connection } from './connection.provider';

@Module({
  providers: [Connection],
  exports: [Connection],
})
export class DatabaseModule {
  static forRoot(entities = [], options) {
    const providers = createDatabaseProviders(options, entities);
    return {
      module: DatabaseModule,
      providers: providers,
      exports: providers,
    };
  }
}

!힌트
forRoot() 메서드는 동기적, 비동기적으로 동적 모듈을 반환할 수 있다.

이 모듈은 기본적으로 Connection 공급자를 정의하지만 추가적으로 forRoot() 메서드에 전달된 entities 및 개체에 따라 저장소와 같은 공급자 컬렉션을 노출한다. 동적 모듈에서 반환된 속성은 데코레이터에 정의된 기본 모듈 메타데이터를 확장한다. 이것이 정적으로 선언된 공급자와 동적으로 생성된 저장소 공급자가 모두 모듈에서 내보내지는 방식이다.

전역 범위에 동적 모듈을 등록하려면 global 속성을 true로 설정하면 된다.

{
  global: true,
  module: DatabaseModule,
  providers: providers,
  exports: providers,
}

DatabaseModule을 아래와 같은 방식으로 가져오고 구성할 수 있다.

import { Module } from '@nestjs/common';
import { DatabaseModule } from './database/database.module';
import { User } from './users/entities/user.entity';

@Module({
  imports: [DatabaseModule.forRoot([User])],
})
export class AppModule {}

동적 모듈을 다시 내보내려면 forRoot() 내보내기 배열에서 메서드 호출을 생략할 수 있다.

import { Module } from '@nestjs/common';
import { DatabaseModule } from './database/database.module';
import { User } from './users/entities/user.entity';

@Module({
  imports: [DatabaseModule.forRoot([User])],
  exports: [DatabaseModule],
})
export class AppModule {}

!힌트
링크에서는 configurableModuleBuilder를 사용하여 고도로 사용자 정의 가능한 동적 모듈을 구축하는 방법을 알 수 있다.

Reference

• https://docs.nestjs.com/

ES6

ECMAScript(ES6)는 JavaScript의 표준화된 버전이다. 모든 주요 브라우저는 이 사양을 따르기 때문에 ES6와 JavsScript라는 용어는 서로 바꿔 사용할 수 있다. 이전까지 배운 Javascript의 대부분은 2009년에 완성된 ES5에 있었다. 2015년에 출시된 ES6에는 언어에 강력한 새 기능이 많이 추가 되었다.
ES6를 통해 화살표 함수, 구조 분해, 클래스, 약속 및 모듈을 포함한 새로운 기술을 배울 수 있다.

Object.freeze()

let obj = {
  name:"FreeCodeCamp",
  review:"Awesome"
};
Object.freeze(obj);

변경하면 안되는 변수가 존재할 수 있다. Object.freeze는 변경하면 안되는 변수를 넣어 변경을 못하게 막는다.

Inline function

const myFunc = function() {
  const myVar = "value";
  return myVar;
}

우리는 가끔 위와 같은 구성의 함수를 사용하고자 할 때가 있다. ES6은 이러한 방식으로 익명 함수를 작성할 필요가 없도록 화살표 함수 구문을 허용한다.

const myFunc = () => {
  const myVar = "value";
  return myVar;
}

만약, 반환값만 존재하는 경우 아래와 같이도 만들 수 있다.

const myFunc = () => "value";

아래처럼 파라미터를 넣어 return 값을 얻을 수도 있다.

const multiplier = (item, multi) => item * multi;
multiplier(4, 2);

아래와 같이 default 값을 지정해 줄 수 있다. 

const greeting = (name = "Anonymous") => "Hello " + name;

console.log(greeting("John"));		// Hello John
console.log(greeting());		// Hello Anonymous

Spread Operator

function howMany(...args) {
  return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2));
console.log(howMany("string", null, [1, 2, 3], { }));

보다 유연하게 사용할 수 있도록 나머지 매개변수 기능을 제공한다.

var arr = [6, 89, 3, 45];
var maximus = Math.max.apply(null, arr);

위 ES5 코드는 배열의 최대값을 구하는데 사용된다.

const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr);

ES6에서 스프레드 연산자를 통해 위와같이 보다 편리하게 구할 수 있다.

const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
arr2 = [...arr1];  // COPY

또한, 위와같이 편리하게 복사도 가능하다.

Destructuring Assignment

const user = { name: 'John Doe', age: 34 };

const name = user.name;
const age = user.age;

위는 ES5에서 할당하는 예시이다.

const { name, age } = user;

아래는 ES6에서 할당하는 예시이다. 

const { name: userName, age: userAge } = user;

다른 변수명을 사용하고 싶다면, 위와같이 사용할 수 있다.

const user = {
  johnDoe: { 
    age: 34,
    email: 'johnDoe@freeCodeCamp.com'
  }
};

const { johnDoe: { age, email }} = user;
const { johnDoe: { age: userAge, email: userEmail }} = user;

위 와 같이도 사용 가능하다.

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c); // 1, 2, 5

배열에서 쉼표를 사용하여 구조 분해를 통해 배열의 모든 인덱스 값에 액세스 할 수 있다.

let a = 8, b = 6;
[a, b] = [b, a];

위와 같은 swap 방식도 사용 가능하다.

const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
console.log(a, b);			// [1,2]
console.log(arr);			// [3,4,5,7]

위와 같이 앞 2개를 제거할 수도 있다.

const stats = {
  max: 56.78,
  standard_deviation: 4.34,
  median: 34.54,
  mode: 23.87,
  min: -0.75,
  average: 35.85
};
const half = (stats) => (stats.max + stats.min) / 2.0; 
const half = ({ max, min }) => (max + min) / 2.0;

위와 같이도 사용할 수 있다고 한다. 이건 좀.. 불편해 보이기도 하다. 구조체의 변수명을 다시 확인해줘야 하는 것 아닌가?

Template Literals

복잡한 문자열을 더 쉽게 생성할 수 있게 해주는 특수한 유형의 문자열이다.

const person = {
  name: "Zodiac Hasbro",
  age: 56
};

const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;

위와 같이 사용할 수 있다.

Object Literals

const getMousePosition = (x, y) => ({
  x: x,
  y: y
});

위의 코드를 아래와 같이 줄여서 사용할 수 있다.

const getMousePosition = (x, y) => ({ x, y });

단, 같은 속성 변수명을 가지고 있어야한다.

Consise Declarative Functions

const person = {
  name: "Taylor",
  sayHello: function() {
    return `Hello! My name is ${this.name}.`;
  }
};

ES5에서 함수를 선언하려면 위와같은 방식으로 선언해야 했다.

const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};

ES6에서는 위와같이 보다 간결하게 함수를 작성할 수 있다.

Use class Syntax to Define a Constructor Function

// Explicit constructor
class SpaceShuttle {
  constructor(targetPlanet) {
    this.targetPlanet = targetPlanet;
  }
}

// Implicit constructor 
class Rocket {
}

위와같이 생성자에 변수를 넣어서 초기화해줄 수 있다. 만약, 명시적으로 생성자를 만들어주지 않는다면, 암시적으로 스스로 선언해준다.

Use getters and setters to Control Access to an Object

class Book {
  constructor(author) {
    this._author = author;
  }
  // getter
  get writer() {
    return this._author;
  }
  // setter
  set writer(updatedAuthor) {
    this._author = updatedAuthor;
  }
}
const novel = new Book('anonymous');
console.log(novel.writer);	//anonymous
novel.writer = 'newAuthor';
console.log(novel.writer);	//newAuthor

위와 같이 사용할 수 있다. java랑 다른점은 getter, setter를 쓸 때 메소드처럼 쓰지 않는다는 것이다. 또한, set을 할 때도 메소드를 가져오는 것이 아닌 그냥 변수명을 저장하듯이 저장한다.

Create a Module scriptd

javascript는 주로 HTML 웹에서 수행되는 작은 역할로 시작되었다. javascript를 더욱 모듈화하고, 깔끔하고, 유지 관리하기 쉽게 만들기 위해 ES6에서는 javscript 파일 간에 코드를 쉽게 공유하는 방법을 도입했다. 

<script type="module" src="filename.js"></script>

위와같이 모듈화하여 Export할 수 있다.

Use export to Share a Code Block

math_functions.js이라는 수학 연산과 관련된 여러 함수가 포함된 파일이 있다고 가정해보자. 해당 파일 안에는 아래와 같이 함수가 정의되어있고, 다른 파일과 공유하려면 해당 함수 앞에 export를 추가하면 된다.

export const add = (x, y) => {
  return x + y;
}

const add = (x, y) => {
  return x + y;
}

export { add };

위와같은 방법도 가능하다.

Reuse JavaScript Code Using import

이제 math_functions.js 파일을 공유하여 수학 연산은 가져와 사용할 수 있다.

import { add } from './math_functions.js';

위와 같이 java에서 사용할 때처럼 파일 directory와 파일명을 추가하여 import하면 사용할 수 있다. 단, 가져올 때 사용할 export한 함수명을 적어줘야 한다. export하는 방법은 Go가 강력한 것 같다. 함수를 대문자로만 바꿔주면되기 때문이다.

파일에 export된 모든 함수를 가져오려면 *를 사용하면 된다.

import * as myMathModule from "./math_functions.js";
myMathModule.add(2,3);
myMathModule.subtract(5,3);

위와 같이 선언해주고, 사용할 수 있다.

Create an Export Fallback with export default

내보내기 기본값이라는 또 다른 export 구문이 있다. 일반적으로 파일에서 하나의 값만 export하는 경우 이 구문을 사용한다고 한다. 또한, 파일이나 모듈에 대한 대체 값을 생성하는 데에도 사용된다고 한다.

export default function add(x, y) {
  return x + y;
}

export default function(x, y) {
  return x + y;
}

첫 번째는 명명된 함수이고, 두 번째는 익명 함수이다. 익명 함수를 사용할 수 있는 이유는 파일에서 1개의 함수만 export하기 때문이다.

Create a JavaScript Promise

javascript의 Promise는 비동기식으로 무언가를 약속할 때 사용한다. 작업이 완료되면 약속을 이행하거나 이행하지 못하게 된다. 생성자 함수이므로 생성하려면 Promise 키워드를 사용해야 한다. 구문은 아래와 같다.

const myPromise = new Promise((resolve, reject) => {

});

Complete a Promise with resolve and reject

Promise에는 pending, fulfilled, rejected 3가지 상태가 있다. 생성된 직후의 상태는 pending 상태이다. 이전의 코드의 경우 pending 상태가 지속하고있는 상태다. promise가 성공적으로 마무리되면 상태가 fulfilled로 변하고, resolve 함수를 호출한다. resolve 함수는 promise가 성공적으로 마무리된 결과를 전달한다. promise가 실패하면 rejected 상태로 변하고, reject 함수가 호출된다. reject 함수는 실패이유를 전달한다.  

const myPromise = new Promise((resolve, reject) => {
	//pending
  if(condition here) {
    resolve("Promise was fulfilled");	// fulfilled
  } else {
    reject("Promise was rejected");		// rejected
  }
});

사용 방법은 위와 같다.

Handle a Fulfilled Promise with then

이러한 promise는 시간이 걸리는 서버 요청이 있을 때 사용하면 유용하다. 이는 메소드를 사용하여 달성할 수 있다.

Promise.prototype.then(onFulfilled, onRejected)

이 then 메소드는  promise의 최종완료(완료 또는 거부)를 위한 콜백 함수를 예약한다. 약속이 이행되면 resolve를 호출, 거부되면 reject가 실행된다. 

myPromise.then(result => {
  
});

선언된 Promise를 위와 같이 사용할 수 있다.

const makeServerRequest = new Promise((resolve, reject) => {
  // responseFromServer is set to true to represent a successful response from a server
  let responseFromServer = true;
    
  if(responseFromServer) {
    resolve("We got the data");
  } else {  
    reject("Data not received");
  }
});

makeServerRequest.then(result => {
  console.log(result);
});

실제로 사용한 방법은 위와같다.

Handle a Rejected Promise with catch

myPromise.catch(error => {
  
});

위와 같이 then과 비슷한 방법으로 처리한다.

const makeServerRequest = new Promise((resolve, reject) => {
  // responseFromServer is set to false to represent an unsuccessful response from a server
  let responseFromServer = false;
    
  if(responseFromServer) {
    resolve("We got the data");
  } else {  
    reject("Data not received");
  }
});

makeServerRequest.then(result => {
  console.log(result);
});

makeServerRequest.catch(error => {
  console.log(error);
});

실제사용하면 위와같이 사용할 수 있다.

다 풀었는데,, ES6 기능이 보다 많은 것 같다. 이후에 프로젝트하면서 알아가도록 해야겠다.

Reference

• https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-javascript
• https://www.w3schools.com/js/js_es6.asp

Javascript

HTML과 CSS가 페이지의 콘텐츠와 스타일을 제어하는 반면, 자바스크립트는 대화형 페이지를 만드는 데 사용된다. Javascript는 객체 지향 프로그래밍(OOP)과 함수형 프로그래밍(FP)을 모두 지원한다. 이는 JavaScript가 다중 패러다임 언어(multi-paradigm language)라는 것을 의미한다. 이러한 점에서 함수형 프로그래밍에 대한 이해도 필요하다.

주석

// This is an in-line coment.

/* This is a
multi-line coment */

/**
 * Your test output will go here
 */

변수 선언

undefined, null, boolean, string, symbol, bigint, number, object로 총 8가지 데이터 유형을 제공한다.

var myName;

위와 같이 변수를 선언할 수 있고, 변수 이름은 숫자, 문자 등으로 구성할 수 있지만, _공백을 포함하거나 숫자로 시작할 수 없다.

Javascript에서는 할당연산자()인 =를 사용하여 변수에 값을 저장할 수 있다. a변수에 7을 넣은 모습이다.

// Setup
var a;
a = 7;

할당연산자를 사용하여 변수에 값을 할당한 후 할당연산자를 사용하여 해당 변수의 값을 다른 변수에 할당할 수 있다. 변수 a와 b는 7의 값을 갖는다.

// Setup
var a;
a = 7;
var b;
b = a;

변수 선언된 것과 같은 줄에서 변수를 초기값으로 초기화하는 것이 일반적이다. 변수 a를 9인 var 값으로 초기화했다.

var a = 9;

문자열을 생성해보자. 아래  이름으로 초기화하여 변수를 선언했다.

var myFirstName = "YJ";
var myLastName = "K";

Javascript에서는 모든 변수와 함수 이름이 대소문자를 구분한다. 아래와 같이 camelCase로 가독성을 높일 수 있다.

// Variable declarations
var studlyCapVar;
var properCamelCase;
var titleCaseOver;

// Variable assignments
studlyCapVar = 10;
properCamelCase = "A String";
titleCaseOver = 9000;

var는 변수 선언을 쉽게 덮어쓸 수 있는 문제가 있다. 큰 프로젝트의 경우 변수 중 바뀌면 안되는 값이 의도치 않게 덮어쓸 수 있다. 이러한 문제를 발생시키지 않으려면 var 대신 let을 사용하면 된다.

let catName = "Oliver";
let catSound = "Meow!";

let대신 const를 사용하여 해결할 수도 있다. const는 상수 값으로 할당하면 재할당할 수 없다. (var, let, const에 대해서 더 알고싶다면 링크에서 이해하면 좋을 것 같다.)

const FCC = "freeCodeCamp"; // Change this line
let fact = "is cool!"; // Change this line
fact = "is awesome!";
console.log(FCC, fact); // Change this line

Number 숫자 데이터는 Javascript의 데이터 유형이다. 숫자 두 개를 사칙 연산을 통해 할당할 수 있다. 

const sum = 10 + 10;
const difference = 45 - 33;
const product = 8 * 10;
const quotient = 66 / 33;

연산자를 사용하여 변수에 변수를 쉽게 추가할 수 있다. 물론, 빼기도 가능하다.

let myVar = 87;

// Only change code below this line
myVar++;

소수를 할당할 수도 있다.

const myDecimal = 5.7;

물론, 사칙연산을 통해 할당도 가능하다.

const product = 2.0 * 2.5;
const quotient = 4.4 / 2.0;

나머지 연산도 가능하다.

const remainder = 11%3;

문자열을 정의할 때, "를 포함하여 초기화 하고 싶다다면 백슬레시를 사용하면 된다.

a "double quoted" string inside "double quotes".

const myStr = "I am a \"double quoted\" string inside \"double quotes\"."; // Change this line

"", '' 둘다 string 문자열을 만드는데 사용된다. ''안에 있는 ""는 백슬레시하지 않아도 된다.

const myStr = '<a href="http://www.example.com" target="_blank">Link</a>';

const goodStr = 'Jake asks Finn, "Hey, let\'s go on an adventure?"'; 
const badStr = 'Finn responds, "Let's go!"'; // 조심

문자열에서 escape할 수 있는 문자는 따옴표만이 아니다. 아래는 이스케이프 시퀀스를 정리한 표이다.

문자열은 뒤에 붙이는 것이 가능하다.

let a = "eonr";
a += "werwerefw";

string의 길이를 얻고싶다면, length를 사용하면 된다.

console.log("Alan Peter".length); // 10

문자열에 있는 문자한개를 배열처럼 가져올 수 있다.

const lastName = "Lovelace";
let firstLetterOfLastName = lastName[0];

배열은 문자열, 숫자 등 다른 타입도 혼합시킬 수 있다.

const myArray = ["abc", 123];

배열의 값은 수정할 수 있다.

const myArray = [18, 64, 99];
myArray[0] = 45;

배열에 추가하기 위해선 push를 사용하면 된다. 앞에 추가하려면 unshift()를 사용하면 된다.

const myArray = [["John", 23], ["cat", 2]];
myArray.push(["dog",3])

배열에 pop()하면 맨 마지막 값이 나온다. shift()하면 맨 앞에 값이 나온다.

const myArray = [["John", 23], ["cat", 2]];
const removedFromMyArray = myArray.pop();	// ["cat",2]
const removedFromMyArray = myArray.shift();	// ["John",23]

함수를 만들고 호출할 수 있다. return 값도 줄 수 있다.

function reusableFunction() {
  console.log("Hi World");
  return 5;
}

console.log(reusableFunction());

전역, 지역 변수를 설정할 수 있다.

var num1 = 18; // Global scope
function fun() {
  var num2 = 20; // Local (Function) Scope
  if (true) {
    var num3 = 22; // Block Scope (within an if-statement)
  }
}

===라는 연산자도 존재한다.

3 == '3' => true
3 === '3' => false

구조체를 만들 수 있다. number, string, array 등의 값을 가질 수 있다.

const myObj = {
  prop1: "val1",
  prop2: "val2"
};

구조체에 없는 속성을 추가하려면, 있는 것처럼 추가하면 된다.

const myDog = {
  "name": "Happy Coder",
  "legs": 4,
  "tails": 1,
  "friends": ["freeCodeCamp Campers"]
};

myDog.bark = "bow-wow";
console.log(myDog);
/*
{
  name: 'Happy Coder',
  legs: 4,
  tails: 1,
  friends: [ 'freeCodeCamp Campers' ],
  bark: 'bow-wow'
}*/

삭제하려면 delete `구조체이름.속성이름` 

// Setup
const myDog = {
  "name": "Happy Coder",
  "legs": 4,
  "tails": 1,
  "friends": ["freeCodeCamp Campers"],
  "bark": "woof"
};

// Only change code below this line
delete myDog.bark;
console.log(myDog);
/*
{
  name: 'Happy Coder',
  legs: 4,
  tails: 1,
  friends: [ 'freeCodeCamp Campers' ]
}
*/

반복문은 java랑 똑같은 것 같다. while도 java와 다를게 없다.

// Setup
const myArray = [];

// Only change code below this line
for(let i = 1; i <= 5; i++) {
  myArray.push(i);
}

느낀점

확실히.. 함수 파라미터의 타입, return 타입을 지정하지 않는 부분에서 프로젝트가 커지는 경우 실수가 나올 수 있을 것 같은 느낌이 들었다. 이러한 부분이 보완되었다고 하니 그러한 장점을 사용하면 더 편리하게 코드를 작성할 수 있지 않을까 싶다.

Reference

• https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/
• https://f-lab.kr/insight/understanding-var-let-const-in-javascript?gad_source=1&gclid=CjwKCAjwmYCzBhA6EiwAxFwfgNIW9XYw6E7CYrLCD_eFs-8utlcbQr2NjVAqKIuuDgno07aN_MLwBhoCgjQQAvD_BwE
• ㅇ

서론

큰 기업의 경우 Spring을 많이 사용하는 듯하고, 커가는 기업의 경우 Node.js를 많이 사용하는 듯합니다. 그렇다면, Node.js는 왜 사용할까?

링크에 따르면 PayPal에서 Nodejs에 2명, Java 백엔드에 5명을 할당했지만, Nodejs가 더 빠르게 구현했다는 이야기가 존재합니다. 아래와 같은 크게 2가지 이유에서 Node.js를 사용한다고 생각합니다.

1. 빠른 구현
2. NETFLIX, Trello, LinkedIn과 같은 대규모 서비스에도 적합 (큰 기업도 많이 사용하네..?)

그렇다면, 왜? Java&Spring Framework는 유행하는데 Node.js는 유행하지않았을까?

단점

1. Java와 비교했을 때, Node.js는 작고 느린 Single Thread 서버이다.
Java는 각 HTTP 요청을 별도의 Thread에서 처리하지만, Node.js는 모든 요청을 하나의 Thread로 처리.
-> 즉, Java Spring은 여러 HTTP 요청을 동시에 처리할 수 있지만 Node.js의 경우 한번에 1개의 요청만 처리할 수 있습니다. 그렇기때문에 강력한 서버에 Node.js를 설치하더라도, 100%의 성능을 활용할 수가 없습니다.

2. Node.js가 사용하는 언어인 Javascript는 신기한(?) 언어다.
Java, script 두개가 합쳐졌지만 자바도 아니고, 단순히 스크립트 언어도 아니라고 합니다. 다른 고급 언어와는 다르게, 자바스크립트는 단순히 웹 브라우저 화면을 컨트롤 하는 스크립트 용도로 만들어진 언어입니다.

그렇기에 발전한 지금의 자바스크립트에는 간단해 보이는 코드 사이사이에 여러 혼란스러운 변화의 흔적들이 남아있습니다. (`this` keyword의 난해함, 혼란스러운 scope 개념 등..)

Javascript는 좋은 부분이 많은 언어이지만, 위험하고 나쁜 부분은 더 많은 언어로 `잘` 알아야 할 필요가 있습니다.

장점

1. Node.js는 (작고 가벼운) Single Thread 서버이다.
말이 아 다르고 어 다르다는 말처럼, Node.js 서버는 Java와 비교했을 때, 작고 느린것은 맞지만 작고 가볍다고 볼 수도 있습니다.

작고 가벼운 Node.js 서버는 대규모 트래픽을 받아주기에는 크게 유용하게 생각되지는 않았습니다.

하지만, Monolithic Architecture를 대체하여 관심받는 MSA(Micro Service Architecture) 구조와 서버 배포와 관리를 간단하고 빠르게 해줄 수 있는 k8s(kubernetes)가 유행을 탄 후, 상황은 조금 달라졌습니다.

MSA는 거대한 서버를 서비스 기능 별로 나눌 뿐만 아니라, 트래픽을 나눕니다. 예를 들어, 쇼핑몰 회사에서 2대로 모든 서비스 요청을 처리하고 있었다치면, MSA 구조에서는 이벤트 서버 2대, 상품 리스트/추천 서버 2대, 주문/배송 처리 서버 3대 등으로 나눠질 수 있습니다. 

얼핏 보았을 때, 2대 vs 7대로 비효율적으로 보이는 MSA 구조는 트래픽이 많이 몰릴 때 빛을 발합니다. 만약, 어떤 시간 한정 이벤트가 발생해서 이벤트 시간에만 사람이 100배로 증가한다면, 이벤트 서버만 증설해주면 트래픽을 문제없이 처리할 수 있습니다. 또한, 이런 증설은 트래픽을 감지한 k8s 시스템이 자동으로 진행해 줍니다. 뿐만아니라, Node.js의 서버 가동 시간은 1초 이내(java spring 서버 가동 시간은 10 ~ 20초 사이)로 갑자그러운 트래픽에 즉각적으로 대응하기에도 유리합니다.

Node.js는 작고 가벼운 장점이 있다고 했습니다. 이는 JVM위에서 구동되는 Java Spring은 Node.js에 비해 무겁다는 것을 의미합니다. 구체적인 예시를 들자면, 아무것도 하지 않는 Java Spring은 400MB 가량의 Memory를 사용하는데 반해, Node.js는 25MB 정도의 Memory만을 사용합니다. (참조 : 링크) 1대의 서버에서 약 375MB가 차이나는데, N대의 서버를 MSA 구조에서 사용한다면 N*375MB의 Memory가 차이가 날 것입니다.

최근 MSA와 k8s가 유행하며 서버 수 자체도 늘고, 서버 수가 트래픽에 맞춰 유동적으로 바뀌는 상황이 많아졌으며, 크고 강력한 한 대의 서버보다는 빠르고 가벼운 서버가 여러대 있는 쪽이 유리한 상황이 많아졌습니다. 이러한 상황에서 빠른 서버 가동 시간과 적은 Memory 사용량 등 Node.js의 가벼움은 빛을 발하고 있습니다.

처리 능력이 떨어지거나 하나의 thread만 사용해 응답성이 떨어지는 단점들은 서버를 여러대 두면 무마 가능하게 되었습니다. (Single Thread 서버 여러 대 == Multi Thread 서버 1대)

또한, Single Thread 서버의 장점이 있습니다. Single Thread 서버에는 오로지 하나의 thread만 존재하기 때문에, concurrency 지옥에서 고통 받을 필요가 없습니다.

2. Javascript 언어는 나아지고(!) 있다.
Javascript는 호불호가 갈리는 언어라고 합니다. Javasciprt의 가장 큰 단점 중 한 가지는 타입이 없기에, 타입을 강제할 방법이 없었다는 것 입니다.

예를 들어, javascript로 아래와 같이 함수를 짰다면

function plus(number1, number2)
{
    return number1 + number2;
}

우리는 함수를 사용하는 사람한테 number1, number2를 숫자로 쓰라고 강제할 수 없습니다. (어..? 이걸 하나하나 기억해야하나..)

함수 사용자가 아래와 같은 악랄한(!) 짓을 해도 딱히 막을 방법은 없습니다.

var result = plus('1', '2') // 3...! 다행이 이건 의도대로 작동합니다.
var result2 = plus('2', 'number') // '2number'? 우리가 원했던 결과는 아니네요
var result3 = plus(1, '2') // 12, 여기부터 심각하게 잘못된 결과가 나오기 시작합니다.

우리가 할 수 있는 최선은 주석을 길게 달아 사용자에게 제발 이 함수를 정확히 써달라고 아래와 같이 명시(!)하는 것 뿐입니다.

/**
 * @param {number} number1- 더하는 첫번째 수, 제발 숫자만 넣어주세요 ㅜㅜ
 * @param {number} number2- 더하는 두번째 수, 꼭 무조건 숫자만 ㅠㅠ;
 *
 * WARNING!!!! 숫자가 아닌 param을 넣으면 오작동함!!!!
 */
function plus(number1, number2) {
  // ...
}

하지만, 이러한 주석 속의 울부짖음을 무시할 사람은 너무나 많습니다. 소규모 프로젝트에서는 큰 문제가 되지 않았지만, javascript에도 많은 대규모 프로젝트들이 생기며, 이 문제는 심해져 갔습니다. 다행히, 지금은 Typescript가 나왔습니다.

Typescript는 아주 기발한 방법으로 (솔직히 말하면 조금 꼼수를 써서) Javascript를 Type이 존재하는 언어로 재탄생 시켰습니다.

아무튼, Typescript의 탄생으로 인해 Javascript도 type이 있는 interface를 개발자들에게 제공해 줄 수 있게 되었고, Javascript는 대규모 개발에는 어울리지 않는다는 오명도 조금은 벗을 수 있게 되었습니다.

Nest.js의 출시 역시 놓칠 수 없는 포인트입니다.

Java Spring이라는 Framework가 제공하는 DI, IoC 기반의 개발은 Java를 포기하기 힘들게 만드는 Spring의 큰 장점입니다. 하지만, 지금은 Nest.js의 출시로 인해, Javascript에서도 마치 Java Spring을 쓰는 것처럼 Annotation을 통해 편리하게 DI, IoC 기반의 개발을 할 수 있습니다.

그리고 Nest.js는 Typeorm이라는 ORM 프레임워크 역시 적극적으로 지원하고 있기에, 더더욱 Java Spring + JPA 과 같은 조합을 쓰는 느낌으로 Javascript(Nest.Js + Typeorm) 개발을 할 수 있습니다.

Nest.js에 대해 조금 더 자세히 알고 싶으시다면 링크를 통해 글을 참조해보셔도 좋을 것 같다고 합니다.

또한, Javascript 진영에도 Jest나 Mocha 같은 좋은 테스트툴이 나왔기에 DI, IoC 구조가 제공하는 장점 중 하나인 `유닛테스트의 편리함` 역시 잘 활용할 수 있게 되었습니다.

결론은, 서버 개발 언어로서의 javascript는 발전하고 있다는 것 입니다. 부족한 부분은 채워지고 있고(Typescript, Next.js) 개발 툴 역시 보강되고 있습니다. (Typeorm, Jest, Mocha)

위에서도 말했지만, `Javascript는 좋은 부분이 많은 언어이지만, 위험하고 나쁜 부분은 더 많습니다.` 
그렇지만 좋은 부분도 천천히, 하지만 확실하게 많아지고 있습니다.

네이버 파이낸셜의 페이플랫폼 직속 팀에서는 미래(PHP가 이끌던 백엔드 개발 트렌드를 Java Spring이 가져갔던 것처럼, 언젠가는 Node.js 역시 개발 트렌드를 주도)에 대비하여, 적극적으로 Node.js를 도입하고 노하우를 쌓아가고 있다고 합니다.

• 네이버 쇼핑 구매 목록 API를 제공하는 타임라인 서버
• 혜택 광고 API를 제공하는 리워드 서버
• 카드 정보 API를 제공하는 간편 입력 서버
• 마이데이터 API를 제공하는 마이데이터 서버

... 외 다양한 서버들을 Node.js(+ MSA, k8s)로 개발하고 운영하고 있다고 합니다. 또한, 대규모의 CPU 연산이 필요한 신규 DB 구축을 위한 마이그레이션 작업 역시 MSA 구조의 Node.js 서버로 처리해서, Node.js 서버로도 대규모 CPU 연산 작업이 가능하다는 것을 검증했고, 노하우를 쌓아가고 있다고 합니다.

내용들을 정리하며, Node.js에 대해 궁금해졌고 공부해보면 좋을 것 같다는 생각이 들었습니다. Java Spring을 경험해본 입장에서 비교해보며, 어떤 차이가 있는지 토이프로젝트를 진행해봐야겠습니다.

Reference

• https://youteam.io/blog/top-companies-that-used-node-js-in-production/#PayPal
• 'Node.js'VS'Java Spring'
• https://medium.com/maestral-solutions/alternative-package-managers-for-node-js-f52805b98064
• https://medium.com/naverfinancial/nestjs-%EC%82%AC%EC%9A%A9-%EC%86%8C%EA%B0%90-f851527f7922