쿠...sal: [컴][웹] gatsby plugin 들 일부 사용법

개츠비 / 게츠비 / SSG

gatsby plugin 들 일부 사용법

테스트로 몇가지 해본 사항을 추후에 참고하기 위해 적었다.

`npm i gatsby-transformer-sharp`

GatsbyImagecomponent 를 사용하려면, npm i gatsby-transformer-sharp 를 해야 한다. 그리고 gatsby-config.ts 에 아래처럼 추가해 준다.

이 plugin 이 image 를 받아서 여러 size 와 포맷으로 만들어준다. 그리고 해당하는 publid url 을 제공해준다.(?)

gatsby-transformer-sharp | Part 7: Add Dynamic Images from Data | Gatsby

gatsby-transformer-sharp 를 설치하는 경우 gatsby-plugin-sharp도 같이 설치해줘야 하는 듯 하다. 설치하지 않으면, build 시점에 gatsby-plugin-shart 설정이 잘못됐다는 error 가 보인다.

// gatsby-config.ts
module.exports = {
    ...
    plugins: [
        ...
        `gatsby-transformer-sharp`,
        ...

`npm i gatsby-plugin-sharp`

gatsby-plugin-sharp | Gatsby

Sharp image processing libraray 위에 만들어진 여러 이미지 처리 함수들을 노출한다. 다른 Gatsby 플러그인에서 일반적으로 사용하는 low-level helper 플러그인이다. 일반적으로 직접 사용해서는 안 된다. 그러나 very custom image processing을 수행하는 경우 유용할 수 있다.

// gatsby-config.ts
module.exports = {
    ...
    plugins: [
        ...
        `gatsby-plugin-sharp`,
        ...

npm i gatsby-plugin-image

gatsby-plugin-image 는 유저의 screen size 와 pixel density 를 보고 가장 최적의 miage size 와 format 을 정해서 전달해준다.

gatsby-plugin-image | Gatsby

`npm i gatsby-source-filesystem`

npm i gatsby-source-filesystem 는 createResolvers 에서 image file 에 대한 property 를 만들때 쓰였다.

// gatsby-config.ts
module.exports = {
    ...
    plugins: [
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images`,
            },
        },
        ...

`npm i gatsby-source-graphql`

다음링크처럼, gatsby 에서 여러가지의 source-plugin 들을 제공하는데, 여기에 원하는 source-plugin 이 없다면, gatsby-source-graphql을 사용해야 한다.

Gatsby Plugin Library | Search 3,000+ Plugins | Gatsby

`npm run develop`

createRemoteFileNode | gatsby-source-filesystem | Gatsby : 이것은 서버에서 serve 하는 file들을 미리 받아오는 작업을 해준다. 이작업은 client 를 serve하는 server와 api 서버가 따로 있는 구조일때 의미가 있어 보인다.

+----------------------------+     +------------------+
|                            |     |                  |
| server which serves gatsby |<--> | headless server  |
|                            |     |                  |
+----------------------------+     +------------------+
      |
      V
    +---------+
    | Web     |
    | browser |
    +---------+

gatsby-node.ts 에

import type { GatsbyNode } from "gatsby"
import path from "path";

// Log out information after a build is done
exports.onPostBuild = ({ reporter }) => {
  reporter.info(`Your Gatsby site has been built!`)
}
// Create blog pages dynamically
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const collections = await graphql(GET_COLLECTIONS)
  console.log(collections)
}

const GET_COLLECTIONS = /* GraphQL */ `
  query {
    vendure {
      collections {
        items {
          id
          name
          description
          slug
          breadcrumbs {
            id
            name
            slug
          }
          featuredAsset {
            id
            preview
            imageFile {
              childImageSharp {
                gatsbyImageData(width: 300, height: 300, quality: 85)
              }
            }
          }
          parent {
            id
            name
          }
        }
      }
    }
  }
`

쿠...sal

[컴][웹] gatsby plugin 들 일부 사용법