새로운 방법

이미지 부분에 대해서 공부하다가, gatsby-image API가 Gatsby에서는 더 이상 사용하지 않는 API라는 공식 문서를 보게 되어 공유하고자 글을 썼습니다. (관련 링크)

공식 문서에서 이를 대체하는 방법으로 gatsby-transformer-sharp 플러그인을 사용한 GatsbyImage 인데요, 사용 방법은 공식문서를 보시면 됩니다!  

위 공식 문서에서는 이미지를 불러와 사용하는 방법만 있고, 이 강의에서 하고자하는 블러 처리와 몇 가지를 통한 최적화된 이미지는 옵션을 추가하셔야 됩니다. (링크)

썸네일 관련 이미지에 대한 쿼리는 제가 아래와 같이 구현했는데, 현도님께서 강의해주신 것과 동일하게 작동합니다.

query filteredData {
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          thumbnail {
            childImageSharp {
              gatsbyImageData(
                quality: 100
                placeholder: BLURRED
                formats: [AUTO, WEBP, AVIF]
                transformOptions: {fit: INSIDE}
                layout: CONSTRAINED
                width: 768
                height: 200
              )
            }
          }
        }
      }
    }
  }
}

해당 쿼리문을 사용하는 방법은 위 공식 문서를 확인해주시면 되겠고, 프로필 이미지에 대한 쿼리문은 옵션 부분만 변경하면 되겠습니다.

현도님께서 이 글을 보고 잘못된 부분에 대해 수정해주신다면 감사드리겠습니다! 저는 아직 코린이라서요ㅠㅠ

모두 재밌는 코딩하세요:)