Gatsby에 typescript 적용하기

시작하기

Gatsby는 React에 기반한 무료 오픈 소스 프레임 워크로 개발자가 정적 웹 사이트를 구축 할 수 있습니다.

설치하기

Gatsby CLI 설치

npm install -g gatsby-cli

프로젝트 생성

gatsby new gatsby-project

프로젝트로 이동

cd gatsby-project

개발 서버 시작

gatsby develop

타입스크립트 추가하기

npm i -D typescript
npm i gatsby-plugin-typescript

타입스크립트와 gatsby 타입스크립트 플러그인을 설치합니다.

gatsby-config.js

//...
plugins: [
    //...
    `gatsby-plugin-typescript`,
    //...
]
//...

플러그인을 설정파일에 추가합니다.

tsconfig.json 파일을 생성합니다.

tsconfig.json

{
    "compilerOptions": {
      "module": "commonjs",
      "target": "esnext",
      "jsx": "preserve",
      "lib": ["dom", "esnext"],
      "baseUrl": ".",
      "strict": true,
      "noEmit": true,
      "isolatedModules": true,
      "esModuleInterop": true,
      "noUnusedLocals": false,
      "allowJs": true
    },
    "exclude": ["node_modules", "public", ".cache"]
}

이후 js확장자를 tsx로 사용하면 됩니다.

추가) sass/scss사용

node-sass와 gatsby-plugin-sass를 설치합니다.

npm i -D node-sass gatsby-plugin-sass

타입스크립트와 같이 플러그인을 추가합니다.

gatsby-config.js

//...
plugins: [
    //...
    `gatsby-plugin-sass`,
    //...
]
//...