StudyYeong

Webpack이란 webpack은 Javascript용 static module bundler이다. 한 개 이상의 entry points를 통해 내부적으로 dependency graph를 만들어 모든 모듈을 번들링 시켜주어, 결과적으로 프로젝트에서는 한 개의 번들만 import 시키면 된다. 이게 webpack의 기본 concept이다. 번들러는 webpack말고도 Gulp등.. 다양하게 있지만 가장 많은 기능을 가지고 있는 툴은 webpack인 듯 하다. webpack.config.js 파일에서 번들 옵션을 설정 할 수 있다. 아래는 설정 파일에서 사용하는 주요 옵션들이다. webpack option 여기를 보면 정말 다양한 옵션들이 있음을 확인할 수 있다.. 필요할 때 들어가서 참고하면 되겠다. 설치yarn 이든 npm 이든 global로 설치 해줬다. 1yarn global add webpack webpack-cli Core Concept Entrywebpack이...

TypeORMTypeORM은 다양한 플랫폼에서 TypeScript와 JS로 실행되는 ORM이다. ORM이란 ‘Object Relational Mapping’의 줄임말이다. 최신 JS를 지원하고 DB로의 작업을 효율적으로 수행할 수 있도록 도와준다. EntityEntity는 DB에 저장되는 데이터의 형태를 보여주는 Model로, DB에 테이블을 매핑해주는 class이다. @Entity() 데코레이터로 정의한다. 12345678910111213141516import { Entity, PrimaryGeneratedColumn, Column } from "typeorm";@Entity()export class User { @PrimaryGeneratedColumn() id: number; @Column() firstName: string; @Column() lastName: string; @Column() isActive:...

NestJSNestJS?NestJs는 Node.js용 프레임워크이다. Typescript를 전격 지원하고 OOP(Object Oriented Programming), FP(Functional Programming), FRP(Functional Reactive Programming)으로 이루어져있다. NestJS는 Node.js에서 사용되던 Express, Fastify 위에서 동작한다. 기본은 Express를 동작하고 있으며 추가 설정을 통해 Fastify를 사용할 수도 있다.위 두 http 프레임워크는 가장 많이 통용되고 있었으나 가장 큰 단점이 정해진 구조가 없다는 것이었다. 그런 단점을 NestJS가 보완하고 있는 것이다.NestJS를 사용해 더 구조적으로 안정된 애플리케이션을 구현할 수 있을 것이다. Nest CLINestJS 프로젝트는 cli를 통해 간단히 생성할 수 있다. 명령어를 사용하면 간단한 scaffold를 생성해준다. 12npm i -g...

GraphQL에서 context란 특정 실행에서 모든 resolver에 의해 공유되어지는 object를 말한다. 사용자 인증 정보나 현재 사용자 또는 데이터베이스 연결과 같은 데이터를 유지하는데 유용하다. 각 resolver에서 세번째 파라미터로 존재한다. 1234567const resolvers = { Query: { myQuery(root, args, context, info) { // ... }, },}; context는 모든 모듈에서 공유되어지므로 GraphQL에 별다른 context building API가 없는 것이다. context는 GraphQL 서버에 의해 관리되고 실행된다. 참고 GraphQL modules - context

Middleware미들웨어는 route handler 이전에 실행되도록 하는 함수이다. request, response 객체에 접근할 수 있고 next()라는 미들웨어 함수가 사용된다. express에서 흔히 사용되는 미들웨어와 같은 개념이다. 구현Nest에서 미들웨어는 함수 또는 클래스로 구현이 가능하다. 클래스로 만들경우 NestMiddleware 인터페이스를 구현해야한다. 123456export class LoggerMiddleware implements NestMiddleware { use(req: Request, res: Response, next: NextFunction) { console.log("Request..."); next(); }} 함수로 구현하는 경우 다음과 같이 할 수 있다. 123456import { Request, Response, NextFunction }...

JWT토큰 기반 인증방식이다. 제공되는 API를 유지보수 하던 중 jwt를 처음 봤다. 유저와의 인증 작업을 수행하는 어플리케이션은 직접 전체를 만들어본 적이 없기 때문이다. 너무나 흔하게 사용되는 기술이니만큼 잘 알아둬야겠다는 생각이들어 정리한다. Stateless 서버 Stateful 서버 : 클라이언트 상태 정보를 계속해서 유지하고 이를 이용해 서비스를 제공 Stateless 서버 : 클라이언트 상태 정보를 유지하지 않고 요청만을 통해서 작업을 처리 Stateless 서버의 경우 확장성이 높다. 대표적인 예로 OAuth가 있다. 소셜 계정을 이용해 다른 웹서비스 로그인이 가능한 기술이다. 상태를 저장하지 않기 때문에 어떤 요청이 들어와도 처리할 수 있다. 또한 모바일 어플리케이션을 개발한다면 토큰 기반 인증이 가장 이상적이다. 세션토큰을 사용하기 이전의 인증방식은 서버에서 유저의 정보, 즉 세션을 기억하고 이를 사용해 동작했다. 아직도 이런 방식으로 돌아가는 웹사이트가...

ConfigService 사용하기프로젝트 환경에 관련된 변수들이 있다. 예를들면 DB에 관한 정보라던가 AWS 접근 정보라던가. 이런 정보들을 .env에서 관리하도록 프로젝트를 구성했다면 process.env.으로 변수에 접근할 수 있다. 하지만 이렇게 하는 것은 NestJS에서 선호하는 방식은 아니다. NestJS에서는 ConfigService을 사용하기를 권장한다. 공식 문서 - Usig the ConfigService 문서에 따르면 ConfigModule을 import해서 쓰면 된다고 한다. 하지만 다른 setting이 있는 경우 global module로 설정해서 사용할 수도 있다. 그럼 ConfigModule을 또다시 import 할 필요 없다! 123ConfigModule.forRoot({ isGlobal: true,}); 나 또한 app.module.ts에서 ConfigModule에 joi 사용을 세팅했기 떄문에 isGlobal : true로...

InputType vs ArgsTypeInputTypeGraphQL의 Mutaion 인자로 object를 받아야 하는 경우 input type을 사용한다. 아래와 같이 사용한다. 1234567import { InputType, Field } from "@nestjs/graphql";@InputType()export class UpvotePostInput { @Field() postId: number;} Mutation을 구현하는 resolver 에서 Input type을 사용하기 위해서는 @Args() 의 인자로 이름을 넘겨줘야한다. 1234@Mutation(returns => Post)async upvotePost( @Args('upvotePostData') upvotePostData: UpvotePostInput,) {} 이렇게 작성한 경우 mutation은 아래와 같이...

Nest.js Entity 파일과 dto의 동기화typeorm방식으로 Entity.ts 파일을 사용해 graphql 스키마와 DB Table 스키마를 동시에 만들어낼 수 있었다. 문제는 이에 접근하는 방식인 dto의 정의였는데, entity에 개체와 dto의 내용에 차이가 있다고해도 dto 스키마에 맞게 쿼리를 작성하는 경우 graphql은 에러를 발생시키지 않는다. mutation을 실행시킨 후에야 서버 오류가 발생했다고 한다. 개체 하나를 추가할때마다 복사 붙여넣기로 두 파일의 동기화를 맞출 수 있겠지만 실수하게 될 가능성도 있고 그다지 좋은 방법으로 보이지 않는다. TypeORM은 Entity를 이용해 dto또한 생성할 수 있는 기능을 제공한다. 이런 기능들이 TypeORM을 강력하게 만들어주는것 같다. OmitType()여러 종류의 dto 생성 방식이 있다. 그 중 OmitType을 이용했는데 OmitType은 첫번째 인자로 Entity 속성 중 dto에서 제외하고...

NestJS + Graphql 함께 사용해보기** Mutations** Mutation은 GraphQL에서 서버 사이드 데이터를 modify 하는 방식이다. REST에서 GET 메서드의 요청은 데이터 수정을 하지 못하도록 하는게 원칙인 것 처럼 Query로 들어온 요청은 데이터를 수정하지 못한다. Nest에서는 @Mutation() 데코레이터를 사용해서 구현할 수 있다. 구현하는데에 다양한 방식이 있지만 Code first를 사용했다. Code first1234@Mutation(returns => Post)async upvotePost(@Args({ name: 'postId', type: () => Int }) postId: number) { return this.postsService.upvoteById({ id: postId });} 위의 코드는 아래와 같은 graphql 코드를...