inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

[17강 25강] Cannot query field "html" on type "MarkdownRemark" 오류

해결됨

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

안녕하세요 본 강의를 통해 블로그를 만들고 있습니다. 17강을 진행하는 중에 이 메세지가 발생했고, 이로 인해 게시글을 조회할 수 없었습니다. 공식문서를 찾아 봐도 뭐가 문제인지 몰랐습니다. 일단 쿼리에서 html부분을 주석 처리하고 24강까지 진행했습니다. 주석처리하니 "게시글 상단부분 구현"같은 것은 잘 됩니다. 왜 html 쿼리가 진행되지 않는지 도저히 모르겠습니다. 도움이 필요합니다. 제 깃허브 주소는 아래와 같습니다. https://github.com/Test-Of-LEE/Test-Of-LEE-BlogProject/tree/main/BlogProject 감사합니다.

  • 블로그
  • gatsby
  • 쿼리
  • html
이재용 댓글 1 좋아요 1 조회수 654

쿼리오류 Field "thumbnail" must not have a selection...

해결됨

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

메인 페이지에서 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
  • Gatsby
  • blog
김수연 댓글 1 좋아요 1 조회수 881

타입스크립트를 설정할 때 jsxPragma 옵션을 뺀 이유는 무엇인가요?

미해결

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

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

  • 블로그
  • blog
  • gatsby
  • typescript
  • Gatsby
  • jsxpragma
메타몽닮음 댓글 1 좋아요 1 조회수 613

마지막 배포 부분 질문드립니다!

미해결

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

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

  • 블로그
  • gatsby
  • blog
  • Gatsby
사랑스러운 푸른돌고래 댓글 1 좋아요 1 조회수 635

IntersectionObserver deploy( gatsby build) 시 오류(자답)

미해결

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

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
  • blog
hanumoka 댓글 1 좋아요 1 조회수 411

19강 인피니티 스크롤 IntersectionObserver 코드 위치 수정이 필요합니다.

미해결

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

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
  • blog
kjeonghoon065 댓글 1 좋아요 1 조회수 420

배포 질문이요!

미해결

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

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

  • blog
  • Gatsby
댓글 1 좋아요 1 조회수 542

develop 은 되는데 build 환경에서의 오류

미해결

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

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 정상 동작하는것도 확인했습니다!

  • blog
  • Gatsby
댓글 1 좋아요 1 조회수 324

안녕하세요 도커 상에서 기술블로그 작성을 도전하고 있는데 문제가 ㅠㅠ...

미해결

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

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

  • gatsby
  • docker
  • blog
  • typescript
  • Gatsby
Hansol Ryu 댓글 1 좋아요 1 조회수 264

[해결완료!!] Error: Something went wrong installing the "sharp" module

미해결

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

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

  • gatsby
  • blog
  • Gatsby
scvd03 댓글 2 좋아요 2 조회수 4746

ProfileImage컴포넌트 질문드립니다.

미해결

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

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

  • Gatsby
  • blog
const.takeo 댓글 3 좋아요 0 조회수 344

Error: Cannot find module 'graphql/polyfills/objectValues'

미해결

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

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

  • graphql
  • gatsby
  • blog
  • Gatsby
Rosa Kang 댓글 1 좋아요 0 조회수 280

인기 태그

인프런 TOP Writers

주간 인기글