Gatsby에서 원격 이미지를 최적화하는 방법

GatsbyJS는 어디에서나 콘텐츠를 제공하는 빠르고 확장 가능하며 정적 웹 사이트를 만드는 데 탁월합니다. 사이트에 데이터를 제공하기 위한 많은 주요 플러그인이 기본적으로 Gatsby 이미지 최적화 플러그인(gatsby-plugin-image)을 지원하지만 모두에게 해당되는 것은 아닙니다. 운 좋게도 이러한 이미지를 변환하고 최적화 장점을 활용하는 것은 간단합니다! 🤤

왜 귀찮게?

웹사이트용 perfect Lighthouse score을(를) 소유하려는 끈질긴 추구에서 적절하게 최적화된 이미지가 있으면 도움이 될 뿐입니다. 파일 크기가 전반적으로 작기 때문에 인터넷 연결이 불안정한 장치에서 웹 페이지를 로드하는 것이 더 빠릅니다. 또한 장치 너비에 따라 크기가 조정되는 반응형 이미지를 사용하면 이미지가 모든 화면 크기에서 멋지게 보일 것입니다. 즉, 누가 4인치 iPhone SE에 8K 이미지가 로드되기를 기다리겠습니까? 최신 웹 사이트 구축을 위한 모범 사례 및 권장 사항을 따르려면 이미지를 최적화해야 합니다.

Gatsby를 위해 작동하도록 합시다!

프로젝트 종속성 업데이트

제대로 작동하려면 먼저 프로젝트 종속성을 업데이트해야 합니다. Gatsby 프로젝트 디렉터리에서 다음 명령을 실행하여 이미지 최적화에 필요한 모든 패키지를 가져옵니다.
yarn add gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp
궁금한 점이 있을 경우를 대비해 각 플러그인의 기능은 다음과 같습니다.gatsby-plugin-image는 Gatsby 사이트에 최적화된 반응형 이미지를 생성합니다.gatsby-source-filesystem는 원격 이미지에서 파일 노드를 생성합니다.gatsby-plugin-sharp는 이미지 처리를 처리합니다.gatsby-transformer-sharp는 gatsby-source-filesystem와 함께 사이트에 대해 GraphQL로 쿼리할 수 있는 필수 노드를 생성합니다.

다음으로 콘텐츠를 Gatsby 사이트로 가져올 소스 플러그인을 가져와야 합니다. 이 자습서에서는 gatsby-source-ghost을 사용하여 Ghost 블로그에서 콘텐츠를 가져오지만 다른 소스 플러그인을 사용해도 됩니다.
yarn add gatsby-source-ghost
또는 여기GitHub repo에서 모든 종속성과 완료된 예제 프로젝트를 찾을 수 있습니다.

이제 gatsby-config.js의 플러그인 목록에 새 플러그인을 추가하기만 하면 됩니다.

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
  siteMetadata: {
    siteUrl: "https://www.example.tld",
    title: "gatsby-optimise-remote-images",
  },
  plugins: [
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-ghost",
      options: {
        apiUrl: process.env.GHOST_API_URL,
        contentApiKey: process.env.GHOST_API_KEY,
        version: "v3",
      },
    },
  ],
}

아직 Ghost 블로그가 없는 경우follow these instructions 컴퓨터에 블로그를 설정합니다. API 키가 필요한 경우 this guide에서 수행할 작업을 보여줍니다. .env.development 파일에 넣어야 합니다.

GraphQL 쿼리를 위한 원격 노드 생성

이제 종속성이 설치되었으므로 최적화된 원격 이미지에 필요한 노드를 생성할 수 있습니다. 이를 통해 GraphQL 쿼리에 노드를 포함하고 필요한 데이터에 액세스하여 이미지를 최적화하는 GatsbyImage 구성 요소에 피드할 수 있습니다.

아직 없는 경우 파일gatsby-node.js을 만들고 다음 코드를 추가합니다. 무슨 일이 일어나고 있는지 알고 싶다면 댓글을 살펴보세요! 👀

// gatsby-node,js
const { createRemoteFileNode } = require("gatsby-source-filesystem"); // We'll use this to create the file nodes from the remote images
exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;

  // creates a relationship between GhostPost and the File node for the optimized image
  createTypes(`
    type GhostPost implements Node {
      remote_image: File @link
    }
  `); // change "GhostPost" to whatever type you're using from your source plugin
};
exports.onCreateNode = async ({
  actions: { createNode },
  getCache,
  createNodeId,
  node, }) => {
  // we need to verify that we're using the correct node created by our source plugin so we check its type and if it has a value
  if (node.internal.type === `GhostPost` && node.feature_image !== null) {
    // create the file node
    const fileNode = await createRemoteFileNode({
      url: node.feature_image, // URL of the remote image
      getCache, // Gatsby cache
      createNode, // helper function to generate the node
      createNodeId, // helper function to generate the node ID
      parentNodeId: node.id, // id of the parent node of the file
      node
    });
    // if the file node was created, attach the new node
    if (fileNode) {
      node.remote_image = fileNode.id;
    }
  }
}

이제 GraphQL 쿼리에서 최적화를 위해 새로운 원격 이미지에 액세스할 수 있습니다! 🎉 간단히 말해서 여기서 우리가 하는 일은 Gatsby가 생성된 파일을 사용하고 이미지를 최적화할 수 있도록 파일 시스템에 원격 이미지를 다운로드하는 것뿐입니다.

페이지에서의 사용

사이트에 최적화된 이미지를 추가하는 것은 로컬 소스 이미지를 추가하는 데 사용하는 것과 정확히 동일한 절차입니다. GraphQL 쿼리를 업데이트하기만 하면 됩니다. 블로그 게시물 목록을 홈 페이지에 추가하고 주요 이미지도 표시하여 이를 테스트해 보겠습니다. 여기에서 GatsbyImage 구성 요소를 사용할 것입니다. src/pages/index.js의 모든 항목을 다음으로 바꿉니다.

// src/pages/index.js
import * as React from "react"
import { Link, graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"
const IndexPage = ({ data }) => {
  const blogPosts = data.allGhostPost.edges
  return (
    <>
      <h1>Blog Posts</h1>
      <div>
        <ul>
          {blogPosts.map((post, i) => (
            <li key={I}>
              <Link to={post.node.slug}>
                {/* GatsbyImage component to render our optimised image */}
                <GatsbyImage
                  image={post.node.remote_image.childImageSharp.gatsbyImageData}
                  alt={post.node.title}
                />
                <p>{post.node.title}</p>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </>
  )
}
export default IndexPage
export const IndexQuery = graphql`
  query blogListQuery {
    allGhostPost(sort: { fields: [published_at], order: DESC }) {
      edges {
        node {
          slug
          title
          published_at(formatString: "DD MMMM YYYY")
          remote_image {
            childImageSharp {
              # this is the field which we'll pass into the GatsbyImage component
              # we add the DOMINANT_COLOR placeholder to make a nice effect when lazy loading
              gatsbyImageData(placeholder: DOMINANT_COLOR)
            }
          }
        }
      }
    }
  }
`

그리고 그게 다야! 터미널에서 yarn develop를 실행하고 http://localhost:8000/으로 이동하여 모두 작동하는지 확인합니다. 스타일을 추가하여 모두 보이게 만드는 것을 잊지 마세요 🔥