React 기반 Gatsby로 기술 블로그 개발하기대시보드

npx gatsby-cli new "[프로젝트]" 프로젝트 무엇으로 작성하셨나요?

gatsby-config.js 파일을 수정하면 에러가 뜹니다.. C:\blog\my-blog>gatsby develop success compile gatsby files - 1.894s success load gatsby config - 0.032s ERROR UNKNOWN require() of ES Module C:\blog\my-blog\node_modules\unist-util-find\index.js from C:\blog\my-blog\node_modules\gatsby-remark-external-links\index.js not supported. Instead change the require of C:\blog\my-blog\node_modules\unist-util-find\index.js in C:\blog\my-blog\node_modules\gatsby-remark-external-links\index.js to a dynamic import() which is available in all CommonJS modules. (plugins) Error: [ERR_REQUIRE_ESM]: require() of ES Module C:\blog\my-blog\node_modules\unist-util-find\index.js from C:\blog\my -blog\node_modules\gatsby-remark-external-links\index.js not supported. Instead change the require of C:\blog\my-blog\node_modules\unist-util-find\index.js in C:\blog\my-blog\node_modules\ga tsby-remark-external-links\index.js to a dynamic import() which is available in all CommonJS modules. - index.js:2 Object.<anonymous> [my-blog]/[gatsby-remark-external-links]/index.js:2:14 not finished load plugins - 0.538s다음과 같은 에러가 뜹니다... 구글링해도 모르겠습니다 ㅠㅠ

강의 잘 듣고 있습니다 배포 막바지인데요 다름이 아니라 react-helmet 모듈 에러가 계속 나는데 혹시 같은 에러 겪으신 분 있나요? https://github.com/gatsbyjs/gatsby/issues/3432 에서 gatsby-plugin-react-helmet도 추가해보래서 했는데 여전히 안되네요. 제 레포지토리 주소는 https://github.com/HEON0121/HEON0121.github.io/tree/master 입니다

// 기존에 설치시 작성되어있던 코드 exports.createPages = async ({ actions }) => { const { createPage } = actions createPage({ path: '/using-dsg', component: require.resolve('./src/templates/using-dsg.js'), context: {}, defer: true, }) }원래 gatsby-node.js에 있던 코드입니다.위의 코드를 const path = require('path') // Setup Import Alias exports.onCreateWebpackConfig = ({ getConfig, actions }) => { const output = getConfig().output || {} actions.setWebpackConfig({ output, resolve: { alias: { components: path.resolve(__dirname, 'src/components'), utils: path.resolve(__dirname, 'src/utils'), hooks: path.resolve(__dirname, 'src/hooks'), }, }, }) }이 코드로 완전 대체하면 될까요?

다름이 아니고, 모의 실행 돌리려 `gatsby develop`을 실행하면 command not found: gatsby가 떠서, 패키지 닷 제이슨에 "start: gatsby develop"을 보고 npm run start를 통해 구동시켰는데요, 별도로 개츠비 관련 무언가를 다운받아야 하나요??+)추가로 gatsby-plugin-manifest를 리무브하고 다시 구동시켜보니, 이 모듈은 인스톨했느냐는 워닝과 함꼐 돌아가질 않습니다...! 그래서 그냥 안쓰더라도 다시 깔아야하는 일이 있었습니다. 아마도 환경이 강사님이 제작하셨을 당시와 많이 달라졌나보네요ㅠㅠ

slug설정 하는 부분 강의를 보고 있는 Cannot query field "fields" on type "MarkdownRemark". error가 뜨면서 개발 서버에서 에러가 발생합니다. 며칠 서칭하고 강의를 다시 찾아보며 답을 찾으려 했는데 답이 안 나오네요. gatsby라이브러리 버전 문제일까 해서 업데이트도 해봤는디 안되구요..제 깃허브 주소는 아래와 같습니다. 도와주세요https://github.com/gull2365/blog

 안녕하세요,강의 잘 듣고 있습니다. 13강까지 잘 따라왔는데, 이미지가 잘 뜨지 않는 현상이 있는데 어떤 부분 때문인지 잘 모르겠습니다.저의 레포 링크는 여기입니다. https://github.com/changerlemond/claire-tech-blog 도움 주시면 감사하겠습니다!

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

메인 페이지에서 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 

PostHead Head쪽에 오류가 발생하여 아래처럼 코드를 수정했습니다.PostHead.tsx 파일의 아래코드를type PostHeadProps = PostHeadInfoProps & { thumbnail: IGatsbyImageData } 다음과 같이 변경해야 정상동작 했습니다.type PostHeadProps = PostHeadInfoProps & { thumbnail: { childImageSharp: { gatsbyImageData: IGatsbyImageData } } } Index.tsx에서 PostList 썸네일 이미지를 가져오는 코드에서 thumbnail 가져오는 방식과 동일하게 PostHead.tsx에서 가져오니 저의 경우 정상동작 했습니다.( 캐시 동작을 하는듯 하므로 npm run clean -> gatsby develop ) 

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])

강사님 정말 상세하게 써놓은 강의로 블로그 열심히 만들어보며 잘 배우고 있습니다.다름 아니라 ...위와 같은 썸네일 이미지는 혹시 직접 제작하시는 건지만든다면 어떤 툴을 사용해 만드시는지 궁금합니다.그리고 CSS나 스크립트 코드도 깔끔하게 짜시는 것 같은데이런 것은 어떤 것을 공부하고, 학습하시는지 알고 싶습니다.

안녕하세요, 현도님덕분에 좋은 강의를 보고 블로그를 배포까지 완료하게 되었습니다. 다만 배포가 다 완료된 시점이후로게시글을 작성하여서 업로드 하려면 develop branch에서 md파일 작성후에 계속 배포를 한번 씩 진행을 해주는 것이 맞는건가요..?  현재 상태로는 배포자동화가 안되어있으니 배포를 매번 해주는것이 맞다고 판단되는데 branch의 위치가 꼭 develop 이어야하나요?  

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

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.  ERROR #11903  COMPILATION There was an unhandled error during compilation for C:/Users/user/Desktop/Git 개발 블로그/myGitBlog. Please run the command with the --verbose flag again.Error opening directory                                          Error: Error opening directory not finished compile gatsby files - 0.568s     현재 이러한 오류가 발생하면서 npm start도 안되고 npm 과 node의 버전 문제인가 해서 새로 해주었고   갑자기 위에 사진처럼 오류가 발생하고,, gatsby-cli 설치도 안되는 상황입니다 ㅠㅠ

배포는 완료되었고 화면도 잘 나옵니다. 그런데 개발 따라하면서 https://github.com/imb96/Minlog 여기를 원격 저장소로 사용하다가 배포까지 했는데 https://github.com/imb96/imb96.github.io 여기를 원격저장소로 하고 배포해야 됐던 건가요? 레퍼지토리 한번 봐주실수 있을까요? 그리고 앞으로 블로그 글 수정할 때는 develop 모드로 수정하고 build후 deploy 하면 되는 건가요?