StudyYeong

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 코드를...

Heroku devDependency Module ‘not found’ ErrorProblemGraphQL-yoga로 만든 간단한 api 서버를 heroku에 deploy하려는데 계속 오류가 발생했다. 에러 메세지는 아래와 같다. 123456...2021-03-27T10:35:52.906327+00:00 app[web.1]: [nodemon] starting `babel-node index.js`2021-03-27T10:35:52.939566+00:00 app[web.1]: sh: 1: babel-node: not found2021-03-27T10:35:52.976590+00:00 app[web.1]: [nodemon] failed to start process, "babel-node" exec not found2021-03-27T10:35:52.978952+00:00 app[web.1]: [nodemon] Error... package.json 파일에서...

리액트 라이브러리를 설치함으로써 시작할 수 있다. 기본적으로 Node.js가 설치되어있어야 한다. create-react-app리액트 프로젝트를 처음부터 구성하는 것은 쉽지 않은 일이다. 리액트는 구성이 되어있는 프로젝트를 바로 시작하는 라이브러리를 가지고 있다. 아래 명령어로 간단하게 시작할 수 있다. 이때 npx를 사용하는 이유는 최신 리액트 버전을 사용하기 위해서이다. 공식 도큐먼트에서도 1npx create-react-app my-app my-app은 디렉토리명이다. 현재 디렉토리에 폴더가 생성되어 리액트 프로젝트가 만들어진다. 리액트 구성리액트는 ‘컴포넌트’ 단위로 이루어져있다. 컴포넌트는 함수형과 클래스형으로 두 가지 방법으로 만들 수 있는데 최신 리액트는 함수형을 주로 사용한다고 한다. 함수형으로 전환되던 시기에는 많은 예시가 클래스형으로 이루어져 있었는데 이제 공식 도큐먼트의 예시도 함수형으로 되어있으며 이를 더 범용적으로 사용하는 추세로 보인다. 컴포넌트란...

기본 사용법을 익히기 위해 graphql-yoga를 사용했다. 서버 열기123456789import { GraphQLServer } from "graphql-yoga";import resolvers from "./graphql/resolvers";const server = new GraphQLServer({ typeDefs: "graphql/schema.graphql", resolvers,});server.start(() => console.log("Graphql Server Running")); 서버를 열면서 스키마 파일을 지정하고, resolver 또한 설정해준다. 포트를 따로 지정하지 않으면 4000번 포트로 서버가 열리고 브라우저로 접속시 깔끔한 ui를 가진 플레이그라운드로 간편하게 api를 테스트 해볼 수 있다. 오른쪽에 보이는 DOCS,...