Gatsby.js는 React 기반의 정적 사이트 생성기로, 플러그인을 통해 다양한 기능을 추가할 수 있습니다. 이번에는 Gatsby 프로젝트에서 TypeScript와 Babel을 설정하여 개발 환경을 최적화하는 방법에 대해 살펴보겠습니다.

목차

1. TypeScript와 Babel 설치
2. TypeScript 구성 파일 설정
3. Babel 구성 파일 설정

TypeScript와 Babel 설치

가장 먼저 프로젝트에 TypeScript와 Babel을 설치해야 합니다. npm을 사용하여 다음과 같이 설치할 수 있습니다.

npm install gatsby-plugin-typescript @babel/preset-typescript @babel/preset-env

TypeScript 구성 파일 설정

프로젝트 루트 경로에 tsconfig.json 파일을 만들고 다음과 같이 기본 설정을 추가합니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "module": "esnext",
    "jsx": "react",
    "strict": true
  }
}

이제 TypeScript를 사용하여 Gatsby 프로젝트를 개발할 수 있습니다.

Babel 구성 파일 설정

Babel을 설정하기 위해 프로젝트 루트 경로에 .babelrc 파일을 생성하고 아래와 같이 설정합니다.

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

이렇게 하면 Babel이 TypeScript 코드를 변환하여 Gatsby 프로젝트에서 사용할 수 있도록 해 줍니다.

이제 TypeScript와 Babel을 성공적으로 설정했으며, Gatsby.js 프로젝트에서 TypeScript를 사용하여 더욱 안정적이고 효율적인 개발을 진행할 수 있습니다.

본문에서 설명한 내용은 Gatsby.js의 공식문서를 참고하여 작성되었습니다.