메인 페이지에서 Props로 받아 포스트 데이터 출력하기 강의에서 여기까지 한 후, 2개의 포스트 아이템이 화면에 잘 출력되는지 확인해주세요.>>>> 이 부분까지 하고 실행을 하려니 아래와 같은 쿼리 오류가 생겼습니다.There was an error in your GraphQL query: Field "thumbnail" must not have a selection since type "String" has no subfields. This can happen if you e.g. accidentally added { } to the field "thumbnail". If you didn't expect "thumbnail" to be of type "String" make sure that your input source and/or plugin is correct. However, if you expect "thumbnail" to exist, the field might be accessible in another subfield. Please try your query in GraphiQL. It is recommended to explicitly type your GraphQL schema if you want to use optional fields.publicURL 을 못가져오는것 같은데.. 어떻게 해결해야할까요 ㅠ.ㅠ레포지토리 남깁니다! https://github.com/syankkim/syankkim.github.io

gatsby-plugin-typescript 공식 문서를 보면 jsxPragma 옵션이 들어가던데 여기선 뺀 이유가 궁금해요!추가로 혹시 이 jsxPragma가 어떤 역할을 하는지 알 수 있을까요? 검색해도 잘 이해가 안되서요!

배포하기 전에 레포지토리 생성했는데 개발한 내용 레포지토리에 remote하거나 파일을 넣어야 하는 거 아닌가요?

useInfiniteScroll.tsx 파일IntersectionObserver 구문에서 오류 발생아래 처럼 코드 수정import { MutableRefObject, useState, useEffect, useRef, useMemo } from 'react' import { PostListItemType } from 'types/PostItem.types' export type useInfiniteScrollType = { containerRef: MutableRefObject<HTMLDivElement | null> postList: PostListItemType[] } const NUMBER_OF_ITEMS_PER_PAGE = 10 const useInfiniteScroll = function ( selectedCategory: string, posts: PostListItemType[], ): useInfiniteScrollType { const containerRef: MutableRefObject<HTMLDivElement | null> = useRef<HTMLDivElement>( null, ) const [count, setCount] = useState<number>(1) const postListByCategory = useMemo<PostListItemType[]>( () => posts.filter(({ node: { frontmatter: { categories } } }: PostListItemType) => selectedCategory !== 'All' ? categories.includes(selectedCategory) : true, ), [selectedCategory], ) const observer = useRef<IntersectionObserver | null>(null); useEffect(() => { observer.current = new IntersectionObserver( (entries, observer) => { if (!entries[0].isIntersecting) return; setCount(value => value + 1); observer.disconnect(); }, ) }, []); useEffect(() => setCount(1), [selectedCategory]) useEffect(() => { if ( NUMBER_OF_ITEMS_PER_PAGE * count >= postListByCategory.length || containerRef.current === null || containerRef.current.children.length === 0 ){ return; } if(observer && observer.current){ observer.current.observe( containerRef.current.children[containerRef.current.children.length - 1], ) } }, [count, selectedCategory, observer]) return { containerRef, postList: postListByCategory.slice(0, count * NUMBER_OF_ITEMS_PER_PAGE), } } export default useInfiniteScroll 

gatsby develop 시에는 문제가 안되지만, gatsby build 시에 문제가 되는 부분입니다.참고한 사이트는 아래와 같습니다.https://stackoverflow.com/questions/59424347/gatsby-intersectionobserver-is-not-defined  마지막 코드 observer 부분은 하기 내용과 같은데 const observer: IntersectionObserver = new IntersectionObserver( (entries, observer) => { if (!entries[0].isIntersecting) return; setCount(value => value + 1); observer.disconnect(); }, ) useEffect(() => setCount(1), [selectedCategory]) useEffect(() => { if ( NUMBER_OF_ITEMS_PER_PAGE * count >= postListByCategory.length || containerRef.current === null || containerRef.current.children.length === 0 ) return observer.observe( containerRef.current.children[containerRef.current.children.length - 1], ) }, [count, selectedCategory])IntersectionObserver 구문을 useEffect 안으로 넣어야 할 것 같습니다.  useEffect(() => setCount(1), [selectedCategory]) useEffect(() => { const observer: IntersectionObserver = new IntersectionObserver( (entries, observer) => { if (!entries[0].isIntersecting) return; setCount(value => value + 1); observer.disconnect(); } ) if ( NUMBER_OF_ITEMS_PER_PAGE * count >= postListByCategory.length || containerRef.current === null || containerRef.current.children.length === 0 ) return observer.observe( containerRef.current.children[containerRef.current.children.length - 1] ) }, [count, selectedCategory])

안녕하세요! 잘 따라고있는 사람입니다.    다름이아니라, 로컬에서는 작업이 문제없이 되는데, 배포를 하니, gatsby 기본 튜토리얼만 나옵니다 ㅠㅠ url index 연결 다 해준 것 같은데 문제가 있네요 ㅠㅠ 깃 르포 주소입니다. : https://github.com/J3llyBe4n/j3llyBe4n.github.io

Building static HTML failed for path "/main/postItem/"   See our docs page for more info on this error: https://gatsby.dev/debug-html       19 |   categories,   20 |   summary, > 21 |   thumbnail: { publicURL },      |                ^   22 |   link,   23 | }) => {   24 |   return (       WebpackError: TypeError: Cannot read properties of undefined (reading 'publicURL')      - postItem.tsx:21      gatsby-starter-default/src/pages/main/postItem.tsx:21:16      - inheritsLoose.js:5      [gatsby-starter-default]/[@babel]/runtime/helpers/inheritsLoose.js:5:1      - emotion-is-prop-valid.esm.js:15      [gatsby-starter-default]/[@emotion]/is-prop-valid/dist/emotion-is-prop-valid.esm.js:15:1      - inheritsLoose.js:7      [gatsby-starter-default]/[@babel]/runtime/helpers/inheritsLoose.js:7:1      - static-entry.js:294      gatsby-starter-default/.cache/static-entry.js:294:22      - history.js:49      [gatsby-starter-default]/[@gatsbyjs]/reach-router/es/lib/history.js:49:6        publicUrl 이 없으면 build 환경에서 잘 동작합니다.  저 구문만 있으면 build 환경에서 돌아가지 않습니다..!   https://github.com/urther/example 레포 주소 첨부합니다 ㅠㅠ  8000/graphql 에서 publicUrl 정상 동작하는것도 확인했습니다! 

현재 1파트 개발 환경 구축을 거의 마무리 짓는 과정에 있었습니다.  typescript 설치 및 다 마친 뒤 `yarn develop`으로 로컬 상에서 최종 점검을 하는데, 위와 같은 에러가 발생했습니다.  뭐가 문제인지는 몰라 확인차 path 인자를 사용하는 수정한 파일들을 확인하였는데, 오탈자나 문제는 없어 보였습니다.  그래서 조언을 듣고 싶어서 일단 이렇게 오류 상황을 찍어서 올려봅니다 ㅠㅠ.. 현재 개발 환경은 m1 mac OS 12 docker ubuntu:latest gatsby-cli 4.4.0 node 최신 버전 에서 진행중입니다.  

Error Something went wrong installing the "sharp" module Cannot find module '../build/Release/sharp-darwin-arm64v8.node'   Possible solutions: - Install with the --verbose flag and look for errors: "npm install --ignore-scripts=false --verbose sharp" - Install for the current runtime: "npm install --platform=darwin --arch=arm64 sharp" - Consult the installation documentation: https://sharp.pixelplumbing.com/install   not finished open and validate gatsby-configs, load plugins - 0.127s   gatsby-config.js  module.exports = { siteMetadata: { title: `Gatsby Default Starter`, description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`, author: `@gatsbyjs`, }, plugins: [ { resolve: 'gatsby-plugin-typescript', options: { isTSX: true, allExtensions: true, }, }, `gatsby-plugin-react-helmet`, // { // resolve: `gatsby-source-filesystem`, // options: { // name: `contents`, // path: `${__dirname}/contents`, // }, // }, `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, // this (optional) plugin enables Progressive Web App + Offline functionality // To learn more, visit: <https://gatsby.dev/offline> // `gatsby-plugin-offline`, `gatsby-plugin-emotion`, ], }   try... 노드버전 16.0.0으로 업그레이드 후,  yarn add --platform=darwin --arch=arm64 sharp 해보았으나, 에러가 여전히 발생합니다.  해결 방법이 있을까요?? 그리고 좋은 강의 너무도 감사합니다!   해결완료하였습니다. 다른 분들에게 참고가 될 수 있을 거 같아서 남겨놓아요! rm -r node_modules/sharp yarn install --check-files 참고자료: https://github.com/gatsbyjs/gatsby/issues/20957   

애로우펑션을 이용할시 안되는데 특별한 이유가 있나요? const ProfileImage = (): FunctionComponent => { return <ProfileImageWrapper src={PROFILE_IMAGES} alt="Profile Image" />;}

config 파일을 수정하고 나서 develop 을 실행하면 에러가 발생합니다. Error: Cannot find module 'graphql/polyfills/objectValues' google 에서는 답을 찾을 수 없는데 node module 삭제 후 graphql을 다시 깔아 보기도 했는데 해결이 안되네요...   도움부탁드려요~!~