쿼리문에 오류가 발생합니다

React 기반 Gatsby로 기술 블로그 개발하기

gatsby-plugin-image 라이브러리로 최적화된 썸네일 사진 띄워주기

작성

268

frontmatter {
  title
  summary
  date(formatString: "YYYY.MM.DD.")
  categories
  thumbnail {
    childImageSharp {
      fluid(
        maxWidth: 768
        maxHeight: 200
        fit: INSIDE
        quality: 100
      ) {
        ...GatsbyImageSharpFluid_withWebp
      }
    }
  }
}

위의 쿼리문은 동작하지 않습니다.

아래 쿼리문처럼 해야 동작을 하네요

frontmatter {
  title
  summary
  date(formatString: "YYYY.MM.DD.")
  categories
  thumbnail
}

이렇게 되면 PostItem에 아래 코드를 사용할 수가 없게됩니다.

<ThumbnailImage fluid={fluid} alt="Post Item Image" />

그래서 아래처럼 대체했습니다.

<img src={thumbnail} alt='Post Item Image' />

근데 의도하신 강의 내용과 다른 거 같아서 어떡해야할지 모르겠네요

Gatsby blog

답변 3

주현도

지식공유자

안녕하세요, Choi Boo님!

답변 늦어서 죄송합니다 ㅠㅠ

확인해보니까 마크다운 파일에 작성된 썸네일 이미지가 contents 디렉토리가 아닌 public 디렉토리에 있어서 발생한 문제였습니다.

Fluid 이미지 생성 작동 원리는 다음과 같습니다.

1. gatsby-source-filesystem 라이브러리를 통해 마크다운 파일 및 썸네일 이미지 경로를 지정한다.

{
resolve: `gatsby-source-filesystem`,
options: {
name: `contents`,
path: `${__dirname}/contents`,
},
},

위의 코드에 의해 Gatsby 프레임워크는 contents 디렉토리의 파일을 인식할 수 있습니다.

2. gatsby-remark-images 라이브러리를 통해 최적화된 이미지를 생성한다.

{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 768,
quality: 100,
withWebp: true,
},
},

이번엔 위의 코드에 의해 Fluid 및 Fixed 이미지를 사용할 수 있게 최적화된 이미지를 생성합니다.

결국 썸네일 이미지가 contents 디렉토리에 존재하지 않으면 위의 모든 기능을 사용할 수 없습니다.

public 디렉토리에 저장한다면 URL을 통해서만 이미지에 접근이 가능하고, 최적화된 이미지를 사용할 수 없습니다.

따라서 해당 문제는 이미지 파일을 contents 디렉토리에 그대로 복사한 후, 강의에 있는 코드대로 작성해주시면 잘 동작할 것입니다 :D

Choi Boo

질문자

https://github.com/qnrjs42/gatsby-blog

입니다. 버전 문제일까요??

주현도

지식공유자

안녕하세요, Choi Boo님!

정확하게 파악하기 위해서 해당 프로젝트를 업로드한 깃허브 링크가 필요할 것 같습니다.

링크 댓글로 달아주시면 확인한 후 답변 알려드리겠습니다 :)

인프런 커뮤니티 질문&답변

쿼리문에 오류가 발생합니다