Prologue

이번에 무려 $300를 결제해서 노마드코더에서 인스타그램 클론이라는 클래스를 들었다. 프로젝트의 이름은 Prisma로 만드는 인스타그램이라는 뜻의 Prismagram 이었다. 클래스의 내용은 알찼다. 하지만 막상 만들어놓고보니, "음..? 내가 어떻게 만들었더라..?" 라는 생각이 문득 들었다. 어릴 때는 계속 두뇌를 개발하면 언젠가 천재가 되지 않을까 꿈꿨지만 터무니 없는 이야기였다. 인간의 뇌는 not-perfect 하며 volatile 하다. 그래서, 우리는 항상 우리가 배웠던 것을 organization 해야 한다는 결론에 이르렀다!

Organization은 매우 귀찮은 작업이지만 내 스스로 찾아보기 좋은 레퍼런스를 만들기 위해서는 필수다!
한번 내가 배웠던 것들을 정리해보자!

[WIL from prismagram #1] GraphQL 서버 간단하게 만들어보기!

[WIL from prismagram #1] GraphQL 서버 간단하게 만들어보기!

0. 일단 Graphql server가 무엇인지 알아보자

먼저, Graphql은 일단 API를 위한 질의언어로 RESTful API를 대체할 수 있는 기술이다. 하나의 엔드포인트로 개발자가 원하는 어떠한 데이터도 불러올 수 있다는 장점을 갖고 있다. 자세한 설명은 여기를 참조하자.

1. 깃허브 레포지토리 만들기

먼저, 해당 프로젝트에서는 소스코드 관리를 위해 github을 씁니다. 깃헙에 가서 여러분의 깃헙을 생성해봅시다.

깃헙 프로젝트를 생성하는 방법은 너무 쉬우니 따로 설명하지 않겠습니다.

한가지 주의점은 .gitignore 옵션에서 Node를 주면 자동으로 모듈등의 업로드를 막을 수 있으니 꼭 체크해야 합니다.

깃허브 레포지토리를 만들고, 만들어진 저장소를 콘솔에서 git clone 해줍시다.

그 후에 콘솔에서 디렉토리에 들어가 취향에 따라 git init 또는 yarn init을 해줍니다.

2. Graphql-yoga 설치하기

yarn add graphql-yoga

Graphql-yoga는 이미 어느정도 환경설정이 끝난 Graphql 서버를 설치해준다고 생각하면 됩니다. 깔고 그저 실행만하면 작동되는 Graphql 서버입니다.

3. Nodemon 설치하기

yarn add nodemon -D

Nodemon은 노드 서버를 자동 재시작시켜주는 역할입니다.

-D 옵션은 프로덕트와는 상관없이 개발용으로 사용하겠다는 이야기입니다.

3.1 nodemon.json 작성하기

프로젝트의 메인 디렉토리에 nodemon.json이라는 파일을 만들고 내부에 이렇게 작성한다.

{
  "ext" : "js graphql"
}

이 의미는 js나 graphql이라는 확장자(extension)를 가진 소스 파일을 감시하여 만일 변경되면 프로젝트를 재시작한다는 의미이다.

4. @babel/preset-env, @babel/node, @babel/core, @babel/cli 설치하기

yarn add @babel/node,

yarn add @babel/core,

yarn add @babel/preset-env,

yarn add @babel/cli

Babel-cli는 node.js의 CLI와 같은 역할을 하며, 노드 실행 전에 소스코드를 preset으로 컴파일하는 기능을 가졌습니다. 이 부분에 대해 자세히 다루진 않겠습니다.

.babelrc 추가하기

.babelrc 파일을 프로젝트의 최상단에 추가해줍니다.내용은 아래와 같이 작성해주면 됩니다.

{
  "presets": ["@babel/preset-env"]
}

5. package.json에 dev 명령어 만들기

"scripts": {
  "dev": "nodemon --exec babel-node src/myGraphQLServer.js"
}

위와 같이 타이핑하면 npm run dev나 yarn dev를 입력했을 때 위의 명령어가 실행됩니다. 즉, nodemon과 babel-node를 이용하여 server.js를 실행시키는 것입니다.

6. dovenv 설치하기

yarn add dotenv

dotenv.env파일에서 여러가지 설정값들을 가져오게 만들기 위해 필요하다. .env파일을 만드는 이유는 다른 사람들에게 공개되서는 안될 프로젝트 고유의 설정값들을 보관하기 위해서입니다.

설치했다면 src 폴더 밑에 .env 파일을 만들어줍니다.

그리고 그 내용에는

PORT=4000

을 작성해줍니다.

7. myGraphQLServer.js 코딩하기

require("dotenv").config();
import { GraphQLServer } from "graphql-yoga";

 const PORT = process.env.PORT || 4000;

 const typeDefs = `
    type Query{
        hello: String!
    }
`;

 const resolvers = {
  Query: {
    hello: () => "Hi"
  }
};

 const server = new GraphQLServer({ typeDefs, resolvers });

 server.start({ port: PORT }, () =>
  console.log(`Server is running on  http://localhost:${PORT}`)
);

완성

멋진 Graphql 플레이그라운드의 화면을 볼 수 있습니다.

Screen Shot 2019-07-22 at 9.26.18 PM.png

Hello라는 쿼리를 입력하면 Hi라는 응답을 볼 수 있습니다.

Screen Shot 2019-08-01 at 8.22.11 PM.png

쿼리를 입력하고 싶을 때는

query {
  hello
}

와 같은 방식으로 입력하면 되고 앞의 Query는 생략될 수 있습니다.

{
  hello
}

도 같은 결과를 보여줍니다.

GraphQL 서버 만들기 끝!

요약

Graphql-yoga 깔고
Nodemon 깔고 (nodemon.json에 nodemon이 watch하지 않는 graphql확장자 watch하게 해주고)
babel 깔고 (.babelrc에서 preset설정해주고)
package.json 설정 (dev명령어 스크립트 넣고)
dovenv 깔고 (.env파일에 환경설정 하고)
server.js 만들자 (내용은 graphql-yoga에 있는 기본 내용)

진짜 끝!