묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결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로 기술 블로그 개발하기
ProfileImage컴포넌트 질문드립니다.
애로우펑션을 이용할시 안되는데 특별한 이유가 있나요? const ProfileImage = (): FunctionComponent => { return <ProfileImageWrapper src={PROFILE_IMAGES} alt="Profile Image" />;}
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
Error: Cannot find module 'graphql/polyfills/objectValues'
config 파일을 수정하고 나서 develop 을 실행하면 에러가 발생합니다. Error: Cannot find module 'graphql/polyfills/objectValues' google 에서는 답을 찾을 수 없는데 node module 삭제 후 graphql을 다시 깔아 보기도 했는데 해결이 안되네요... 도움부탁드려요~!~