[Nest.js, Graphql] 간단하게 Nest.js와 Graphql 기반의 프로젝트 구성하는 법

안녕하세요. 이 포스트는 node.js위에 가동하는 프레임워크인 nest.js와 Graphql 기반의 프로젝트 초기 구성하는 법을 포스팅해보겠습니다. 

 

 Nest.js?

Nest(NestJS)는 효율적이고 확장 가능한 node.js 서버 측 애플리케이션 을 구축하기 위한 프레임워크입니다 . 프로그레시브 JavaScript를 사용하고 Typescript 구축되고 완벽하게 지원합니다 하지만 우리는 자바스크립트로도 프로젝트를 진행할 수 있습니다. OOP(객체 지향 프로그래밍), FP(기능 프로그래밍) 및 FRP(기능 반응 프로그래밍)의 요소를 결합합니다. 내부적으로 Nest는 익스프레스와 같은 강력한 HTTP 서버 프레임워크 를 사용합니다.

 

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

 

Nest.js의 전역 설치

npm i -g @nestjs/cli

우리는 nest 명령어를 사용하기 위해 nest를 글로벌 설치 해야합니다. node는 기본적으로 다운로드 되어 있어야합니다. nest.js는 기본적으로 node.js서버를 기반으로 돌아가기 때문입니다.

 

Nest.js 프로젝트 구성

nest g application

어플라이케이션을 제너레이트 합니다. 기본적으로 네스트는 다음과 같은 명령어를 지원합니다.

 

터미널에서 nest명령어를 실행한 모습

어플리케이션뿐만 아니라 우리는 nest 명령어로 프로젝트에 필요한 provider, decorator, controller, service 등을 생성할 수 있습니다. 위의 명령어를 실행하면 프로젝트의 이름을 작성할 수 있고, 이름을 작성하면 nest 프로젝트가 생성됩니다.

 

 

 

프로젝트는 다음과 같은 모습으로 생성됩니다. 기본적으로 app.controller.ts, app.resolver.ts, app.service.ts의 파일이 소스파일에 작성되어 있습니다. 

 

nest.js는 프로젝트의 아키텍쳐를 중요하게 생각한 프레임워크입니다.

즉, controller, service, resolver의 각 목적에 맞춰 프로그래밍을 구성해야 우리는 nest.js를 잘 이용하고 있다고 말할 수 있습니다.

 

우리는 App.module.ts라는 부모 모듈을 기반으로 레고를 조립하듯, 모듈 조각들을 만들어 이 곳에 주입할 것입니다. 예를 들면 유저 모듈, 결제 모듈, 제품 모듈등의 다양한 모듈들이 App.module.ts에 모일 것이고 커다란 덩어리를 만들어 내는 것입니다.

 

모든 것은 App.module.ts와 연결되어 있고, 이 것은 main.ts에 반환될 것입니다.

 

 

 

 

 

Nest In Graphql

nest는 기본적으로 graphql 내장함수들을 지원합니다. 공식 홈페이지를 살펴보면 graphql에 대한 섹션이 있습니다.

npm i @nestjs/graphql graphql@^15 apollo-server-express

이 것은 기본적으로 apollo-server-express위에서 돌아갑니다. 설치가 완료되면 우리는 부모 모듈인 app.module.ts에 이 설치한 Graphql 모듈을 import 해주어야 합니다.

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';

//graphql 모듈 import
@Module({
  imports: [GraphQLModule.forRoot()],
  controllers: [],
  providers: [],
})
export class AppModule {}

다음과 같이 app.module.ts에 graphql 모듈을 import합니다. 하지만 우리는 콘솔에서 이에 관련한 에러를 바로 마주할 것입니다.

 

그래프큐엘 모듈 삽입한 후 콘솔에 발생한 에러

 

에러를 천천히 읽어보니 다음과 같습니다. 아폴로 서버는 스키마, 모듈, 타입정의 중 하나를 필요로 합니다. 우리는 아직 아폴로서버에 대한 어떠한 것도 만들어주지 않았습니다. 따라서 이러한 에러를 반환하게 되는 것 입니다.

 

그 전에 공식문서를 살펴보면 우리는 두 가지의 방식으로 접근할 수 있습니다. Code first, Schema first 두 가지의 방식이 있습니다. 저는 Code first의 방식으로 프로젝트를 진행해보겠습니다.

https://docs.nestjs.com/graphql/quick-start#code-first (관련 공식문서)

 

GraphQLModule.forRoot({
  autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
}),

코드 우선 접근 방식을 사용하려면 먼저 autoSchemaFileoptions 객체에 속성을 추가 합니다. 이렇게 하면 우리는 다시 쿼리의 루트 타입을 정의하라는 에러를 만나게 될 것입니다. 이 것은 우리의 Graphql 모듈이 스키마를 정의하기 위한 쿼리나 resolver를 찾고 있다는 뜻 입니다. 즉, 아직 정의한 아무런 Query, Mutation 등이 없기 때문에 다음과 같은 에러가 발생하게 됩니다.

 

간단한 예제 모듈을 하나 만들어 에러를 해결해보도록 합니다. 예제 모듈은 cafe로 임의로 만들어봅니다.

nest g mo cafe

nest의 명령어를 통해 cafe 모듈을 만들어봅니다. 이 모듈은 app.modules.ts에 자동으로 import 될 것입니다.

이렇게 생성하게 되면 우리는 cafe 디렉토리 안에 cafe.module.ts가 생성된 것을 확인할 수 있을 것입니다. 그 후 디렉토리 안에 cafe.resolver.ts를 생성해봅시다.

 

import { Resolver } from "@nestjs/graphql";

@Resolver()
export class CafeResolver {}

다음과 같이 resolver를 만들어줍니다. 이 resolver는 모듈안에 정의되야합니다. 다시 cafe.module.ts에 만든 resolver를 providing해줍시다.

 

import { Module } from '@nestjs/common';
import { CafeResolver } from './cafe.resolver';

@Module({
    providers:[CafeResolver]
})
export class CafeModule {}

 

이제 무엇을 해야할까요? 아까 에러가 무엇이였는지 생각해봅시다. 우리는 root Query 즉, 아직 아무런 쿼리도 없기 때문에 발생한 에러였습니다. 그렇다면 resolver로 돌아가 graphql query를 만들어봅니다.

 

import { Query, Resolver } from "@nestjs/graphql";

@Resolver()
export class CafeResolver {
    @Query(() => String)
    whatCafe() {
        return 'there is twosomeplace'
    }
}

다음과 같이 어떤 카페인지 string을 리턴해주는 간단한 쿼리를 만들어봅시다. 이제 query가 생성되었기 때문에 콘솔은 아무런 에러도 나타내지 않을 것입니다.

아무런 에러가 없는 콘솔

 

자 그럼 이제 우리가 만든 쿼리가 작동하는지 확인해보고 프로젝트 구성을 끝내겠습니다. graphql query가 확인하는지 알아보기위해 graphql playground로 이동해봅시다.

resolver에 정의한 쿼리가 잘 작동하는 모습

우리가 만든 쿼리가 잘 작동하는 것을 볼 수 있습니다. 이렇게 nest.js와 graphql server를 이용한 초기 프로젝트 구성하는 방법을 알아보았습니다. code first 기법과 schema first 기법 중 본인이 더 잘 맞는 것 같다고 판단되는 기법을 사용하면 될 것 같습니다.

 

감사합니다.