묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
프로젝트 명 무엇으로 작성하였나요?
npx gatsby-cli new "[프로젝트]" 프로젝트 무엇으로 작성하셨나요?
-
미해결
오류이 나서.... 어떻게 해결 해야 할지도 모르겟습ㄴ다
https://github.com/leechangseop71/blog 제 깃허브 주소입니다 오류이 났는지 어떻게 해결하면 될까요?
-
미해결
수업내용대로 했지만...오류나서 어디 문제일까요?
https://github.com/leechangseop71/blog제 깃허브 주소입니다 보시고 무슨 문제인지 오류나는지 알고 싶습니다
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
섹션3 MD파일을 사용하기 위한 라이브러리 세팅하기에서
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 기반 Gatsby로 기술 블로그 개발하기
ModuleNotFoundError: Module not found: Error: Can't resolve 'react-helmet' 에러
강의 잘 듣고 있습니다 배포 막바지인데요 다름이 아니라 react-helmet 모듈 에러가 계속 나는데 혹시 같은 에러 겪으신 분 있나요? https://github.com/gatsbyjs/gatsby/issues/3432 에서 gatsby-plugin-react-helmet도 추가해보래서 했는데 여전히 안되네요. 제 레포지토리 주소는 https://github.com/HEON0121/HEON0121.github.io/tree/master 입니다
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
gatsby-node.js의 기존코드
// 기존에 설치시 작성되어있던 코드 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'), }, }, }) }이 코드로 완전 대체하면 될까요?
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
gatsby command 찾기 실패
다름이 아니고, 모의 실행 돌리려 `gatsby develop`을 실행하면 command not found: gatsby가 떠서, 패키지 닷 제이슨에 "start: gatsby develop"을 보고 npm run start를 통해 구동시켰는데요, 별도로 개츠비 관련 무언가를 다운받아야 하나요??+)추가로 gatsby-plugin-manifest를 리무브하고 다시 구동시켜보니, 이 모듈은 인스톨했느냐는 워닝과 함꼐 돌아가질 않습니다...! 그래서 그냥 안쓰더라도 다시 깔아야하는 일이 있었습니다. 아마도 환경이 강사님이 제작하셨을 당시와 많이 달라졌나보네요ㅠㅠ
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
Cannot query field "fields" on type "MarkdownRemark". error 발
slug설정 하는 부분 강의를 보고 있는 Cannot query field "fields" on type "MarkdownRemark". error가 뜨면서 개발 서버에서 에러가 발생합니다. 며칠 서칭하고 강의를 다시 찾아보며 답을 찾으려 했는데 답이 안 나오네요. gatsby라이브러리 버전 문제일까 해서 업데이트도 해봤는디 안되구요..제 깃허브 주소는 아래와 같습니다. 도와주세요https://github.com/gull2365/blog
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
13강까지 들었는데, 프로필 이미지와 썸네일 이미지가 잘 뜨질 않습니다.
안녕하세요,강의 잘 듣고 있습니다. 13강까지 잘 따라왔는데, 이미지가 잘 뜨지 않는 현상이 있는데 어떤 부분 때문인지 잘 모르겠습니다.저의 레포 링크는 여기입니다. https://github.com/changerlemond/claire-tech-blog 도움 주시면 감사하겠습니다!
-
해결됨React 기반 Gatsby로 기술 블로그 개발하기
[17강 25강] Cannot query field "html" on type "MarkdownRemark" 오류
안녕하세요 본 강의를 통해 블로그를 만들고 있습니다.17강을 진행하는 중에 이 메세지가 발생했고, 이로 인해 게시글을 조회할 수 없었습니다. 공식문서를 찾아 봐도 뭐가 문제인지 몰랐습니다.일단 쿼리에서 html부분을 주석 처리하고 24강까지 진행했습니다. 주석처리하니 "게시글 상단부분 구현"같은 것은 잘 됩니다. 왜 html 쿼리가 진행되지 않는지 도저히 모르겠습니다.도움이 필요합니다.제 깃허브 주소는 아래와 같습니다.https://github.com/Test-Of-LEE/Test-Of-LEE-BlogProject/tree/main/BlogProject 감사합니다.
-
해결됨React 기반 Gatsby로 기술 블로그 개발하기
쿼리오류 Field "thumbnail" must not have a selection...
메인 페이지에서 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
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
타입스크립트를 설정할 때 jsxPragma 옵션을 뺀 이유는 무엇인가요?
gatsby-plugin-typescript 공식 문서를 보면 jsxPragma 옵션이 들어가던데 여기선 뺀 이유가 궁금해요!추가로 혹시 이 jsxPragma가 어떤 역할을 하는지 알 수 있을까요? 검색해도 잘 이해가 안되서요!
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
마지막 배포 부분 질문드립니다!
배포하기 전에 레포지토리 생성했는데 개발한 내용 레포지토리에 remote하거나 파일을 넣어야 하는 거 아닌가요?
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
IntersectionObserver deploy( gatsby build) 시 오류(자답)
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
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
19강 인피니티 스크롤 IntersectionObserver 코드 위치 수정이 필요합니다.
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])
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
배포 질문이요!
안녕하세요! 잘 따라고있는 사람입니다. 다름이아니라, 로컬에서는 작업이 문제없이 되는데, 배포를 하니, gatsby 기본 튜토리얼만 나옵니다 ㅠㅠ url index 연결 다 해준 것 같은데 문제가 있네요 ㅠㅠ 깃 르포 주소입니다. : https://github.com/J3llyBe4n/j3llyBe4n.github.io
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
안녕하세요 도커 상에서 기술블로그 작성을 도전하고 있는데 문제가 ㅠㅠ...
현재 1파트 개발 환경 구축을 거의 마무리 짓는 과정에 있었습니다. typescript 설치 및 다 마친 뒤 `yarn develop`으로 로컬 상에서 최종 점검을 하는데, 위와 같은 에러가 발생했습니다. 뭐가 문제인지는 몰라 확인차 path 인자를 사용하는 수정한 파일들을 확인하였는데, 오탈자나 문제는 없어 보였습니다. 그래서 조언을 듣고 싶어서 일단 이렇게 오류 상황을 찍어서 올려봅니다 ㅠㅠ.. 현재 개발 환경은 m1 mac OS 12 docker ubuntu:latest gatsby-cli 4.4.0 node 최신 버전 에서 진행중입니다.
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
[해결완료!!] Error: Something went wrong installing the "sharp" module
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
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
Error: Cannot find module 'graphql/polyfills/objectValues'
config 파일을 수정하고 나서 develop 을 실행하면 에러가 발생합니다. Error: Cannot find module 'graphql/polyfills/objectValues' google 에서는 답을 찾을 수 없는데 node module 삭제 후 graphql을 다시 깔아 보기도 했는데 해결이 안되네요... 도움부탁드려요~!~