#1 NextJS, Apollo, GraphQl 개발 환경 셋팅하기

Beter 프로젝트의 개발환경을 NextJS, Apollo, GraphQl, React, Typescript 구성으로 셋팅하기로 했다.

 

1. Project 만들기

npx create-next-app <project name>
cd <project name>
npm run dev

2. Typescript 셋팅하기

<project name>/tsconfig.json 만들기
npm run dev

위 과정을 마치고 pages와 api 폴더에 자동으로 생성되었던 _app.js와 hello.js을 타입스크립트 파일로 바꿨다.

// api/hello.js -> api/hello.ts
import { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
  res.status(200).json({ name: 'John Doe' })
}

// pages/_app.js -> pages/_app.tsx
import type { AppProps } from 'next/app'
import '../styles/globals.css'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

3. ESLint, Prettier 적용하기

개발에 시작하기 앞서 ESLint랑 Prettier을 적용해 좀 더 이쁘게 작성 할 수 있도록 설정 한다.

eslintrc.json랑 .prettierrc.json 그리고 바로 수정되도록 vscode setting.json을 바꿔줬다.

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

• prettier: 예쁘게 정리해주는 모듈
• eslint: 문법 오류를 찾아주는 모듈
• eslint-config-prettier: prettier과 eslint 충돌 되는 규칙 무시
• eslint-plugin-prettier: prettier을 사용해 format을 바꾸도록 eslint에 규칙을 추가하는 모듈

prettier 설정을 아래 페이지에서 찾아서 내 입맛대로 작성했다.

prettier.io/docs/en/options.html

Prettier · Opinionated Code Formatter

// setting.json of VS Code 
...
"editor.codeActionsOnSave": {
	"source.fixAll.eslint": true
},
"editor.formatOnSave": true

// eslintrc.json
{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["@typescript-eslint", "react", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {},
  "ignorePatterns": ["dist/", "node_modules/"]
}

// .prettierrc.json
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": true,
  "semi": false,
  "singleQuote": false,
  "quoteProps": "consistent",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "arrowParens": "always"
}

 

여기까지 기본 셋팅을 마쳤다.

우선 apollo 셋팅을 하기 전에 DB 먼저 진행해야될 것 같다. DB 셋팅이 마무리되면 apollo 셋팅까지 해보고 postgre에 저장되어 있는 데이터를 조회해봐야겠다.