노드에서 es6문법 사용

npm i @babel/cli @babel/core @babel/node @babel/preset-env -D

@babel/core : 바벨 사용을 위해 필수 설치.

@babel/cli : command line을 통해 코드를 traspile할 수 있게 한다.

@babel/node : ES6로 작성된 코드를 실행하는 기능. 개발환경에서만 사용할 것.

@babel/preset-env : 함께 사용되어야 할 바벨 플러그인 모음



root 폴더 .babelrc 파일 생성
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets":{"ie": 11},
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

targets : ie 11버전까지 지원가능한 코드로 변환
useBuiltIns: usage는 폴리필이 필요한 코드에 대해 폴리필 적용
corejs : 버전 3
//mininum version
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {"chrome": "58", "ie": "11"}
    }],
  ]
}

npm i nodemon

"scripts": {
    "dev": "nodemon server.js --exec babel-node"
  },
개발 환경에서만 바벨 노드를 사용하여 코드 실행.
프로덕션에서는 그때마다 컴파일하여 성능저하를 가져온다.

ApolloServer mongoDB 연동

npm i apollo-server graphql mongoose
// server/server.js

import dotenv from 'dotenv';
dotenv.config();
import { ApolloServer } from 'apollo-server';
import typeDefs from './graphql/schema/typeDefs';
import resolvers from './graphql/resolvers/resover';
import mongoose from 'mongoose';

const { MONGO_URL } = process.env;

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: true,
});

mongoose
  .connect(MONGO_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => server.listen({ port: 5000 }))
  .then((res) => console.log(res.url));

MONGO_URL은 서버 깃허브 업로드시 서버 비밀번호가 노출되므로 .env파일에서 가져와 사용.

//server/.env

MONGO_URL = mongodb+srv://<username>:<password>@cluster0.ovklx.mongodb.net/<dbname>?retryWrites=true&w=majority

username, password는 mongoDB서버에서 가져와 사용.

// graphql/schema/typeDefs.js

import { gql } from 'apollo-server';

const typeDefs = gql`
  type Query {
    book: [Book]
  }
  type Book {
    title: String
    author: String
  }
`;

export default typeDefs;



// graphql/resolvers/resolver.js

const resolvers = {
  Query: {
    book: () => [
      {
        title: 'Title 1',
        author: 'Author 1',
      },
      {
        title: 'Title 2',
        author: 'Author 2',
      },
    ],
  },
};

export default resolvers;


npm run dev

http://localhost:5000/ 접속

query {
  book{
    title
    author
  }
}
위처럼 쿼리를 요청하면 아래의 쿼리 응답이 오는 것을 확인.

{
  "data": {
    "book": [
      {
        "title": "Title 1",
        "author": "Author 1"
      },
      {
        "title": "Title 2",
        "author": "Author 2"
      }
    ]
  }
}