카드 내용 부분을 썸네일로 수정하기

[hyojeongchoi]

• [~11/26] 팀블로그 기초 공사 #1

• 카드 내용 부분을 썸네일로 수정하기 부분에서
  포스트 목록 화면에서 포스트 썸네일 이미지를 띄워주기 위해선 post-list.js, md 파일만 수정하면 된다고 생각해서

1. post-list.js 코드에서 GatsbyImage, getImage 코드 추가함 (frontmatter로 넘어오는 이미지 경로 받기)

2. 썸네일 이미지 컴포넌트 작성 완료

3. MD 파일에 frontmatter image 부분 추가
위 순서대로 작업 완료했는데 실행시 썸네일 이미지가 안 띄워짐

graphql 로 확인했을 시에 publicURL로 이미지 경로가 정상적으로 넘어오는 것 확인 가능

썸네일 띄워주려면 Blog.js에서도 수정을 해줘야 하나..?

여기에 image 부분을 추가해서 수정해줘야 하는지 알아보고 있는데 ChildImageSharp를 사용해야 한다는 레퍼가 있어서
(참고 : https://stackoverflow.com/questions/70253067/gatsby-image-not-found)

blog.js를 수정하면 포스트를 작성할 때 frontmatter에 image가 childImageSharp 형태로 넘어가게 해야하는건지 조사 중인데 어떤 방법을 쓰는게 나을까요?

[Queue-ri]

이미지 로딩

일단 gatsby 공식문서를 읽어보시면 2가지 방식의 이미지 분류가 있는걸 알 수 있습니다.
하나는 static이고 다른 하나는 dynamic인데요, 저희의 case는 dynamic에 해당한다고 볼 수 있습니다.
따라서 GatsbyImage를 사용하는 것은 맞습니다.

• 참고1: https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/#dynamic-images

문서에 따르면 CMS는 지원군에 해당사항이 없으니 공식문서에서 제안하는 gatsby-transformer-sharp를 사용해야 합니다.
그러므로 graphql query에 image가 childImageSharp 형태로 작성되어야 하는것이 맞습니다.

그럼 어디에 있는 쿼리를 수정해야 하느냐? js 파일들을 유심히 보시면 감이 오는데요
blog.js인것은 맞지만 이건 네비게이션에서 post를 클릭했을때의 페이지입니다. 이는 메인 홈 화면과는 다른 페이지죠. 메인 홈은 index-template.js로 렌더링합니다.

결론적으로, post.js와 index-template.js 모두 쿼리 수정을 해주어야 합니다.
다만 질문에 남겨주신 스택오버플로 레퍼대로 작성하시면 안되고 하단과 같이 최신 gatsby 공식문서를 따라야 합니다.
(여러가지 옵션이 있는데 placeholder 옵션은 넣어주셨음 좋겠네요)
스택오버플로 방법은 deprecated된 gatsby-image 시절의 방식입니다.

frontmatter {
  ...
  image {
    childImageSharp {
      gatsbyImageData(placeholder: BLURRED)
    }
  }
  ...
}

이미지 스타일링

질문에선 PostListImage로 한 뎁스 더 감싸고 있는데, GatsbyImage에 직접적으로 style 적용이 가능하므로 추가 뎁스 없이 JSX에선 GatsbyImage 태그만 사용하시는 것이 좋을 것 같습니다.

style 적용법은 이 문서를 참고하시면 됩니다.

• 참고2: https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image#background-images

디자인은 이런식으로 나오면 좋을 것 같아요. 비율은 16:9로 맞췄습니다.

[hyojeongchoi]

회의에서 말하려고 기다렸는데 미리 적어두면 더 효율적일거 같아 적어둡니다!
적어주신 내용 참고해서
[post-list.js]

[blog.js]

[index-templete.js]

index 화면

Blog 화면

처럼 구현 완료해두었습니다. 어떤 이슈에 푸시해야할 지 몰라 일단은 Discussion에 올려놨습니다.
다만 위에 구현해준 예시처럼 이미지가 감싸고 있는 컴포넌트 밖으로 꽉차게 만드려고 하니

감싸고있는 컴포넌트에 이미 꽉차게 들어가있는 것으로 보입니다.

이 영역보다 이미지를 더 키우려면 이미지를 감싸는 영역을 새로 생성해야 할까 싶은데 이 방법으로 구현하는게 맞을까요?

아래처럼 진행했을 때에

현재 구현된 것과 같은 화면으로 진행이 되어 여쭤봅니다

[Queue-ri]

일단 blog.js의 graphql query에 width, height, formats는 제외해주시는 것이 좋을 것 같습니다.
없어도 잘 나오기도 하고, 괜히 더 들어가면 나중에 어떤 사이드 이펙트가 나올지 몰라서요.

width, height는 절대로 고정값을 주지 마세요.

이미지를 감싸는 영역을 새로 생성해야 할까 싶은데 이 방법으로 구현하는게 맞을까요?

새로 생성하지 마시고 이미지가 안으로 들어간 padding값 만큼 margin을 음수로 줘서 맞춰주시면 됩니다.