gatsby v4 공식 보일러 프로젝트 설치

gatsby new gatsbt-blog <https://github.com/gatsbyjs/gatsby-starter-hello-world>

package-lock.json 삭제하고 이제 세팅을 열심히 해보자

타입스크립트 적용

yarn add -D @types/react @types/react-dom @types/node

yarn add typescript gatsby-plugin-typescript

tsconfig.json 추가

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react"
  },
  "include": [
    "src",
    "tsconfig.paths.json"
  ]
}

tsconfig.paths.json 절대 경로 추가

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components": ["./components/"],
      "@templates": ["./templates"],
      "@pages": ["./pages"],

      "@/*": ["./*"]
    }
  }
}

emotion 설치

yarn add gatsby-plugin-emotion @emotion/react @emotion/styled

gatsby-config.js 에 추가

module.exports = {
  plugins: [
    `gatsby-plugin-emotion`,
  ],
}