GatsbyJS에서 동적 콘텐츠 생성하기: 데이터 기반 페이지 생성 방법

GatsbyJS에서 동적 콘텐츠 생성하기: 데이터 기반 페이지 생성 방법

GatsbyJS는 **정적 사이트 생성기(SSG)**이지만, 동적으로 데이터를 받아서 페이지를 생성하는 기능도 지원합니다.
이번 글에서는 Gatsby에서 GraphQL과 gatsby-node.js를 활용하여 동적 콘텐츠를 생성하는 방법을 설명하겠습니다. 🚀

---

1. Gatsby에서 동적 콘텐츠를 생성하는 방법

✅ 동적 콘텐츠 생성 방식

방식 설명 사용 예시

파일 기반 생성	src/pages 폴더에 정적 파일을 추가하여 페이지 생성	일반적인 정적 페이지 (/about, /contact 등)
GraphQL 데이터 기반 생성	외부 데이터(JSON, CMS, Markdown 등)를 기반으로 동적 페이지 생성	블로그, 제품 목록, 게시판 등
API 데이터 기반 생성	API에서 데이터를 받아 페이지를 생성	최신 뉴스, 실시간 정보 등

👉 이번 글에서는 GraphQL과 Markdown을 활용하여 블로그 포스트를 동적으로 생성하는 방법을 다룹니다.

---

2. Gatsby 프로젝트에 블로그 기능 추가하기

우리는 Markdown 파일을 데이터 소스로 사용하여 동적 블로그 페이지를 생성할 것입니다.

✅ Markdown 플러그인 설치

npm install gatsby-source-filesystem gatsby-transformer-remark

✅ Markdown 파일 추가 (content/blog/first-post.md)

---
title: "첫 번째 블로그 글"
date: "2024-03-12"
slug: "first-post"
---

GatsbyJS에서 동적 콘텐츠를 생성하는 방법을 알아봅니다.

---

3. gatsby-config.js 설정 (파일 시스템 연동)

반응형

이제 Gatsby가 Markdown 파일을 읽을 수 있도록 파일 시스템을 설정해야 합니다.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blog`,
        path: `${__dirname}/content/blog`,
      },
    },
    `gatsby-transformer-remark`
  ],
};

🚀 이제 GraphQL을 통해 Markdown 파일 데이터를 가져올 수 있습니다.

---

4. GraphQL로 Markdown 데이터 조회하기

✅ GraphiQL에서 데이터 확인 (http://localhost:8000/___graphql)

아래 GraphQL 쿼리를 실행하면 Markdown 파일의 데이터를 확인할 수 있습니다.

query {
  allMarkdownRemark {
    nodes {
      frontmatter {
        title
        date
        slug
      }
      excerpt
    }
  }
}

✅ 출력 예시

{
  "data": {
    "allMarkdownRemark": {
      "nodes": [
        {
          "frontmatter": {
            "title": "첫 번째 블로그 글",
            "date": "2024-03-12",
            "slug": "first-post"
          },
          "excerpt": "GatsbyJS에서 동적 콘텐츠를 생성하는 방법..."
        }
      ]
    }
  }
}

🚀 이제 Gatsby가 Markdown 데이터를 정상적으로 읽어오는 것을 확인했습니다!

---

5. gatsby-node.js에서 동적 페이지 생성하기

이제 Markdown 데이터를 기반으로 블로그 포스트 페이지를 동적으로 생성하겠습니다.

✅ gatsby-node.js에서 페이지 생성 코드 추가

const path = require("path");

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  // GraphQL을 통해 모든 블로그 포스트 데이터 가져오기
  const result = await graphql(`
    query {
      allMarkdownRemark {
        nodes {
          frontmatter {
            slug
          }
        }
      }
    }
  `);

  // 블로그 템플릿 설정
  const blogTemplate = path.resolve("src/templates/blog-template.js");

  result.data.allMarkdownRemark.nodes.forEach(post => {
    createPage({
      path: `/blog/${post.frontmatter.slug}/`,
      component: blogTemplate,
      context: { slug: post.frontmatter.slug },
    });
  });
};

✅ 설명

• GraphQL을 사용하여 모든 Markdown 포스트의 slug를 가져옴
• createPage()를 사용하여 각 포스트의 URL을 /blog/{slug}/ 형식으로 동적으로 생성
• src/templates/blog-template.js를 포스트 페이지 템플릿으로 사용

🚀 이제 Gatsby가 자동으로 블로그 포스트 페이지를 생성합니다.

---

6. 블로그 포스트 템플릿 만들기 (src/templates/blog-template.js)

이제 블로그 포스트를 표시할 템플릿 컴포넌트를 작성합니다.

✅ blog-template.js 코드 추가

import React from "react";
import { graphql } from "gatsby";

const BlogTemplate = ({ data }) => {
  const post = data.markdownRemark;

  return (
    <main>
      <h1>{post.frontmatter.title}</h1>
      <p>{post.frontmatter.date}</p>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </main>
  );
};

export const query = graphql`
  query ($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      frontmatter {
        title
        date
      }
      html
    }
  }
`;

export default BlogTemplate;

✅ 설명

• context에서 받은 slug를 사용하여 해당 포스트의 데이터를 가져옴
• dangerouslySetInnerHTML={{ __html: post.html }}를 사용하여 Markdown을 HTML로 렌더링

🚀 이제 /blog/first-post/에 접속하면 동적으로 생성된 블로그 글이 표시됩니다!

---

7. 동적 블로그 목록 페이지 만들기

이제 모든 블로그 글을 리스트로 표시하는 페이지를 추가하겠습니다.

✅ 블로그 목록 페이지 (src/pages/blog.js)

import React from "react";
import { Link, graphql } from "gatsby";

const BlogPage = ({ data }) => {
  return (
    <main>
      <h1>블로그 목록</h1>
      <ul>
        {data.allMarkdownRemark.nodes.map(post => (
          <li key={post.frontmatter.slug}>
            <Link to={`/blog/${post.frontmatter.slug}/`}>
              {post.frontmatter.title} - {post.frontmatter.date}
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
};

export const query = graphql`
  query {
    allMarkdownRemark(sort: { frontmatter: { date: DESC } }) {
      nodes {
        frontmatter {
          title
          date
          slug
        }
      }
    }
  }
`;

export default BlogPage;

🚀 이제 /blog/ 경로에서 모든 블로그 글을 리스트로 확인할 수 있습니다.

---

8. 결론

이번 글에서는 GatsbyJS에서 동적 콘텐츠를 생성하는 방법을 배웠습니다.
✔ Markdown을 데이터 소스로 활용하여 블로그 글 작성
✔ gatsby-node.js에서 GraphQL 데이터를 기반으로 동적 페이지 생성
✔ 블로그 목록 페이지를 만들어 모든 포스트를 리스트 형태로 표시

🚀 다음 글에서는 Gatsby에서 검색 기능을 추가하는 방법을 다루겠습니다!