선장 일지

유저와 게시물 데이터의 관계 형성

유저와 게시물의 관계는 one to many의 관계를 가지고 있다. 한 명의 유저는 여러 게시글을 작성할 수 있기 때문이다.

User Entity 관계 추가

@Entity()
@Unique(['username'])
export class User extends BaseEntity {
    ...
    
    @OneToMany(type => Board, board => board.user, {eager: true})
    boards: Board[];
    
}

Board Entity 관계 추가

@Entity()
export class Board extends BaseEntity {
  ...

  @ManyToOne(type => User, user => user.boards, {eager: false})
  user: User;
}

게시물 생성할 때 유저 정보 넣어주기

아래 플로우로 게시물을 생성하면 된다.

게시물 생성 요청 -> 헤더안에 있는 토큰으로 유저 정보 -> 유저 정보와 게시물 관계 형성하며 게시물 생성

board repository 수정 

export class BoardRepository extends Repository<Board> {
  constructor(dataSource: DataSource) {
    super(Board, dataSource.createEntityManager());
  }

  async createBoard(createBoardDto: CreateBoardDto, user: User): Promise<Board> {
    const {title, description} = createBoardDto;

    const board = this.create({
      title,
      description,
      status: BoardStatus.PUBLIC,
      user	// 추가
    })

    await this.save(board);
    return board;
  }
}

board service 수정

export class BoardService {
  ...
  
  createBoard(createBoardDto: CreateBoardDto, user: User): Promise<Board> {
    return this.boardRepository.createBoard(createBoardDto, user);
  }
}

board controller 수정

export class BoardsController {
  ...
  @Post()
  @UsePipes(ValidationPipe)
  createBoard(
    @Body() createBoardDto: CreateBoardDto,
    @GetUser() user: User,
  ): Promise<Board> {
    return this.boardsService.createBoard(createBoardDto, user);
  }
}

테스트

해당 유저의 게시물만 가져오기

controller 수정

  @Get()
  getAllBoard(
    @GetUser() user: User,
  ): Promise<Board[]> {
    return this.boardsService.getAllBoards(user);
  }

service 수정 

  async getAllBoards(user: User): Promise<Board[]> {
    const query = this.boardRepository.createQueryBuilder('board');

    query.where('board.userId = :userId', {userId: user.id});

    const boards = await query.getMany();
    return boards;
  }

테스트

토큰에 있는 유저가 작성한 게시글만 response로 오는 모습

자신이 생성한 게시물 삭제하기

controller 수정

  @Delete('/:id')
  deleteBoard(
    @Param('id', ParseIntPipe) id: number,
    @GetUser() user: User
  ): Promise<void> {
    return this.boardsService.deleteBoard(id, user);
  }

service 수정

  async deleteBoard(id: number, user: User): Promise<void> {
    const result = await this.boardRepository.delete({id, user});
    
    if(result.affected === 0) {
      throw new NotFoundException(`Can't find Board with id ${id}`);
    }
  }

테스트

4번 게시글이 삭제된 모습이다.

Reference

• https://docs.nestjs.com/
• https://docs.nestjs.com/techniques/database
• https://orkhan.gitbook.io/typeorm/docs/select-query-builder

인증 기능 구현을 위한 준비

AuthModule

• AuthController
• UserEntity
• AuthService
• UserRepository
• JWT, Passport

명령어를 통해 생성

nest g module auth 
nest g controller auth --no-spec 
nest g service auth --no-spec 

명령어를 통해 생성해주면 자동으로 의존성이 적용된다.

User를 위한 Entity 생성

유저에 대한 인증을 하는 것이니 유저가 필요하다.

user.entity.ts 생성

import { BaseEntity, Column, Entity, PrimaryGeneratedColumn } from "typeorm";

@Entity()
export class User extends BaseEntity {
    @PrimaryGeneratedColumn()
    id: number;
    
    @Column()
    username: string;

    @Column()
    password: string;
}

user.repository.ts생성

import { DataSource, Repository } from "typeorm";
import { User } from "./user.entity";
import { Injectable } from "@nestjs/common";

@Injectable()
export class UserRepository extends Repository<User> {
  constructor(dataSource: DataSource) {
    super(User, dataSource.createEntityManager());
  }
}

auth module에 repository import

@Module({
  imports: [
    TypeOrmModule.forFeature([User])
  ],
  controllers: [AuthController],
  providers: [
    AuthService,
    UserRepository
  ]
})
export class AuthModule {}

auth service에 repository 추가

@Injectable()
export class AuthService {
    constructor (
        @InjectRepository(UserRepository) 
        private userRepository: UserRepository,
    ) {}
}

회원가입기능 구현

dto 추가

export class AuthCredentialDto {
    username: string;
    password: string;
}

repository 함수 추가

  async createUser(authCredentialDto: AuthCredentialDto): Promise<void> {
    const {username, password} = authCredentialDto;
    const user = this.create({username, password});
    
    await this.save(user);
  }

service 함수 추가

    async signUp(authCredentialDto: AuthCredentialDto): Promise<void> {
        return this.userRepository.createUser(authCredentialDto);
    }

controller 함수 추가

    @Post('/signup')
    signUp(@Body() authCredentialDto: AuthCredentialDto): Promise<void> {
        return this.authService.signUp(authCredentialDto);
    }

테스트

user라는 테이블로 postgresql에 생성하려고하니 예약어?라고하여 생성이 안됩니다.

CREATE TABLE "user" ( id SERIAL PRIMARY KEY, username VARCHAR(30) NOT NULL, password VARCHAR(30) NOT NULL );

위와같이 사용하거나 이미 존재하는 테이블이 있다고하면 아래와 같이 테이블을 드랍한 뒤, 위 명령어를 수행하면 됩니다.

DROP TABLE IF EXISTS "user";

유저 데이터 유효성 체크

class-validator

dto에 class-validator를 이용하여 유효성을 체크해주는 데코레이터를 추가

import { IsString, Matches, MaxLength, MinLength } from "class-validator";

export class AuthCredentialDto {
    @IsString()
    @MinLength(4)
    @MaxLength(20)
    username: string;

    @IsString()
    @MinLength(4)
    @MaxLength(20)
    // 영어랑 숫자만 가능한 유효성 체크
    @Matches(/^[a-zA-Z0-9]*$/)
    password: string;
}

ValidationPipe을 controller에 추가

    @Post('/signup')
    signUp(@Body(ValidationPipe) authCredentialDto: AuthCredentialDto): Promise<void> {
        return this.authService.signUp(authCredentialDto);
    }

위처럼 controller에 추가하면 service로직으로 가지않고 controller에서 요청을 차단한다.

유저 이름에 유니크한 값 주기

2가지 방법

1. repository에서 findOne 메소드를 이용해서 이미 같은 유저 이름을 가진 아이디가 있는지 확인하고 없다면 데이터를 저장하는 방법. 하지만, 해당 방법은 데이터베이스 처리를 두번 해줘야 한다.

2. 데이터베이스 레벨에서 만약 같은 이름을 가진 유저가 있다면 에러를 던져주는 방법

2번째 방법으로 구현

구현하는 방법은 간단하다. entity에 unique 데코레이터를 사용하면 된다.

import { BaseEntity, Column, Entity, PrimaryGeneratedColumn, Unique } from "typeorm";

@Entity()
@Unique(['username'])
export class User extends BaseEntity {
    @PrimaryGeneratedColumn()
    id: number;
    
    @Column()
    username: string;

    @Column()
    password: string;
}

위처럼 username을 Unique화 하면 저장할 때 username이 있다면 저장할 수 없도록 한다.

위처럼 이미 username이 있다면, 별다른 에러 메시지 없이 500 error를 던져준다. 해당 에러 메시지는 문제를 해결하기에는 어려움을 줄 수 있다. 

500 에러를 주는 이유는 nest.js에서 try catch 구문인 catch에서 별다른 에러를 잡지 않는다면 controller레벨로 가서 500에러를 던져버리기 때문이다. 그렇기 때문에, 다른 에러 메시지와 코드를 주고싶다면 try catch 문을 추가해야 한다.

repository 코드 수정

  async createUser(authCredentialDto: AuthCredentialDto): Promise<void> {
    const {username, password} = authCredentialDto;
    const user = this.create({username, password});
    
    try { 
        await this.save(user);
    } catch (error) {
        if(error.code === '23505') {
            throw new ConflictException('Existing username');
        } else {
            throw new InternalServerErrorException();
        }
    }
  }

error.code가 23505를 해준 이유는 log를 출력해본 뒤, 해당 에러 코드를 catch해준 코드이다.

비밀번호 암호화 하기

현재는 비밀번호가 db에 노출되는 상태이다. 이것은 보안에 치명적일 수 있다.

-> 암호화

bcryptjs라는 모듈을 통해 암호화 해주려고 한다.

npm install bcryptjs --save

비밀번호를 db에 저장하는 방법

1. 원본 비밀번호를 저장 (최악)

2. 비밀번호를 암호화 키(Encryption Key)와 함께 암호화 (양방향)

-> 암호를 이용하여 비밀번호를 암호화하고 복화하를 하는 방법 (암호화 키가 노출되면 알고리즘은 대부분 오픈되어 있기 때문에 위험도 높음)

3. SHA256 등 Hash로 암호화해서 저장 (단방향)

• - 1234 -> 03ac674216f3e15c761ee1a5e255f067953623c8b388b4459e13f978d7c846f4로 암호화
• 암호화만 가능하고, 복화하는 가능하지 않다. (안정적)
• 하지만, 레인보우 테이블을 만들어서 암호화된 비밀번호를 비교해서 알아낼 수 있음 (유저들이 비슷한 암호를 사용한다고 가정하고 여러 방법으로 비밀번호를 알아내는 방법)

4. 솔트(salt) + 비밀번호(Plain Password)를 해시로 암호화해서 저장. 암호화할 때, 원래 비밀번호에다 salt를 붙인 후에 해시로 암호화

• 1234 ==>> salt_1234를 해시로 암호화
• 레인보우 테이블을 통해 해킹 시도를 차단
• bcryptjs는 위와같은 방식

bcrypts를 사용하여 user.repository.ts 코드 추가

import * as bcrypt from 'bcryptjs';  // bcryptjs 모듈 import

async createUser(authCredentialDto: AuthCredentialDto): Promise<void> {
    const {username, password} = authCredentialDto;

    const salt = await bcrypt.genSalt();
    const hashedPassword = await bcrypt.hash(password, salt);
    const user = this.create({username, password: hashedPassword});
    
    try { 
        await this.save(user);
    } catch (error) {
        if(error.code === '23505') {
            throw new ConflictException('Existing username');
        } else {
            throw new InternalServerErrorException();
        }
    }
  }

테스트

해시값으로 비밀번호가 저장되는 것을 확인할 수 있다.

로그인 기능 구현

service 코드 추가

    async signIn(authCredentialDto: AuthCredentialDto): Promise<string> {
        const {username, password} = authCredentialDto;
        const user = await this.userRepository.findOneBy({username});

        if(user && (await bcrypt.compare(password, user.password))) {
            return 'logIn success'
        } else {
            throw new UnauthorizedException('logIn fail')
        }
    }

controller 코드 추가

    @Post('/signin')
    signIn(@Body(ValidationPipe) authCredentialDto: AuthCredentialDto): Promise<string> {
        return this.authService.signIn(authCredentialDto);
    }

테스트

bcrypt를 테스트할 때 가입한 아이디로 로그인에 성공하는 것을 확인할 수 있다.

JWT에 대하여

로그인할 때 로그인한 고유 유저를 위한 토큰을 생성해야 하는데 그 토큰을 생성할 때 JWT라는 모듈을 사용한다.

JWT

Json Web Token의 약자로 당사자간에 정보를 JSON 개체로 안정하게 전송하기 위한 컴팩트하고 독립적인 방식을 정의하는 개방형 표준이다. 이 정보는 디지털 서명이되어 있으므로 확인하고 신뢰할 수 있다.
-> 간단하게 이야기하자면, 정보를 안전하게 전할 때 혹은 유저의 권한 같은 것을 체크하기 위해서 사용하는데 유용한 모듈이다.

JWT 구조

aaaaaaa.bbbbbbbb.ccccccccccccc

header

토큰에 대한 메타 데이터를 포함하고 있다. (타입, 해싱 알고리즘 SHA 256, RSA, ....)

payload

유저 정보, 망료기간, 주제 등등

verify Signature

토큰이 보낸 사람에 의해 서명되었으며 어떤 식으로든 변경되지 않았는지 확인하는 데 사용되는 서명이다. 서명은 헤더 및 페이로드, 서명 알고리즘, 비밀 또는 공개 키를 사용하여 생성된다.

JWT 사용 흐름

유저 로그인 -> 토큰 생성 -> 토큰 보관

그렇다면, 생성된 토큰으로 어떻게 인증을 할까?

생성된 토큰은 유저가 로그인할 때 헤더에 포함하여 서버에 요청한다.

서버는 aaaaa.bbbbb 부분을 통해 ccccc부분을 생성한다.

생성할 때, 위 `your-256-bit-secret`이 서버마다 다르기 때문에 서버에서 만들어진 signature가 같다면, 로그인 성공 같지 않다면 실패로 토큰을 통해 로그인을 한다.

JWT를 이용해서 토큰 생성하기

모듈 설치

npm install @nestjs/jwt @nestjs/passport passport passport-jwt --save

애플리케이션에 JWT 모듈 등록하기

@Module({
  imports: [
    JwtModule.register({
      secret:'Secret1234',
      signOptions:{
        expiresIn: 60 * 60,
      }
    }),
    TypeOrmModule.forFeature([User])
  ],
  controllers: [AuthController],
  providers: [
    AuthService,
    UserRepository
  ]
})
export class AuthModule {}

• Secret
  • 토큰을 만들 때 이용하는 Secret 텍스트 (아무 텍스트나 넣어도 된다)
• expiresIn
  • 정해진 시간 이후에는 토큰이 유효하지 않게 된다. 60 * 60은 한시간 이후에 토큰이 만료됨을 나타낸다. ( 초 단위 인듯하다.)

애플리케이션에 Passport 모듈 등록하기

@Module({
  imports: [
    PassportModule.register({ defaultStrategy: 'jwt'}),
    JwtModule.register({
      secret:'Secret1234',
      signOptions:{
        expiresIn: 60 * 60,
      }
    }),
    TypeOrmModule.forFeature([User])
  ],
  controllers: [AuthController],
  providers: [
    AuthService,
    UserRepository
  ]
})
export class AuthModule {}

로그인 성공 시 JWT를 이용해서 토큰 생성해주기

Service에 SignIn 메소드에서 생성해주면 된다. auth 모듈에 JWT를 등록해주었기 때문에 Service에서 JWT를 가져올 수 있다.

@Injectable()
export class AuthService {
    constructor (
        @InjectRepository(UserRepository) 
        private userRepository: UserRepository,
        private jwtService: JwtService
    ) {}
    ...
}

service 코드 추가

    async signIn(authCredentialDto: AuthCredentialDto): Promise<{accessToken: string}> {
        const {username, password} = authCredentialDto;
        const user = await this.userRepository.findOneBy({username});

        if(user && (await bcrypt.compare(password, user.password))) {
            // 유저 토큰 생성 (Secret + Payload)
            // 토큰을 통해 정보를 가져가기 쉽기 때문에, 중요한 정보는 넣으면 안된다.
            const payload = {username};
            const accessToken = await this.jwtService.sign(payload);

            return {accessToken};
        } else {
            throw new UnauthorizedException('logIn fail')
        }
    }

controller 코드 추가

    @Post('/signin')
    signIn(@Body(ValidationPipe) authCredentialDto: AuthCredentialDto): Promise<{accessToken: string}> {
        return this.authService.signIn(authCredentialDto);
    }

로그인할 때 토큰을 생성해주었다.

로그인할 때, 액세스 토큰이 response로 오는 모습이다. 어떤 의미인지 jwt 사이트에서 확인해볼 수 있다. 토큰을 복사하여 jwt사이트에서 확인해보자.

payload에 username이 보이는 것을 볼 수 있다.

Passport, JWT를 이용해서 토큰 인증 후 유저 정보 가져오기

 현재 payload안에 username을 넣어놓은 상태이다. 해당 username을 통해 유저 정보를 가져오는 것을 만들어 보자.

npm install @types/passport-jwt --save

jwt.strategy.ts 생성

import { Injectable, UnauthorizedException } from "@nestjs/common";
import { PassportStrategy } from "@nestjs/passport";
import { InjectRepository } from "@nestjs/typeorm";
import { ExtractJwt, Strategy } from "passport-jwt";
import { UserRepository } from "./user.repository";
import { User } from "./user.entity";

// 다른 곳에서도 해당 class를 사용할 수 있도록
@Injectable()
// Strategy는 jwt strategy를 사용하기 위해 넣어주는 것
export class JwtStrategy extends PassportStrategy(Strategy) {
    constructor (
        @InjectRepository(UserRepository)
        private userRepository: UserRepository
    ) {
        super({
            secretOrKey: 'Secret1234', // 토큰을 생성할 때 사용한 key를 유효한지 확인하기 위해 같은 key 값을 넣어 준다.
            // Bearer Token의 type으로 넘어오는 값을 추출한다는 의미
            jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken() 
        })
    }

    async validate(payload) {
        const {username} = payload;
        const user: User = await this.userRepository.findOneBy({username});

        if(!user) {
            throw new UnauthorizedException();
        }

        return user;
    }
}

module에 추가

@Module({
  imports: [
    PassportModule.register({ defaultStrategy: 'jwt'}),
    JwtModule.register({
      secret:'Secret1234',
      signOptions:{
        expiresIn: 60 * 60,
      }
    }),
    TypeOrmModule.forFeature([User])
  ],
  controllers: [AuthController],
  providers: [
    AuthService,
    JwtStrategy,
    UserRepository
  ],
  exports: [
    JwtStrategy,
    PassportModule
  ]
})
export class AuthModule {}

요청안에 유저 정보(유저 객체)가 들어가게 하는 방법

validate 메소드에서 return 값을 user 객체로 주었다. 그래서 요청 값안에 user 객체가 들어있으면 하는데 현재 요청을 보낼 때는 user 객체가 없다. 어떤 방식으로 가질 수 있을까?

UseGuards

UseGuards안에 @nestjs/passport에서 가져온 AuthGuard()를 이용하면 요청안에 유저 정보를 넣어줄 수 있다.

Controller에서 데코레이터를 추가해주면 된다.

    @Post('/test')
    @UseGuards(AuthGuard())
    test(@Req() req) {
        console.log('req', req);
    }

로그를 보면 위처럼 user에 대한 정보가 담겨있는 모습이다.

nestjs의 middleware들에 대해서

nestjs에는 여러가지 미들웨어가 있다.

Pipes, Filters, Guards, Interceptors 등의 미들웨어로 취급되는 것들이 있는데, 각각 다른 목적을 가지며 사용되고 있다.

각 미들웨어가 불러지는 순서는 아래와 같다.

middleware -> guard -> interceptor(before) -> pipe -> controller -> service -> controller -> interceptor (after) -> filter (if applicable) -> client

// 다른 곳에서도 해당 class를 사용할 수 있도록
@Injectable()
// Strategy는 jwt strategy를 사용하기 위해 넣어주는 것
export class JwtStrategy extends PassportStrategy(Strategy) {
    constructor (
        @InjectRepository(UserRepository)
        private userRepository: UserRepository
    ) {
        super({
            secretOrKey: 'Secret1234', // 토큰을 생성할 때 사용한 key를 유효한지 확인하기 위해 같은 key 값을 넣어 준다.
            // Bearer Token의 type으로 넘어오는 값을 추출한다는 의미
            jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken() 
        })
    }

    async validate(payload) {
        const {username} = payload;
        const user: User = await this.userRepository.findOneBy({username});

        if(!user) {
            throw new UnauthorizedException();
        }
        
        console.log("testtesttest");
        return user;
    }
}

위처럼 validate에 로그를 추가해보았다. 그 후 postman에서 AuthGuard()와 관련한 controller로 요청을 보내보았다.

위와 같이 가장 먼저 log가 출력되는 모습을 확인할 수 있다. guard가 가장 먼저 실행되는 것이 맞나 보다..?

커스텀 데코레이터 생성하기

위에서 req를 통해 user라는 객체가 들어가 있음을 확인했다. 그렇다면, req.user라는 로그만 출력하면 user와 관련한 log만 출력되었을 것이다. 하지만, req.user보다 user라는 파라미터로 가져오는 것이 더 편리할 것 같다고 생각한다. req.user가 아닌 user라는 파라미터로 가져올 수 있는 방법은 없을까??

-> 커스텀 데코레이터 사용

get-user.decorator.ts 생성

import { createParamDecorator } from "@nestjs/common";
import { ExecutionContextHost } from "@nestjs/core/helpers/execution-context-host";
import { User } from "./user.entity";

export const GetUser = createParamDecorator((data, ctx: ExecutionContextHost): User => {
    const req = ctx.switchToHttp().getRequest();
    return req.user;
})

controller 코드 수정

    @Post('/test')
    @UseGuards(AuthGuard())
    test(@GetUser() user: User) {
        console.log('user', user);
    }

인증된 유저만 게시물 보고 쓸 수 있게 만들기

board module에 auth module import

import { TypeOrmModule } from '@nestjs/typeorm';
import { Module } from "@nestjs/common";
import {Board} from "./board.entity"
import { BoardsController } from "./boards.controller";
import { BoardService } from "./boards.service";
import { BoardRepository } from './board.repository';
import { AuthModule } from 'src/auth/auth.module';

@Module({
  imports: [
    TypeOrmModule.forFeature([Board]),
    AuthModule
  ],
  controllers: [BoardsController],
  providers: [
    BoardService,
    BoardRepository,
  ]
})
export class BoardsModule {}

controller에 Guard 추가

@Controller("boards")
@UseGuards(AuthGuard())
export class BoardsController {
  ...
}

테스트

토큰없이 접근하려고하면, 접근 권한이 없다는 Message와 401 error code가 오는 것을 확인할 수 있다. 토큰을 추가하고 요청을 보내면 모든 게시물이 오는 것을 확인할 수 있다.

Reference

• https://docs.nestjs.com/
• https://docs.nestjs.com/techniques/database
• https://github.com/typestack/class-validator
• https://emn178.github.io/online-tools/sha256.html
• https://jwt.io/

Nest.js

효율적이고 확장 가능한 Node.js 서버 측 애플리케이션을 구축하기 위한 프레임워크이다. progressive javascript를 사용하며, typescript로 구축되고 완벽하게 지원하지만 개발자는 순수 javascript로 코딩할 수 있으며, OOP(객체 지향 프로그래밍), FP(함수형 프로그래밍), FRP(기능적 반응형 프로그래밍)의 요소를 결합합니다.

내부적으로 Nest는 Express(기본값)와 같은 강력한 HTTP 서버 프레임워크를 사용하며 선택적으로 Fastify도 사용하도록 구성할 수 있다!

Nest는 이러한 일반적인 Node.js 프레임워크(Express/Fastify)보다 높은 수준의 추상화를 제공할 뿐만 아니라 개발자에게 직접 API를 노출한다. 따라서 개발자는 기본 플랫폼에서 사용할 수 있는 수 많은 타사 모듈을 자유롭게 사용할 수 있다.

처음 nest.js로 프로젝트를 생성하면 많은 기본 파일들이 생성된다. 아직 무엇인지 정확하게 모르기때문에 정리해보자.

eslintrc.js

개발자들이 특정한 규칙을 가지고 코드를 깔끔하게 짤 수 있게 도와주는 라이브러리로 typescript를 쓰는 가이드라인을 제시, 문법에 오류가 나면 알려주는 역할등을 한다.

nest-cli.json

nest 프로젝트를 위해 특정한 설정을 할 수 있는 Json 파일

tsconfig.json

어떻게 typescript를 컴파일할지 설정

tsconfig.build.json

tsconfig.json의 연장선상 파일이며, build를 할 때 필요한 설정들 "excludes"에서는 빌드할 때 필요없는 파일들 명시

package.json

build: 운영 환경을 위한 빌드

format: 린트에러가 났을지 수정

start: 앱 시작

src 폴더 (대부분의 비즈니스 로직이 들어가는 곳)

main.ts - 앱을 생성하고 실행 (앱의 시작점.)

app.module.ts - 앱 모듈을 정의?

실행 방법

npm run start:dev

main.ts를 보면 3000번 port로 listen하고 있는 코드가 보인다. 테스트하기 위해 localhost:3000를 탐색해보면 아래와 같이 받음을 알 수 있다.

그렇다면, Hello Wolrd!는 어디에 적혀있는 걸까? main.ts 파일의 코드를 보면 ./app.module을 import하여 create한 것을 볼 수 있다. app.moduel을 가보면, @Module 어노테이션에 ./app.contorller와 ./app.service를 추가한 것을 확인할 수 있다. 이제 app.controller.ts파일을 보면, @Get()아래 getHello()라는 함수가 보인다. appService의 getHello()를 가져와서 반환해주는데 app.service.ts 파일을 보면 'Hello World!' 를 return 하고있는 것을 확인할 수 있다. 위와같은 방식으로 Hello World!를 찾아서 반환해준다.

불필요한 파일 제거

기본 파일에서 필요없는 파일을 제거하자.

• src/app.controller.spec.ts
• src/app.controller.ts
• src/app.service.ts
• test directory

위의 4개 파일을 삭제했다. root module아래로 여러 모듈을 추가하여 프로젝트를 돌리기 위함이다.

Create Board Module

각 기능별로 Module화 시키기위해 Module을 만들어야 한다. nest.js는 명령어로 생성할 수 있는데, 아래처럼 사용하면 된다.

$ nest g module boards

명령어를 치면 app.module.ts에 boardmodule이 자동으로 Import 되어있고 boardmodule 또한 생성된걸 확인할 수 있다.

컨트롤러는 @Controller 데코레이터로 클래스를 데코레이션하여 정의된다. 데코레이터는 인자를 Controller에 의해서 처리되는 "경로"를 받는다.

Handler?

핸들러는 @Get, @Post, @Delete 등과 같은 데코레이터로 장식된 컨트롤러 클래스 내의 단순한 메서드이다.

Create Board Controller 

$ nest g controller boards --no-spec

module을 생성할 때와 같이 import 같은 경우 명령어를 통해 자동으로 코드를 완성해준다.

@Controller('boards')
export class BoardsController {
    
}

@Controller('boards')는 이 클래스가 '/boards' 경로에 대한 요청을 처리함을 나타낸다.

Create Board Service

$ nest g service boards --no-spec

보통 service 로직은 데이터 베이스와 관련된 로직을 처리한다.

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

@Injectable()
export class BoardsService {}

Service에는 @Injectable 데코레이터가 있다. 대강 알아보니 DI system에 등록되는 데코레이터라고 한다. next.js는 이것을 이용해서 다른 컴포넌트에서 이 서비스를 사용할 수 있게 만들어준다. Service 로직은 Controller를 통해 들어오기 때문에 Controller에 Service를 Import하도록 코드를 추가해준다.

@Controller("boards")
export class BoardsController {
  constructor(private boardsService: BoardsService) {}
  
}

constructor를 통해 DI에 등록되어있는 BoardsService를 가져온다. 여기서 readonly를 추가하기도 하는데, 의존성 주입을 통해 주입된 서비스가 변경되지 않도록 하기 위해 사용한다고 한다. 이를 통해 주입된 의존성이 변경되지 않음을 보장할 수 있다. 나도 readonly를 추가해주었다.

@Controller("boards")
export class BoardsController {
  constructor(private readonly boardsService: BoardsService) {}
  
}

Create Board Model

모델을 정의할 때, class 혹은 interface로 생성하면 된다. class는 변수의 타입을 체크하고 인스턴스를 생성할 수 있다. interface는 변수의 타입만 체크할 수 있다.

나는 일단 변수의 타입만 체크하기 위해 interface로 생성했다.

export interface Board {
  id: string;
  title: string;
  description: string;
  status: BoardStatus;
}

export enum BoardStatus {
  PUBLIC = "PUBLIC",
  PRIVATE = "PRIVATE",
}

Create Board(Service)

  createBoard(title: string, description: string): Board {
    const board: Board = {
      id: uuid(), // 유니크한 값으로 게시판에 줄 수 있음
      title,
      description,
      status: BoardStatus.PUBLIC,
    };

    this.boards.push(board);
    return board;
  }

일단, local에만 저장하여 테스트할 것이기 때문에 UUID 라이브러리를 사용하여 겹치지않게끔 값을 생성해주었다. UUID를 사용하려면 아래 명령어를 통해 사용할 수 있다.

npm install uuid --save

status의 경우 기본을 PUBLIC으로 하여 게시글을 생성해주었다.

Create Board(Controller)

Board를 생성하기 위해서는 request Body를 가져와야 한다. nest.js의 경우 @Body 데코레이터를 통해 request Body를 가져올 수 있다.

  @Post()
  createBoard(
    @Body("title") title: string,
    @Body("description") description: string
  ): Board {
    return this.boardsService.createBoard(title, description);
  }

Postman으로 정상적으로 post되는 모습을 확인할 수 있다.

Create DTO

DTO는 계층간 데이터 교환을 위한 객체이다. DTO를 사용하는 이유는 데이터 유효성을 체크하기 위함으로 알고 있다. DTO 역시 interface 혹은 class로 생성할 수 있지만, nestjs에서는 class로 만들 것을 권장한다고 한다.

export class CreateBoardDto {
  title: string;
  description: string;
}

Create get board by id

Service

  getBoardById(id: string): Board {
    return this.boards.find((board) => board.id === id);
  }

Controller

  @Get("/:id")
  getBoardById(@Param("id") id: string): Board {
    return this.boardsService.getBoardById(id);
  }

Create delete board by id

Service

  deleteBoardById(id: string): void {
    // filter 이후 로직은 id가 같은 것만 남기고 다른 것은 지우는 로직
    this.boards = this.boards.filter((board) => board.id !== id);
  }

Controller

  @Delete("/:id")
  deleteBoardById(@Param("id") id: string): void {
    this.boardsService.deleteBoardById(id);
  }

Create update board status

Service

  updateBoardStatus(id: string, status: BoardStatus): Board {
    const board = this.getBoardById(id);
    board.status = status;
    return board;
  }

Controller

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

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

  @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}

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

특정 게시물을 찾을 때 없는 경우 결과 값 처리

현재 특정 게시물을 ID로 가져올 때 없는 아이디의 게시물을 가져오려고 한다면 결과값으로 아무 내용없이 돌아온다. 

  getBoardById(id: string): Board {
    const found = this.boards.find((board) => board.id === id);
    if (!found) throw new NotFoundException();
    return found;
  }

이를 해결하기 위해서는 service로직에서 erorr를 return 해주면 된다. Board객체를 return한다고 되어있지만, error를 return해도 별다른 문제가 발생하지 않는 듯 하다.

http://localhost:3001/boards/1

위 요청을 보내보니

{ "message": "Not Found", "statusCode": 404}

위처럼 명확한 error code와 message가 오는 모습이다. 만약, 해당 message가 명확하지 않다고 생각하여 추가 문구를 적고 싶다면 아래와 같이 수정해주면 된다.

  getBoardById(id: string): Board {
    const found = this.boards.find((board) => board.id === id);
    if (!found) throw new NotFoundException(`Can't find Board with id ${id}`);
    return found;
  }

{ "message": "Can't find Board with id 1", "error": "Not Found", "statusCode": 404}

없는 게시물을 지우려할 때 결과 값 처리

  deleteBoardById(id: string): void {
    // filter 이후 로직은 id가 같은 것만 남기고 다른 것은 지우는 로직
    const found = this.getBoardById(id);
    this.boards = this.boards.filter((board) => board.id !== found.id);
  }

이전에 작성한 getBoardById() 함수를 통해 에러를 처리해주면 된다. (재사용)

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

구현 방법

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;
  }
}

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

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

PostgresSQL 적용

https://www.postgresql.org/ftp/pgadmin/pgadmin4/v8.9/macos/

https://postgresapp.com/?downloads.html

다운로드가 되어있지 않았다면 위 링크를 통해 다운받아 주면 된다.

데이터베이스는 위와같이 만들어주었다.

TypeORM

node.js에서 실행되고 TypeScript로 작성된 객체 관계형 매퍼 라이브러리

TypeORM은 MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana 및 WebSQL 같은 여러 데이터베이스를 지원한다.

ORM

객체와 RDB의 데이터를 자동으로 변형 및 연결하는 작업이다.

ORM을 이용한 개발은 객체와 데이터베이스의 변형에 유연하게 사용할 수 있다.

TypeORM vs Pure Javascript

typeORM

const boards = Board.find{{title:'hello', status:'PUBLIC'};

pure javascript

db.query('SELECT * FROM boards WHERE title = "hello" AND status = "PUBLIC", (err, result)=>
{
	if(err) {
    	throw new Error('Error')
    }
    boards = result.rows;
}

TypeORM 특징과 이점

• 모델을 기반으로 데이터베이스 테이블 체계를 자동으로 생성
• 데이터베이스에서 개체를 쉽게 삽입, 업데이트 및 삭제할 수 있다.
• 테이블 간의 매핑(일대일, 일대 다 및 다대 다)을 만든다.
• 간단한 CLI 명령을 제공
• TypeORM은 간단한 코딩으로 ORM 프레임워크를 사용하기 쉽다.
• TypeORM은 다른 모듈과 쉽게 통합된다.

TypeORM 애플리케이션에서 이용

필요 모듈

• @nestjs/typeorm
  • nest.js에서 TypeORM을 사용하기 위해 연동시켜주는 모듈
• typeorm
  • TypeORM 모듈
• pg
  • Postgres 모듈

npm install pg typeorm @nestjs/typeorm --save

TypeORM 애플리케이션 연결

typeORM 설정파일 생성

import { TypeOrmModuleOptions } from "@nestjs/typeorm";

export const typeORMConfig : TypeOrmModuleOptions = {
    type: "postgres",
    host: "localhost",
    port: 5432,
    username: "postgres",
    password: "postgres",
    database: "board-app",
    entities: [__dirname + '/../**/*.entity.{js,ts}'],
    synchronize: true
  }

app.module.ts인 root module에서 import

@Module({
  imports: [
    TypeOrmModule.forRoot(typeORMConfig),
    BoardsModule
  ],
  controllers: [BoardsController],
  providers: [BoardsService],
})
export class AppModule {}

게시물을 위한 엔티티 생성

DB를 생성하기 위해서는 CREATE TABLE ...의 쿼리를 통해 생성해주어야 한다. 하지만, TypeORM을 사용할 때는 데이터베이스 테이블로 변환되는 Class이기 때문에 쿼리문을 작성하지 않고, 클래스 안에서 컬럼들을 정의만 해주면 된다.

import { BaseEntity, Column, Entity, PrimaryGeneratedColumn } from "typeorm";
import { BoardStatus } from "./boards.model";

@Entity()
export class Board extends BaseEntity {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  title: string;

  @Column()
  description: string;

  @Column()
  status: BoardStatus;
}

• @Entity
  • 해당 클래스가 엔티티임을 나타내는 데 사용. CREATE TABLE '클래스 이름' 부분이다.
• @PrimaryGeneratedColumn()
  • id 열이 클래스 엔티티의 기본 키 열임을 나타내는 데 사용
• @Column
  • 엔티티의 title 및 description과 같은 다른 열을 나타내는 데 사용

자동적으로 mapping되는 table이 생성이 된다.

Repository 생성

board.repository.ts 파일 생성 

import { DataSource, Repository } from "typeorm";
import { Board } from "./board.entity";

export class BoardRepository extends Repository<Board> {
  constructor(dataSource: DataSource) {
    super(Board, dataSource.manager);
  }
}

생성한 Repository를 다른 곳에서 사용할 수 있게 하기 위해 (Injectable) board.moduel에서 import 시킴

@Module({
  imports: [TypeOrmModule.forFeature([Board])],
  controllers: [BoardsController],
  providers: [
    BoardService,
    BoardRepository,
  ]
})
export class BoardsModule {}

CURD local -> DB

일단, Controller와 Service 부분은 Board라는 객체로 저장했기 때문에 해당 코드들은 주석처리 해줍니다.

Board interface 삭제

export enum BoardStatus {
  PUBLIC = "PUBLIC",
  PRIVATE = "PRIVATE",
}

BoardStatus만 냄겨두고 board-status.enum로 이름을 바꿔줌

Service에 Repository 넣어주기 (Repository Injection)

@Injectable()
export class BoardsService {
  
  // Inject Repository to Service
  constructor (
    @InjectRepository(BoardRepository)
    private boardsRepository: BoardRepository,
  ) {}
}

- @InjectRepository를 이용해서 해당 서비스에서 BoardRepository를 이용한다고 boardRepository 변수에 넣어줌

Service에 getBoardById 메소드 생성

  async getBoardById(id: number): Promise<Board> {
    const found = await this.boardRepository.findOneBy({id});

    if(!found) {
      throw new NotFoundException(`Can't find Board with id ${id}`);
    }

    return found;
  }

- typeOrm에서 제공하는 findOne 메소드 사용

- async await를 이용해서 데이터베이스 작어비 끝난 후 결과값을 받을 수 있도록 함

게시글 생성

BoardService

  async createBoard(createBoardDto: CreateBoardDto): Promise<Board> {
    const {title, description} = createBoardDto;

    const board = this.boardRepository.create({
      title,
      description,
      status: BoardStatus.PUBLIC
    })

    await this.boardRepository.save(board);
    return board;
  }

BoardController

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

postman으로 테스트해보면 postgresql에 잘 생성되는 모습을 볼 수 있다.

service에 있는 db관련된 코드를 repository로 이동

@Injectable()
export class BoardRepository extends Repository<Board> {
  constructor(dataSource: DataSource) {
    super(Board, dataSource.createEntityManager());
  }

  async createBoard(createBoardDto: CreateBoardDto): Promise<Board> {
    const {title, description} = createBoardDto;

    const board = this.create({
      title,
      description,
      status: BoardStatus.PUBLIC
    })

    await this.save(board);
    return board;
  }
}

Service 수정

  createBoard(createBoardDto: CreateBoardDto): Promise<Board> {
    return this.boardRepository.createBoard(createBoardDto);
  }

typeORM에 remove? delete? 같은거 아닌가??

remove

무조건 존재하는 아이템을 remove 메소드를 이용해서 지워야 한다. 그렇지 않으면 에러가 발생한다. (404 error)

delete

아이템이 존재하면 지우고, 존재하지 않으면 아무런 영향이 없다.

그렇다면, delete로 지워보자.

Service 코드추가

  async deleteBoard(id: number): Promise<void> {
    const result = await this.boardRepository.delete(id);
    
    if(result.affected === 0) {
      throw new NotFoundException(`Can't find Board with id ${id}`);
    }
  }

Controller 코드 추가

  @Delete('/:id')
  deleteBoard(@Param('id', ParseIntPipe) id: number): Promise<void> {
    return this.boardsService.deleteBoard(id);
  }

Postman으로 Delete Method를 통해 요청을 보내면 정상적으로 지워지는 걸 확인할 수 있다.

Update 추가

Service 코드 추가

  async updateBoardStatus(id: number, status: BoardStatus): Promise<Board> {
    const board = await this.getBoardById(id);

    board.status = status;
    await this.boardRepository.save(board);

    return board;
  }

Controller 코드 추가

  @Patch("/:id/status")
  updateBoardStatus(
    @Param("id", ParseIntPipe) id: number,
    @Body("status", BoardStatusValidationPipe) status: BoardStatus
  ): Promise<Board> {
    return this.boardsService.updateBoardStatus(id, status);
  }

모든 게시물 가져오기

Service 코드 추가

  async getAllBoards(): Promise<Board[]> {
    return this.boardRepository.find();
  }

Controller 코드 추가

  @Get()
  getAllBoard(): Promise<Board[]> {
    return this.boardsService.getAllBoards();
  }

Reference

• https://docs.nestjs.com/
• https://docs.nestjs.com/techniques/database
• https://typeorm.delightful.studio/classes/_repository_repository_.repository.html
• https://github.com/typeorm/typeorm/blob/master/docs/repository-api.md
• https://velog.io/@sheoae12/NestJS-Custom-Repository-%EB%A7%8C%EB%93%A4%EA%B8%B0
• dd
•  

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