🐧Nest.js 14일차

🐤Nest.js 란?

Nest.js는 타입스크립트를 지원하는 효율적이고 확장 가능한 노드의 서버 애플리케이션 프레임워크이며,

OOP,FP,FRP 요소를 결합하는 특징을 가지고 있다.

[출처](https://velog.io/@funnysunny08/Nest.js-%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80)

• 기본 컨셉은 Provider,Controller를 module로 합치고,그 모듈들을 최종적으로 app.module에 합쳐서 사용한다
• Nestjs는 싱글톤패턴을 지향하기 때문에 인스턴스를 직접 생성하지 않고 모듈을 통해 injection하는 패턴을 권장하고 있다.
• 싱글톤패턴 : 전역 변수를 사용하지 않고 객체를 하나만 생성 하도록하며, 생성된 객체를 어디에서든지 참조 할 수 있도록 하는 패턴

Controller

: 처음 요청이 들어오는 입구 역할을 담당하며 , 비즈니스 로직을 따로 분리하기 위해 진입점을 따로 분리해둔 것이다.

즉, 쉽게 설명하면 좌석을 안내해주는 직원이라고 생각하면 된다.

HTTP Request에 따라 어떠한 비즈니스 로직을 적용 시킬지에 대한 설정을 하면 된다,

장점

효율성

NestJS는 개발자와 팀이 고도로 테스트 가능하고, 확장 가능하며, 느슨하게 결합되고 유지관리가 쉬운 애플리케이션을 만들 수 있는 즉시 사용 가능한 애플리케이션 아키텍처를 제공합니다.

그 외에도 TypeScript기반의 Framework이며 Dependency Injection(의존성주입), Inversion of Control(제어의 역전), Module을 통한 구조화 등 생산성에 용이합니다.

안정성

NestJS는 TypeScript를 적극적으로 도입하면서 서버 어플리케이션 개발 시 발생 가능한 오류들을 사전에 방지할 수 있도록 합니다. 또한 세부적인 Module로 나누어져 있기 때문에 독립적인 Unit Test를 쉽게 작성 가능하도록 구현되어 있습니다.

확장성

NestJS는 Module Class를 지원하며, 각 Module은 비슷한 기능과 개념들을 Class 한 곳에 담아 캡슐화하고 서로 Import가 가능하도록 구현되어 있습니다. 이러한 Module 구조는 Architecture를 조직적(Organize)으로 가져가게 하고 느슨한 결합(Loose Coupling)을 가능하게 만들어 확장성(Extensible)과 테스트 가능성(Testable)을 높입니다.

**IoC(Inversion of Control, 제어의 역전)**

: 자바스크립트에서는 개발자가 new로 새로운 객체를 지정하여 계속 설정해주고 개발자가 제어를 했지만

Nest 에서는 Nest 안에서 전에 해주던 거를 해주고 있으므로 제어가 Nest로 넘어갓다. 즉, 모든 제어권을 프레임워크의 컨테이너에게 넘기는 개념??

Nest.js 설치하기

sudo npm i -g @nestjs/cli

yarn add -g @nestjs/cli

cli(command line interface)?? 신호 상호작용
-> 평소 우리 컴퓨터에서 폴더 아이콘을 클릭해 들어가 안에 있는 파일들을 아이콘으로 보고, 또 그것들을 클릭해서 실행합니다.
CLI는 터미널에서 명령어를 입력해 폴더를 열고, 파일을 실행하는 등의 상호작용하는 방식 

nest -version // 설치가 완료됬는지 버전확인

nest new (새폴더명)

폴더안 숨겨진 파일 제거하기
ls -al //(숨겨진 파일까지 조회)
rm -rf .git // git파일 제거

이렇게 하면 생성된 aaa 폴더에 Nest에 많은 폴더와 파일들이 자동으로 생성된다. 이렇게 기본적으로 설치해주는 것을 보일러 플레이트 라고 한다.

• 보일러 플레이트( 초기 폴더 구조 ) : 새로운 프로젝트를 실행할때 처음 만들어진 Nest 폴더 구조

모든 회사가 같은 보일러 플레이트를 가지고 있는 것은 아닙니다. 회사에 따라 가지고 있는 필요한 기능들이 내장되어 있는 보일러 플레이트가 존재하게 되는 것입니다.

eslint vs prettier 소개

eslint 를 검색해서 ESLint 도 설치

.prettierrc

// .prettierrc

{
      "singleQuote": true,
      "trailingComma": "all"
}

• singleQuote : “ “ 를 ‘ ‘ 로 통일시켜주는 것
• trailingComma : 문장 제일 끝에 콤마( , ) 를 자동으로 붙여주는 것

VS Code 의 설정(Settings) 으로 들어가서 format on save 를 검색

체크를 하게 되면 코드 수정 후 파일을 저장 하게되었을 때 prettier가 적용되게 되는데

우리는 사용하지 않을 것입니다. 왜냐하면 체크 한 사람만 적용되기 때문에 협업을 할 때 불편할 수 있기 때문입니다.

따라서, 모두가 일괄 적용될 수 있게 Settings 부분을 코드로 만들어 보겠습니다.

prettier 저장시 자동포멧팅 실습

파일의 최상단 위치로 이동해 주세요.

최상단 위치에서 .vscode 폴더를 만들어 주세요

.vscode 폴더 안에 settings.json 파일을 만들어 주세요.

settings.json 파일 안에 VS Code settings 을 작성해줍니다.

// settings.json

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

• "editor.formatOnSave": true : 저장하면 프리티어가 바로 적용될 수 있게 설정
• "editor.defaultFormatter": "esbenp.prettier-vscode” : prettier 포멧 적용 설정

🚨  import 에서 eslintrc 에러가 나타난다면 eslintrc가 tsconfig.json 파일 위치를 찾지 못해서 나타나는 에러이므로 .eslintrc.js 파일을 아래와 같이 수정해주세요!

🚨 에러가 계속 발생된다면 파일을 껐다가 다시 켜주세요!

// .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
		tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  include: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

• tsconfigRootDir: __dirname 👉🏻 tsconfig root 폴더 주소를 현재 실행중인 폴더 위치임을 알려주는 것

🚨  import 에서 eslintrc 에러가 나타난다면 eslintrc가 tsconfig.json 파일 위치를 찾지 못해서 나타나는 에러이므로 .eslintrc.js 파일을 아래와 같이 수정해주세요!

🚨 에러가 계속 발생된다면 파일을 껐다가 다시 켜주세요!

// .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
		tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  include: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

• tsconfigRootDir: __dirname 👉🏻 tsconfig root 폴더 주소를 현재 실행중인 폴더 위치임을 알려주는 것

Schema First(스키마 우선)

• Schema first 는 graphql의 schema를 먼저 정의하고, 그 정의에 맞게 코드를 작성하는 방법을 말한다.
• Schema 을 작성하ㅣㄱ 위해서는 graphql의 data model을 나타내기 위해 만들어진 SDL(Schema Definiton Language)을 사용한다.

GraphQLModule.forRoot({
  typePaths: ['./**/*.graphql'],
}),

//스키마 우선 접근 방식을 사용하려면 먼저 옵션 개체에 typePaths 속성을 추가합니다. 
//typePaths 속성은 GraphQLModule이 작성할 GraphQL SDL 스키마 정의 파일을 
//찾아야하는 위치를 나타냅니다.

Code First(코드 우선)

• 코드 우선 접근 방식에서는 데코레이터와 타입스크립트 클래스를 사용하여 먼저 작성한 리졸버을 기반으로 해당 GraphQL 스키마를 자동 생성한다.
• 이 방법은 Typescript로만 작업하고 언어 구문간의 컽넥스트 전환을 피하려는 경우 유용하다.
• Schema와 Resolver간의 type safety을 보장하며 코드 중복이 최소화하는 장점이 존재한다.

GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
			autoSchemaFile: 'src/common/graphql/schema.gql',
})
//autoSchemaFile 속성 값은 자동으로 생성된 스키마가 생성될 경로

GraphQL 폴더 구조 셋팅(Code First 실습)

$ yarn add @nestjs/graphql @nestjs/apollo graphql apollo-server-express

설치해준 다음 app.module.ts 에서 다음과 같이 수정하자

@Module({
  imports: [
				//수정본
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
				//
    }),
  ],
  // controllers: [AppController],
  // providers: [AppService],
})
export class AppModule {}

//app.module.ts 

@Module({
  imports: [
    BoardModule,
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: 'src/common/graphql/schema.gql',
    }),
  ],
  // controllers: [AppController],
  // providers: [AppService],
})
export class AppModule {}

// boards.module.ts

import { Module } from '@nestjs/common';
import { BoardsResolver } from './boards.resolver';
import { BoardsService } from './boards.service';

@Module({
  // imports: [],
  // controllers: [],
  providers: [BoardsResolver, BoardsService],
})
export class BoardModule {}

// boards.resolver.ts

import { Query, Resolver } from '@nestjs/graphql';
import { BoardsService } from './boards.service';

@Resolver()
export class BoardsResolver {
  constructor(private readonly boardsService: BoardsService) {}

  @Query(() => String)
  fetchBoards(): string {
    return this.boardsService.qqq();
  }
}

// boards.service.ts

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

@Injectable() // 의존성 관련 데코레이터
export class BoardsService {
  qqq(): string {
    return 'Hello World!';
  }
}

🐧15일차 Nest.js

Typescript Type

제네릭은 언어에서 재사용성이 높은 컴포넌트를 만들 때 가장 많이 활용되는 특징이다.

// 1.문자/숫자/불린 기본타입
const getPrimitive = (arg1: string, arg2: number, arg3: boolean): [boolean, number, string] => {
  return [arg3, arg2, arg1];
};

const result1 = getPrimitive("철수", 123, true);

//
//
// 2. any 타입(자바스크립트와 동일)
const getAny = (arg1: any, arg2: any, arg3: any): [any, any, any] => {
  console.log(arg1 + 100); // any 는 아무거나 다 됨!
  return [arg3, arg2, arg1];
};

const result2 = getAny("철수", 123, true);

//
//
// 3. unknown 타입
const getUnknown = (arg1: unknown, arg2: unknown, arg3: unknown): [unknown, unknown, unknown] => {
  if (typeof arg1 === "number") console.log(arg1 + 100); // any 보다는 안전
  return [arg3, arg2, arg1];
};

const result3 = getUnknown("철수", 123, true);

//
//
// 4-1. generic 타입(들어오는 타입에 따라서 MyType이 설정된다.)
function getGeneric<MyType1, MyType2, MyType3>(arg1: MyType1, arg2: MyType2, arg3: MyType3): [MyType3, MyType2, MyType1] {
  return [arg3, arg2, arg1];
}

const result4 = getGeneric("철수", 123, true);

//
//
// 4-2. generic 타입(들어오는 타입을 고정시키기 위해서는 아규먼트에 <> 추가 해줘야한다.)
function getGeneric2<MyType1, MyType2, MyType3>(arg1: MyType1, arg2: MyType2, arg3: MyType3): [MyType3, MyType2, MyType1] {
  return [arg3, arg2, arg1];
}

const result5 = getGeneric2<string, number, boolean>("철수", 123, true);

//
//
// 4-3. generic 타입
function forRoot<T1, T2, T3>(arg1: T1, arg2: T2, arg3: T3): [T3, T2, T1] {
  return [arg3, arg2, arg1];
}

const result6 = forRoot("철수", 123, true);

//
//
// 4-4. generic 타입
function getGeneric4<T, U, V>(arg1: T, arg2: U, arg3: V): [V, U, T] {
  return [arg3, arg2, arg1];
}
const result7 = getGeneric4<string, number, boolean>("철수", 123, true);

//
//
// 4-5. generic 타입 - 4 (화살표 함수 사용)
const getGeneric5 = <T, U, V>(arg1: T, arg2: U, arg3: V): [V, U, T] => {
  return [arg3, arg2, arg1];
};
const result8 = getGeneric5<string, number, boolean>("철수", 123, true);

Utility Types

**interface IProfile {
  name: string;
  age: number;
  school: string;
  hobby?: string;
}

//1. Partial 타입 (부분:있어도 되고 없어도 되는)
type aaa = Partial<IProfile>;

//2. Required 타입 (필수사항)
type bbb = Required<IProfile>;

//3. Pick 타입 (원하는 속성만 뽑아서 사용하고 싶을 때)
type ccc = Pick<IProfile, "name" | "age">;

//4. Omit 타입 (원하는 속성 제거하여 사용하고 싶을ㄷ 때 )
type ddd = Omit<IProfile, "school">;

//5. Record 타입
type eee = "철수" | "영희" | "훈이"; // Union 타입
let child1: eee = "철수"; // 철수,영희,훈이만 됨
let child2: string = "사과"; // 철수 영희 훈이 사과 바나나 다됨

type fff = Record<eee, IProfile>; // Record 타입

//6.객체의 키들로 Union 타입 만들기
type ggg = keyof IProfile; // "name" | "age" | "school" | "hobby"의 Union타입을 만들어줌
let myprofile: ggg = "hobby";

//7. type vs interface 차이  => interface는 선언병합 가능
interface IProfile {
  candy: number; // 선언병합으로 추가됨
}

// 8.배운것 응용
let profile: Partial<IProfile> = {
  candy: 10,
};**

Mysql

MySQL 설치

brew update
brew install mysql
brew servcies start mtsql
// 비밀번호 설정
 mysql_secure_installation

복잡한 비밀번호를 사용할것이냐는 질문에 N 을 입력하고 엔터를 칩니다.

New password:

Re-enter new password:

New password: 라고 나오면, 비밀번호를 입력하고 엔터를 쳐서 설정해줍니다.

Re-enter new password: 비밀번호를 다시 입력합니다.

By default, a MySQL installation has an anonymous user,
allowing anyone to log into MySQL without having to have
a user account created for them. This is intended only for
testing, and to make the installation go a bit smoother.
You should remove them before moving into a production
environment.

Remove anonymous users? (Press y|Y for Yes, any other key for No) : y

y를 입력해, 익명의 유저를 삭제하는데 동의합니다

Normally, root should only be allowed to connect from
'localhost'. This ensures that someone cannot guess at
the root password from the network.

Disallow root login remotely? (Press y|Y for Yes, any other key for No) : n

n을 입력해 root의 원격 접속을 허용합니다.

By default, MySQL comes with a database named 'test' that
anyone can access. This is also intended only for testing,
and should be removed before moving into a production
environment.

Remove test database and access to it? (Press y|Y for Yes, any other key for No) : n

 ... skipping.
Reloading the privilege tables will ensure that all changes
made so far will take effect immediately.

n을 입력해 test 데이터베이스를 유지합니다.

Reload privilege tables now? (Press y|Y for Yes, any other key for No) : y
Success.

y를 입력해 변경된 권한을 테이블에 적용합니다.

MySQL 접속 확인

터미널에 mysql -u root -p 라고 입력한 뒤, 방금 설정한 비밀번호를 입력합니다.

mysql> 처럼 터미널이 바뀌면 성공입니다! 👏

MySQL 연결

brew services // 서비스 목록 확인

brew services start mysql // mysql 실행하기
brew services stop mysql // mysql 정지

Typeorm을 활용한 NestJs와 MySQL 연결 실습 - TypeORM 설치

yarn add @nestjs/typeorm typeorm mysql2

- @nestjs/typeorm : NestJS 용 TypeORM.
- `typeorm` : typeorm 최신 버전으로 설치.
- `mysql2` : TypeORM 을 MySQL 로 연결하기 위한 프로그램 설치.

@Module({
  imports: [
    BoardModule,
    GraphQLModule.forRoot<ApolloDriverConfig>({ // 코드타입 우선 방식
      driver: ApolloDriver,
      autoSchemaFile: 'src/commons/graphql/schema.gql',
    }),
    TypeOrmModule.forRoot({ // 추가
      type: 'mysql',            // 데이터 베이스 타입
      host: 'localhost',        // local 환경으로 진행
      port: 3306,               // mysql은 기본 port는 3306
      username: 'root',         // mysql은 기본 user는 root로 지정
      password: 'root',         // 본인의 mysql password 
      database: 'myproject',    // 연결할 데이터 베이스명
      entities: [Board],        // 데이터 베이스와 연결할 entity
      synchronize: true,        // entity 테이블을 데이터베이스와 동기화할 것인지
      logging: true,            // 콘솔 창에 log를 표시할 것인지
    }),
  ],
})
export class AppModule {}

Board API 만들기

fetchBoards API 와 createBoard API 생성

**// boards.resolver.ts 

import { Query, Resolver, Mutation } from '@nestjs/graphql';
import { BoardsService } from './boards.service';

@Resolver()
export class BoardsResolver {
  constructor(private readonly boardsService: BoardsService) {}

  @Query(() => String, { nullable: true })
  fetchBoards(): string {
    return this.boardsService.findAll();
  }

  @Mutation(() => String)
  createBoard(): string {
    return this.boardsService.create();
  }
}**

함수를 findAll 과 create를 만들어줬듯이 boardservice 에서도 그 함수에 대한 로직을 만들어준다,

// boards.service.ts

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

@Injectable()
export class BoardsService {
  findAll(): string {
    // 1. 데이터를 조회하는 로직 => DB에 접속해서 데이터 꺼내오기

		// 2. DB에서 꺼내온 결과를 브라우저에 응답(response) 주기
    return '조회에 성공하였습니다.';
  }

	create(): string {
    // 1. 브라우저에서 보내준 데이터 확인하기
		//

		// 2. 데이터를 등록하는 로직 => DB에 접속해서 데이터 저장하기
    //

		// 3. DB에 저장이 잘 됐으면, 결과를 브라우저에 응답(response) 주기
    return '게시물 등록에 성공하였습니다!!';
}

왜 따로 이렇게 분리하느냐??? service를 만드는 이유는 중복되는 부분들을 다른 API에서도 사용하기 위함으로 실제로 사용되는 곳은 resolver 에서 최종적으로 사용되게 된다.

import { Field, Int, ObjectType } from '@nestjs/graphql';
import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';
// 맨위 골뱅이는 mysQL 아래골뱅이는 graphQL
@Entity()
@ObjectType()
export class Board {
  @PrimaryGeneratedColumn('increment')
  @Field(() => Int)
  number: number;

  @Column()
  @Field(() => String)
  writer: string;

  @Column()
  @Field(() => String)
  title: string;

  @Column()
  @Field(() => String)
  contents: string;
}

boards.resolver.ts 수정

// boards.resolver.ts

import { Resolver, Query, Mutation } from '@nestjs/graphql';
import { BoardsService } from './boards.service';
import { Board } from './entities/board.entity';

@Resolver()
export class BoardsResolver {
  constructor(private readonly boardsService: BoardsService) {}

  @Query(() => [Board], { nullable: true }) 
  fetchBoards(): Board[] {
    return this.boardsService.findAll();
  }

  @Mutation(() => String)
  createBoard(
    @Args('writer') writer: string, //@Args 는 인자를 개별적으로 추가해줄때 해준다.
    @Args('title') title: string,   //@Args은 gql타입이고 그 뒤는 타입스크립트 타입을 의미!
    @Args('contents') contents: string,
  ): string {
    return this.boardsService.create({ writer, title, contents });
  }
}

createBoard에서 InputType DTO로 묶어서 받기

위에서 리졸버에서 각각의 인자를 뽑아서 추가하였다. 지금은 세개밖에 입력을 안했지만 더 복잡하고 많은 입력을 받아야 한다면 이방식은 효율적이지 않다. 더 많은 입력을 받아야 한다면 객체로 묶어서 전달받는 방식이 더 효율적이다.

dto 폴더를 생성하여 create-board.input.ts 파일을 생성

dto

: 데이터 전송 객체, 즉 네트워크 간에 데이터를 어떤 식으로 보낼지를 정의한 객체이다.

// create-board.input.ts

import { InputType, Field } from '@nestjs/graphql';

@InputType()
export class CreateBoardInput {
  @Field(() => String)
  writer: string;

  @Field(() => String)
  title: string;

  @Field(() => String)
  contents: string;
}

boards.resolver.ts 에 적용 시켜주기.

// boards.resolver.ts

import { Query, Resolver, Mutation, Args } from '@nestjs/graphql';
import { BoardsService } from './boards.service';
import { CreateBoardInput } from './dto/createBoard.input';
import { Board } from './entities/board.entity';

@Resolver()
export class BoardsResolver {
  constructor(private readonly boardsService: BoardsService) {}

  @Query(() => [Board], { nullable: true })
  fetchBoards(): Board[] {
    return this.boardsService.findAll();
  }

  @Mutation(() => String)
  createBoard(
		// @Args('writer') writer: string,
    // @Args('title') title: string,
    // @Args('contents') contents: string,
===> 추가
    @Args('createBoardInput') createBoardInput: CreateBoardInput,
  ): string {
    return this.boardsService.create({createBoardInput});
  }
}

boards.service.ts 수정

  create({ createBoardInput }: IBoardsServiceCreate): string {
    // 1. 브라우저에서 보내준 데이터 확인하기
		console.log(createBoardInput.writer);
    console.log(createBoardInput.title);
    console.log(createBoardInput.contents);

		// 2. 데이터를 등록하는 로직 => DB에 접속해서 데이터 저장하기
    //

		// 3. DB에 저장이 잘 됐으면, 결과를 브라우저에 응답(response) 주기
    return '게시물 등록에 성공하였습니다!!';
  }
}

// board-services.interface.ts

import { CreateBoardInput } from '../dto/create-board.input';

export interface IBoardsServiceCreate {
  createBoardInput: CreateBoardInput;
}

아까 TypeOrm 설치부분에서 개인정보들이 존재한다 이를 위해선 env 처리해줘야한다.

.env 와 .env.docker 에 env할 것들을 정리하고 module.ts 파일과 연결해준다.

연결 하기전 nest 에서 지원해주고 있는 라이브러리 한개를 설치해야 한다.

yarn add @nestjs/config

// app.module.ts

@Module({
  imports: [
    BoardsModule,
    ConfigModule.forRoot(),  ==> env 추가
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: 'src/commons/graphql/schema.gql',
    }),
    TypeOrmModule.forRoot({ ==> process.env 처리해서 개인정보 보안 
      type: process.env.DATABASE_TYPE as 'mysql',
      host: process.env.DATABASE_HOST,
      port: Number(process.env.DATABASE_PORT),
      username: process.env.DATABASE_USERNAME,
      password: process.env.DATABASE_PASSWORD,
      database: process.env.DATABASE_DATABASE,
      entities: [Board],
      synchronize: true,
      logging: true,
    }),
  ],
})
export class AppModule {}