Typescript
Typescript + Next.js 에서 Test 환경 설정하기
Typescript + Next.js 에서 Test 환경 설정하기
2021.12.04조금씩 덩치가 커져가는 프론트 엔드 환경에서 이제 테스트 코드는 선택이 아닌 필수가 되어 가고 있습니다. 그렇다 보니 end to end 테스트 unit 테스트 같은 많은 테스트 가 쏟아지고 있는데요 오늘 설정 할 환경 설정은 unit test 입니다. Jest + Enzyme 조합을 사용 해서 테스트를 해볼 예정입니다. Jest + React Test Lib 을 더 많이 사용 하시는 것 같지만 저는 공부 목적으로 Enzyme 을 선택 하였습니다. Enzyme 과 rtl 의 차이점이 궁금하신 분은 아래 블로그를 참고해주세요 https://medium.com/xebia-engineering/react-testing-library-rtl-vs-enzyme-14b12b4136ed React-Testing-Li..
Advanced Typescript - 타입스크립트 좀더 깊게 알아보기
Advanced Typescript - 타입스크립트 좀더 깊게 알아보기
2021.11.28Intersection Type (교차 타입) type Admin = { name: string; privileges: string[]; }; type Employee = { name: string; startDate: Date; }; type ElevatedEmployee = Admin & Employee; const e1: ElevatedEmployee = { name: 'Max', privileges: ['create-server'], startDate: new Date() }; type Combinable = string | number; type Numeric = number | boolean; type Universal = Combinable & Numeric; const u: Universa..
Typescript Interface
Typescript Interface
2021.11.28Interface 가 필요한 이유 type과 interface의 차이점은 인터페이스는 개체의 구조를 설명하는데만 사용할 수 있다는 것 실제로 객체 유형을 정의 할때 인터페이스를 더 자주 보게 됩니다. interface Greetable{ name: string; greet(phrase: string): void; } class Person implements Greetable{ name: string; age: number = 27; constructor(name: string) { this.name = name; } greet(phrase: string) { console.log(phrase + ' ' + this.name); } } let user1: Greetable; user1 = new Pers..
Typescript Class
Typescript Class
2021.11.27stShorthand Initialization typescript에서 class의 생성자를 좀 더 짧게 생성하는 법을 알아보겠습니다. Origin class Department { private id: string; public name: string; constructor(id: string, name: string) { this.id = id; this.name = name; } } Short class Department { constructor(private id: string, public name: string) { } describe() { console.log(`Department (${this.id}): ${this.name}`); } } constructro 파라미터에 private ..
Nestjs 에서 Swagger 사용하기
Nestjs 에서 Swagger 사용하기
2021.06.24generate swagger ui npm install --save @nestjs/swagger swagger-ui-express main.ts 에 다음과 같이 작성합니다. import { NestFactory } from '@nestjs/core'; import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger'; import { AppModule } from './app.module'; // nsetjs hot reloading setup declare const module: any; async function bootstrap() { const app = await NestFactory.create(AppModule); const config ..
Nestjs , Typeorm 에서 Hasing passwords
Nestjs , Typeorm 에서 Hasing passwords
2021.06.05비밀번호 단방향 암호화 데이터 베이스에 입력된 비밀번호를 그대로 노출하게 된다면 보안에 큰 결함이 생기게 됩니다. 그래서 입력된 비밀번호를 단방향 암호화를 통해 못생기게 바꿔줄 예정입니다. 먼저 암호화를 하기 전에 Listener 에대해 짚고 넘어가야 합니다. Typeorm listener Listener 는 기본적으로 entity 에 무슨일이 생길때 실행됩니다. entity 는 nestjs 에서 정의하는 데이터베이스 모델이에요 우리가 원하는것은 Beforeinsert 데코레이터 입니다. insert 가 되기전에 먼저 실행해주는 데코레이터 입니다. User class 에 BeforeInsert 부분을 추가합니다. 그리고 password 를 암호화 하기위해 "bcrypt" 를 사용합니다. bcrypt np..
Nestjs - User model
Nestjs - User model
2021.06.01nest g mo users로 모듈을 생성합니다. 이전에 연습삼아 만들고 있었던 레스토랑 모듈은 빼주도록 하겠습니다. entities 에서도 빼줄게요 imports 에 UsersModule 이 잘 추가되었습니다. users 폴더 안에 entities 폴더를 만들고 user.entity.ts 파일을 만들게요 user.entity.ts 는 database 모델을 정의하기 위한 ts 파일입니다. TypeOrmModule 의 syncronize 값을 True 로 바꿔주면 user.entity.ts 에서 정의한 Column 들을 그대로 데이터베이스에 반영합니다. user.entity.ts import { Column, Entity } from 'typeorm'; type UserRole = '..
NestJs Validating ArgsTypes
NestJs Validating ArgsTypes
2021.05.23data transfer object 의 유효성 검사 class validator 를 사용하여 각 필드의 유효성 검사를 합니다. pipe line에 쓰일 class-transformer도 설치합니다. npm i class-validator npm i class-transformer create-restaurant.dto.ts import { InputType, Field, ArgsType } from '@nestjs/graphql'; import { IsBoolean, IsString, Length } from 'class-validator'; @ArgsType() export class CreateRestaurantDto { @Field((type) => String) @IsString() @Lengt..
NestJs - Arguments
NestJs - Arguments
2021.05.22TypeScript 와 Graphql 의 type 선언 차이 import { Resolver, Query, Args } from '@nestjs/graphql'; import { Restaurant } from './entities/restaurant.entity'; @Resolver((of) => Restaurant) export class RestaurantResolver { // graphql 에서 list를 명시하는방법 @Query((returns) => [Restaurant]) // typescript 에서 list를 명시하는 방법 restaurants(@Args('veganOnly') veganOnly: boolean): Restaurant[] { return []; } } 위의 코드를 살펴보..
Nestjs - ObjectType
Nestjs - ObjectType
2021.05.22ObjectType NestJs의 ObjectType을 이해하기 쉽게 데이터베이스와 유사한 entity 를 만들겠습니다. 폴더 구조는 이전 글을 참고해주세요 restaurants.entity.ts 라는 파일을 만들어 주세요 ObjectType은 데코레이터로써 작동합니다. GraphQL 의 관점에서 봤을때 Restaurant가 어떻게 생겼는지 묘사합니다. // entity 란 데이터 베이스 모델을 생각하면 이해하기 쉽다. import { Field, ObjectType } from '@nestjs/graphql'; // 아직 데이터베이스가 없어서 이해하기 쉽게 특징을 살펴본후 데이터 베이스를 추가할 예정 @ObjectType() export class Restaurant { /..
Nestjs + react Day1
Nestjs + react Day1
2021.05.19backend 시작하기 nest.js cli 를 사용하여 app을 만듭니다. $ nest g application nuber-eats-backend uber eats 를 clone coding 하기 위해서 nuber-eats 라고 프로젝트명을 설정했습니다. 그리고 git 저장소를 만들고 gitognore를 추가합니다. .gitignore nodemodule/ package-lock.json dist/그리고 이번 프로젝트에서는 REST를 사용하는 대신 GRAPHQL 을 사용할 예정입니다. $ npm i @nestjs/graphql graphql-tools graphql apollo-server-express 다음과 같이 설정합니다. app.moudles 은 main.ts 로 import 되는 유일한 mod..
타입 스크립트 프로젝트 만들기
타입 스크립트 프로젝트 만들기
2020.12.09타입 스크립트 dir 를 선택합니다. vsCode 의 터미널에서 다음 명령을 차례대로 실행합니다. mkdir "filename" cd "filename" npm init --y package.json 은 node.js 가 관리하는 패키지 관리 파일로서 프로젝트 정보와 관련 패키지가 기록됩니다. 다른 개발자의 컴퓨터에 typescript와 ts-node 패키지가 설치되어 있지 않을 수도 있기에 이를 고려해 --> npm i -D typescipt ts-node package.json 에 등록합니다. Promise와 같은 타입을 사용하려면 @types/node 라는 패키지를 설치해야 합니다. --> npm i -D @types/node tsconfig.json 파일 만들기 --> tsc -- init jso..