TIL #1 - GraphQL and Express with goorm ide

 

 

 

Nomad Coders의 인스타그램 클론 강의를 듣고 있다. 올해가 다 가기전에 완강하는 것이 목표지만 되도록 주어진 내용은 이해하고 넘어가려고 한다. 아직까지는 모든 게 새롭다!

이미 업무에서 사용하고 있는 프로그램과 충돌이 나는 것을 방지하기 위해 구름IDE를 사용해서 실습을 진행했는데 이 때 발생하는 차이점이 몇가지 있어서 그에 대한 내용도 정리했다.

먼저 Node.js가 설치된 환경에서 다음을 추가적으로 설치했다. 명령어는 npm add <program name>이다. 그러면 package.json 파일에 다음과 같이 추가된다.

참고로 개발 시 서버 연결을 간단하게 하기 위해 package.json파일에 scripts를 추가했는데 yarn이 아닌 npm으로 여는 방법은 npm start-script <your keyname>이다.

여기서는 설명을 위해 json 파일에 주석을 사용했지만 원래 json 파일에 주석을 사용하는 것은 지양된다.

    "babel-cli": "^6.26.0", //최신 코드를 옛날 코드로 변경, 오류를 줄여줌
    "dotenv": "^8.1.0", //.env파일을 읽게 해줌
    "graphql-yoga": "^1.18.3",
    "nodemon": "^1.19.3" // 파일을 저장할 때마다 서버를 새로고침 해 줌

그 다음으로 server.js 파일을 생성하게 될텐데 보통 자동적으로 localhost에서 정상적으로 동작할테지만 나는 구름 ide에서 실습을 해서 url을 변경할 필요가 있었다.

그래서 port와 base_url을 따로 지정해 줬다. 여기서 port가 구름에서 지정한 port와 같으면 에러가 발생하므로 (아마 localhost에서 따로 돌아가므로 그런 것 같음) 두개를 다르게 지정해주자.

require("dotenv").config();
import { GraphQLServer } from "graphql-yoga";
const PORT = process.env.PORT;
const base_url = process.env.ENV_URL || "url을 입력하세요.";
const typeDefs = `
    type Query{
        hello: String!
    }
`;
const resolvers = {
  Query: {
    hello: () => "Hi"
  }
};
const server = new GraphQLServer({ typeDefs, resolvers });
server.start({ port: PORT, url: base_url }, () =>
  console.log(`Server running on  http://localhost:${PORT}`)
);

GraphQL에는 express가 내장되어 있다 server.express를 통해 express server에 접근할 수 있다.

GraphQL에서는 스키마와 reslover가 필요한데 스키마는 받을 쿼리에 대한 설명(데이터 타입 etc), resolver는 해당 쿼리가 들어오면 취할 행동을 함수로 지정한 것을 말한다. 둘은 항상 함께 정의되어야 한다. (제대로 이해하고 있는지 모르겠다.)