Gatsby의 데이터 표시

Gatsby는 개발자가 빠르고 확장 가능한 웹사이트와 애플리케이션을 구축할 수 있도록 지원하는 React 기반의 강력한 정적 사이트 생성기입니다. 효과적인 웹사이트를 구축하는 주요 측면 중 하나는 데이터를 사용자에게 효율적으로 표시하는 것입니다. Gatsby에서는 GraphQL, React 구성 요소 및 헤드리스 CMS, API, 로컬 파일과 같은 타사 데이터 소스의 조합을 사용하여 데이터 표시를 구현할 수 있습니다.

이 기사에서는 데이터를 효과적으로 렌더링하기 위한 주요 원칙, 전략 및 모범 사례에 중점을 두고 Gatsby 애플리케이션에서 데이터를 가져오고 표시하는 프로세스를 살펴보겠습니다.

1. 개츠비의 데이터 레이어 이해

Gatsby의 데이터 레이어는 개발자가 필요한 데이터를 정확하게 요청할 수 있도록 하는 쿼리 언어 역할을 하는 GraphQL을 기반으로 구축되었습니다. Gatsby는 GraphQL과 긴밀하게 통합되어 Markdown 파일, JSON 파일 또는 외부 API와 같은 다양한 소스에서 데이터를 쉽게 가져와 React 구성 요소 내에 표시할 수 있습니다.

Gatsby에서 데이터를 표시하는 단계는 일반적으로 다음과 같습니다.

• 외부 또는 내부 소스에서 데이터 가져오기
• GraphQL 쿼리를 사용하여 데이터 구조화
• React 컴포넌트를 사용하여 데이터 표시

2. Gatsby에서 GraphQL 쿼리 설정

Gatsby에는 데이터 소스에 쉽게 액세스할 수 있는 GraphQL 레이어가 내장되어 있습니다. GraphQL 쿼리를 사용하여 다음에서 데이터를 추출할 수 있습니다.

• Markdown 또는 JSON과 같은 로컬 파일
• Contentful, Strapi, WordPress 등의 CMS 플랫폼
• API 및 데이터베이스

예 1: 마크다운 데이터 쿼리

블로그를 만들고 Markdown 파일로 게시물을 작성했다고 가정해 보겠습니다. Gatsby의 gatsby-transformer-remark 플러그인을 사용하여 Markdown 파일을 쿼리하고 React 구성 요소에 콘텐츠를 표시할 수 있습니다.

export const query = graphql`
  query BlogPostQuery {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            title
            date
          }
          excerpt
        }
      }
    }
  }
`

그런 다음 JSX를 사용하여 구성 요소에서 가져온 블로그 게시물을 렌더링할 수 있습니다.

const Blog = ({ data }) => (
  <div>
    {data.allMarkdownRemark.edges.map(({ node }) => (
      <div key="{node.id}">
        <h2>{node.frontmatter.title}</h2>
        <p>{node.excerpt}</p>
        <small>{node.frontmatter.date}</small>
      </div>
    ))}
  </div>
)

예 2: CMS에서 데이터 쿼리(콘텐츠 있음)

Contentful과 같은 헤드리스 CMS를 사용하는 경우 Gatsby와 Contentful API를 통합하는 gatsby-source-contentful 플러그인을 설치하여 데이터를 쿼리할 수 있습니다. 다음은 Contentful에서 블로그 게시물을 가져오는 예입니다.

export const query = graphql`
  query ContentfulBlogPostQuery {
    allContentfulBlogPost {
      edges {
        node {
          title
          publishedDate(formatString: "MMMM Do, YYYY")
          body {
            childMarkdownRemark {
              excerpt
            }
          }
        }
      }
    }
  }
`

이제 Markdown을 사용하는 것과 유사하게 데이터를 렌더링할 수 있습니다.

const Blog = ({ data }) => (
  <div>
    {data.allContentfulBlogPost.edges.map(({ node }) => (
      <div key="{node.id}">
        <h2>{node.title}</h2>
        <p>{node.body.childMarkdownRemark.excerpt}</p>
        <small>{node.publishedDate}</small>
      </div>
    ))}
  </div>
)

3. API를 통해 외부 데이터 렌더링

Gatsby의 정적 데이터 소스(예: Markdown, CMS)는 훌륭하지만 API에서 외부 데이터를 동적으로 가져와야 하는 경우가 있을 수 있습니다. React에서 useEffect 후크를 사용하여 데이터를 가져와 클라이언트 측에 표시할 수 있습니다. 예를 들어, REST 엔드포인트나 GraphQL 서비스와 같은 외부 API에서 데이터를 가져오는 방법은 다음과 같습니다.

import React, { useEffect, useState } from "react";

const DataDisplay = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from an external API
    fetch('https://api.Gatsby의 데이터 표시.com/data')
      .then(response => response.json())
      .then(result => setData(result))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key="{item.id}">
          <h2>{item.name}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
};

export default DataDisplay;

4. Gatsby로 데이터 표시 최적화

Gatsby는 데이터 표시를 최적화하고 성능을 향상시키는 여러 가지 방법을 제공합니다.

쪽수 매기기

대규모 데이터 세트를 표시할 때 페이지 로드 시간을 개선하고 콘텐츠를 보다 쉽게 ​​관리할 수 있도록 데이터 페이지를 매기는 것이 중요합니다. Gatsby의 createPages API를 사용하여 페이지가 매겨진 페이지를 동적으로 생성할 수 있습니다.

const Blog = ({ pageContext, data }) => {
  const { currentPage, numPages } = pageContext;

  return (
    <div>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <div key="{node.id}">
          <h2>{node.frontmatter.title}</h2>
          <p>{node.excerpt}</p>
        </div>
      ))}

      <pagination currentpage="{currentPage}" numpages="{numPages}"></pagination>
    </div>
  );
};

지연 로딩

지연 로딩은 필수적이지 않은 리소스의 로딩을 지연시켜 성능을 향상시키는 기술입니다. 예를 들어, Gatsby의 gatsby-image는 이미지를 최적화할 수 있고 React.lazy 또는 동적 가져오기는 구성 요소 로딩을 지연시킬 수 있습니다.

import { LazyLoadImage } from 'react-lazy-load-image-component';

<lazyloadimage alt="Gatsby의 데이터 표시" height="{300}" effect="blur" src="path/to/image.jpg"></lazyloadimage>

정적 사이트 생성

Gatsby의 빌드 프로세스는 페이지를 정적 HTML로 사전 렌더링하여 성능을 크게 향상시킵니다. 그러나 클라이언트 측 렌더링을 사용하여 런타임에 동적 콘텐츠를 가져오고 삽입할 수도 있습니다.

5. Gatsby를 이용한 데이터 시각화

데이터를 효과적으로 표시하려면 차트나 그래프와 같은 시각화가 필요한 경우가 있습니다. Chart.js 또는 D3.js와 같은 데이터 시각화 라이브러리를 Gatsby 프로젝트에 통합하여 시각적 데이터 표현을 렌더링할 수 있습니다.

import { Line } from "react-chartjs-2";

const data = {
  labels: ['January', 'February', 'March', 'April', 'May'],
  datasets: [
    {
      label: 'Sales',
      data: [65, 59, 80, 81, 56],
      fill: false,
      backgroundColor: 'rgb(75, 192, 192)',
      borderColor: 'rgba(75, 192, 192, 0.2)',
    },
  ],
};

const MyChart = () => (
  <div>
    <h2>Sales Over Time</h2>
    <line data="{data}"></line>
  </div>
);

결론

Gatsby의 데이터 표시는 GraphQL 및 React 기반 아키텍처와의 통합 덕분에 유연하고 효율적인 프로세스입니다. 로컬 파일, CMS 또는 API에서 데이터를 가져오는 경우 Gatsby는 풍부한 데이터 표시 기능을 갖춘 고성능 웹 애플리케이션을 구축하기 위한 견고한 기반을 제공합니다. 페이지 매김, 지연 로딩 및 기타 최적화 기술을 구현하면 대규모 데이터세트를 처리할 때에도 Gatsby 사이트의 속도와 반응성을 유지할 수 있습니다.

위 내용은 Gatsby의 데이터 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!