GatsbyJS 개발 환경 설정 및 프로젝트 생성하기

GatsbyJS 개발 환경 설정 및 프로젝트 생성하기

GatsbyJS를 사용하여 웹사이트를 개발하려면 먼저 개발 환경을 설정하고, 첫 번째 Gatsby 프로젝트를 생성해야 합니다.
이번 글에서는 GatsbyJS를 설치하고, 프로젝트를 생성하는 과정을 단계별로 안내하겠습니다.

---

1. 개발 환경 준비

GatsbyJS를 사용하려면 Node.js와 Git이 필요합니다.
설치 여부를 확인하고, 최신 버전으로 업데이트하는 것이 좋습니다.

✅ Node.js 설치 확인 및 업데이트

먼저, 터미널이나 명령 프롬프트에서 아래 명령어를 실행하여 Node.js가 설치되어 있는지 확인하세요.

node -v

✅ 출력 예시

v18.16.0

🚀 Node.js가 설치되지 않았다면 Node.js 공식 사이트에서 다운로드 후 설치하세요.

✅ Gatsby CLI 설치

반응형

Gatsby 프로젝트를 쉽게 생성하고 관리하기 위해 **Gatsby CLI(Command Line Interface)**를 설치합니다.

npm install -g gatsby-cli

✅ 설치 완료 확인

gatsby --version

✅ 출력 예시

Gatsby CLI version: 5.0.0

🚀 Gatsby CLI를 설치하면 명령어 하나로 새로운 Gatsby 프로젝트를 만들 수 있습니다.

---

2. Gatsby 프로젝트 생성하기

이제 Gatsby 프로젝트를 생성해봅시다.

✅ 기본 Gatsby 프로젝트 생성

gatsby new my-gatsby-site

🚀 위 명령어를 실행하면 my-gatsby-site 폴더 안에 Gatsby 기본 프로젝트가 생성됩니다.

✅ 특정 스타터(Starter) 사용하여 생성

기본 프로젝트 외에도 다양한 Gatsby 스타터 템플릿을 활용할 수 있습니다.

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog

✔ gatsby-starter-blog는 블로그 기능이 포함된 템플릿입니다.
✔ Gatsby 공식 스타터 목록은 Gatsby Starters에서 확인할 수 있습니다.

---

3. 프로젝트 구조 이해하기

Gatsby 프로젝트가 생성되면 다음과 같은 폴더 구조가 만들어집니다.

my-gatsby-site/
├── node_modules/    # 설치된 패키지
├── src/             # 주요 코드 (페이지, 컴포넌트, 스타일)
│   ├── pages/       # Gatsby 페이지 파일
│   ├── components/  # 재사용 가능한 컴포넌트
│   ├── images/      # 정적 이미지 저장
├── public/          # 정적 사이트 빌드 결과
├── gatsby-config.js # Gatsby 설정 파일
├── gatsby-node.js   # Gatsby의 서버사이드 기능 추가
├── package.json     # 프로젝트 정보 및 의존성
└── .gitignore       # Git에서 제외할 파일 목록

🚀 Gatsby의 주요 파일 및 폴더 개념을 정리하면 다음과 같습니다.

• src/pages/ → Gatsby의 페이지가 저장되는 폴더
• gatsby-config.js → 사이트 기본 설정을 관리하는 파일
• gatsby-node.js → 동적 페이지 생성을 처리하는 파일

---

4. Gatsby 개발 서버 실행하기

프로젝트 생성이 완료되었으면, Gatsby 개발 서버를 실행해볼 차례입니다.

✅ 개발 서버 시작

프로젝트 폴더로 이동한 후, 아래 명령어를 실행하세요.

cd my-gatsby-site
gatsby develop

✅ 출력 예시

You can now view your site in the browser.
http://localhost:8000/

🚀 브라우저에서 http://localhost:8000/을 열면 Gatsby 기본 페이지가 실행됩니다.

---

5. 첫 번째 Gatsby 페이지 만들기

Gatsby에서는 src/pages/ 폴더 안에 .js 파일을 생성하면 자동으로 페이지가 생성됩니다.

✅ 새로운 페이지 추가

1. src/pages/about.js 파일을 생성하고 아래 코드를 추가하세요.

import React from "react";

const AboutPage = () => {
  return (
    <main>
      <h1>About Gatsby</h1>
      <p>GatsbyJS는 빠르고 강력한 정적 사이트 생성기입니다.</p>
    </main>
  );
};

export default AboutPage;

1. 개발 서버를 실행한 상태에서 브라우저에서 /about 경로로 이동해보세요.

http://localhost:8000/about

✅ 새로운 about 페이지가 자동으로 생성된 것을 확인할 수 있습니다. 🚀

---

6. Gatsby GraphQL 데이터 쿼리 도구 사용하기

Gatsby는 데이터 관리를 위해 GraphQL API를 기본적으로 제공합니다.
GraphQL 쿼리를 연습하려면 GraphiQL 인터페이스를 사용할 수 있습니다.

✅ GraphQL 개발 도구 실행

개발 서버가 실행된 상태에서 아래 주소에 접속하세요.

http://localhost:8000/___graphql

🚀 Gatsby의 데이터는 GraphQL을 통해 쉽게 조회할 수 있습니다.
아래 예제는 Gatsby의 사이트 정보를 가져오는 쿼리입니다.

query {
  site {
    siteMetadata {
      title
      description
    }
  }
}

✅ Gatsby에서 데이터를 가져오는 방법은 다음 글에서 더 자세히 다룰 예정입니다!

---

7. 결론

이번 글에서는 GatsbyJS를 설치하고, 첫 번째 프로젝트를 생성하는 과정을 배웠습니다.
✔ Node.js와 Gatsby CLI 설치
✔ Gatsby 프로젝트 생성 및 구조 이해
✔ 개발 서버 실행 및 첫 번째 페이지 생성
✔ Gatsby GraphQL API 살펴보기

🚀 다음 글에서는 Gatsby 페이지를 동적으로 생성하는 방법과 SEO 최적화 기법을 다뤄보겠습니다!