Package Setup

GraphQL을 사용해보고자 여기저기 찾아보았음.

사실 편하기는 Python Django가 편할것 같았지만, GraphQL을 사용하기에는 좋지 않아 보였음. 

그래서 NodeJS를 사용하자 결정하였으며, Typescript가 개발자를 편하게 만들어 주는것 같아서

이참에 한번 사용해보자 하는 마음으로 적용하게 됨.

- Typescript + TypeORM + GraphQL Yoga + MySQL

- Install

TypeScript

  ]$ yarn add typescript ts-node nodemon tslint-config-prettier --dev

  ]$ yarn add dotenv class-validator bcrypt

GraphQL

  ]$ yarn add graphql-yoga graphql-tools merge-graphql-schemas

  ]$ yarn add graphql-to-typescript gql-merge babel-runtime --dev

TypeORM

  ]$ yarn add typeorm mysql

Middleware

  ]$ yarn add helmet morgan cors

@types

  ]# yarn add @types/node @types/cors @types/helmet @types/morgan @types/bcrypt --dev

- tsconfig.json

{

    "compilerOptions": {

      "baseUrl": ".",

      "outDir": "dist",

      "module": "commonjs",

      "target": "es5",

      "lib": ["es6", "dom", "esnext.asynciterable"],

      "sourceMap": true,

      "allowJs": true,

      "moduleResolution": "node",

      "rootDir": "src",

      "forceConsistentCasingInFileNames": true,

      "noImplicitReturns": true,

      "noImplicitThis": true,

      "noImplicitAny": false,

      "strictNullChecks": true,

      "suppressImplicitAnyIndexErrors": true,

      "noUnusedLocals": true,

      "esModuleInterop": true,

      "skipLibCheck": true,

      "experimentalDecorators": true,

      "emitDecoratorMetadata": true

    },

    "exclude": [

      "node_modules",

      "build",

      "scripts",

      "acceptance-tests",

      "webpack",

      "jest",

      "src/setupTests.ts"

    ]

}

- tslint.json

{

    "extends": ["tslint:recommended", "tslint-config-prettier"],

    "linterOptions": {

      "exclude": ["config/**/*.js", "node_modules/**/*."]

    },

    "rules": {

      "no-console": false,

      "member-access": false,

      "object-literal-sort-keys": false,

      "ordered-imports": true,

      "interface-name": false,

      "strict-null-checks": false

    },

    "rulesDirectory": []

}

위 두 설정의 경우는 typescript에서 사용되는 룰셋들에 해당되며

이것들은 잘 찾아보면서 각 설정들은 만져주면 될것 같음.

위와 같이 설정해준 후 설정들을 하나하나 잡아줘야하지만 최종적으로 쓰일 것들만 먼저 선언.

- package.json 내 scripts

"scripts": {

    "predev": "yarn run types",

    "dev": "cd src && nodemon --exec ts-node index.ts -e ts,graphql",

    "pretypes": "gql-merge --out-file ./src/schema.graphql ./src/api/**/*.graphql",

    "types": "graphql-to-typescript ./src/schema.graphql ./src/types/graph.d.ts",

    "prebuild": "rm -rf dist",

    "build": "tsc",

    "postbuild": "cd src && copy ./api/**/*.graphql ../dist/api",

    "start": "cd dist && node ."

}

기본적으로 yarn dev를 이용해서 개발 서버를 구동시켜 줌.

이때 프로젝트내의 분산되어 있는 모든 graphql 파일들을 합쳐줌.

그리고 graphql-to-typescript 모듈을 이용해 typescript용 definition 파일을 생성해줌.

추후 실제 프로덕션에서는 tsc 모듈을 이용해 build를 해주고 start를 해주게 됨.

거창하지만 단 두개

yarn dev

yarn build && yarn start

개발 도중에 VisualStudio Code 를 사용했는데 Typescript에서 graphql definitions을 정상적으로 받아오지 못하는 경우가 있었음.

이럴때는

yarn types

실행 후 graphql.d.ts 파일을 열어서 그냥 저장만 해주면 vs code에서 적용된것을 볼 수 있음.

위와 같이 설정해준 후 src/index.ts 파일을 생성해서 정상적으로 동작하는지 확인.

단, graphql 스키마가 존재하지 않기 때문에 에러가 발생하는것을 확인할 수 있다.

이 단계에서는 무시하도록 한다.

index.ts에 작성한 내용이 잘 나온다면 package 설정이 잘 된것을 확인할 수 있다.

이제부터는 코딩을 통해 서버 구현을 해주는 단계가 되었다.