묻고 답해요

썸네일 이미지가 보이지 않습니다!

미해결

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

PostItem.tsx import React, { FunctionComponent } from 'react' import styled from '@emotion/styled' import { Link } from 'gatsby' type PostItemProps = { title: string date: string categories: string[] summary: string thumbnail: string link: string } const PostItemWrapper = styled(Link)` display: flex; flex-direction: column; border-radius: 10px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); transition: 0.3s box-shadow; cursor: pointer; &:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } ` const ThumbnailImage = styled.img` width: 100%; height: 200px; border-radius: 10px 10px 0 0; object-fit: cover; ` const PostItemContent = styled.div` flex: 1; display: flex; flex-direction: column; padding: 15px; ` const Title = styled.div` display: -webkit-box; overflow: hidden; margin-bottom: 3px; text-overflow: ellipsis; white-space: normal; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 20px; font-weight: 700; ` const Date = styled.div` font-size: 14px; font-weight: 400; opacity: 0.7; ` const Category = styled.div` display: flex; flex-wrap: wrap; margin-top: 10px; margin: 10px -5px; ` const CategoryItem = styled.div` margin: 2.5px 5px; padding: 3px 5px; border-radius: 3px; background: black; font-size: 14px; font-weight: 700; color: white; ` const Summary = styled.div` display: -webkit-box; overflow: hidden; margin-top: auto; text-overflow: ellipsis; white-space: normal; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; opacity: 0.8; ` const PostItem: FunctionComponent<PostItemProps> = function ({ title, date, categories, summary, thumbnail, link, }) { return ( <PostItemWrapper to={link}> <ThumbnailImage src={thumbnail} alt="Post Item Image" /> <PostItemContent> <Title>{title}</Title> <Date>{date}</Date> <Category> {categories.map(category => ( <CategoryItem key={category}>{category}</CategoryItem> ))} </Category> <Summary>{summary}</Summary> </PostItemContent> </PostItemWrapper> ) } export default PostItem PostList.tsx import React, { FunctionComponent } from 'react' import styled from '@emotion/styled' import PostItem from 'components/Main/PostItem' const POST_ITEM_DATA = { title: 'Post Item Title', date: '2020.01.29.', categories: ['Web', 'Frontend', 'Testing'], summary: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident repellat doloremque fugit quis rem temporibus! Maxime molestias, suntrem debitis odit harum impedit. Modi cupiditate harum dignissimos eos in corrupti!', thumbnail: 'https://i.ytimg.com/vi/pmnv2J2fyJg/hqdefault.jpg?sqp=-oaymwEnCNACELwBSFryq4qpAxkIARUAAIhCGAHYAQHiAQoIGBACGAY4AUAB&rs=AOn4CLCIBVaOEdLTo8W392meul19B3RFeQ', link: 'https://www.google.co.kr/', } const PostListWrapper = styled.div` display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; width: 768px; margin: 0 auto; padding: 50px 0 100px; ` const PostList: FunctionComponent = function () { return ( <PostListWrapper> <PostItem {...POST_ITEM_DATA} /> <PostItem {...POST_ITEM_DATA} /> <PostItem {...POST_ITEM_DATA} /> <PostItem {...POST_ITEM_DATA} /> </PostListWrapper> ) } export default PostList index.tsx import React, { FunctionComponent } from 'react' import styled from '@emotion/styled' import GlobalStyle from 'components/Common/GlobalStyle' import Footer from 'components/Common/Footer' import CategoryList from 'components/Main/CategoryList' import Introduction from 'components/Main/Introduction' const CATEGORY_LIST = { All: 5, Web: 3, Mobile: 2, } const Container = styled.div` display: flex; flex-direction: column; height: 100vh; ` const IndexPage: FunctionComponent = function () { return ( <Container> <GlobalStyle /> <Introduction /> <CategoryList selectedCategory="Web" categoryList={CATEGORY_LIST} /> <Footer /> </Container> ) } export default IndexPage 전 단계인 태그까지는 됐는데, 게시글 목록 부분 컴포넌트 구현하기부터 뭔가 잘 안 뜹니다. 게시글 썸네일 바꿔보고, 꺾쇠도 없애봤는데 별 반응이 없네요... 어느 부분을 놓친 건지, 더 확인할 부분이 있는지 알려주시면 감사드리겠습니다.

• 블로그
• gatsby

깃허브 배포시 하얀화면

미해결

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

app-91cf9a3 … .js:2 Uncaught (in promise) Error: We couldn't find the correct component chunk with the name "component---src-pages-index-tsx" at t.loadComponent ( app-91cf9a3….js:2:25195 ) 해당 오류가 나며 하얀화면만 뜹니다. 블로그 글로 url작성해서 들어가면 정상적으로 뜹니다.

• react
• typescript
• 블로그
• gatsby

GaphQL reference 질문

미해결

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

강의에서는 references 필드를 사용해 Rich Text 필드에서 이미지와 링크 데이터를 가져오라고 했지만, 현재 Contentful의 GraphQL 탐색기에서는 content 필드에 raw 만 있고 references 필드가 보이지 않습니다. 혹시 Contentful의 GraphQL API가 업데이트된 것인가요? 그렇다면, 현재 버전에서는 Rich Text 필드에 포함된 이미지나 링크 데이터를 어떻게 가져오는 것이 좋을까요?

• react
• typescript
• 블로그
• gatsby

yarn build 시 오류가납니다..

미해결

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

Building static HTML failed for path "/info/" See our docs page for more info on this error: https://gatsby.dev/debug-html WebpackError: ReferenceError: globalStyle is not defined 이런 오류가 나오는데 어딜 고쳐야할까요.. https://github.com/codemasterli/TechLog/tree/main/blog-front 확인부탁드리겠습니다. 감사합니다.

• 블로그
• gatsby

렌더링 문제

미해결

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

pages/index.tsx 파일이 먼저 렌더링이 되어야되는데 pages/{contentfulPost.slug}.tsx 파일 이 먼저 렌더링 되는 현상이 생겼는데 이거는 무슨경우인가요 ? 갑자기 이렇게 되었습니다. 캐시 제거랑 재부팅까지했지만 해결을 못하고있습니다..

• react
• typescript
• 블로그
• gatsby

깃 액션 활용

해결됨

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

name: Deploy Blog on: push: branches: develop jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 # 원하는 Github Secrets을 불러와 env 파일을 생성해줍니다. - name: Generate env file run: | echo "CONTENTFUL_ACCESS_TOKEN=$CONTENTFUL_ACCESS_TOKEN" >> .env echo "CONTENTFUL_SPACE_ID=$CONTENTFUL_SPACE_ID" >> .env env: CONTENTFUL_ACCESS_TOKEN: ${{ secrets.CONTENTFUL_ACCESS_TOKEN }} CONTENTFUL_SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }} - name: Deploy gatsby uses: enriikke/gatsby-gh-pages-action@v2 with: access-token: ${{ secrets.DEPLOYMENT_ACCESS_TOKEN }} deploy-branch: main gatsby-args: --verbose develop 브런치에서 위 코드를 작성하고 git push origin develop 을했는데 액션에 동작을 안합니다. https://github.com/Choi-jeonghoon/Jeong-hoon.github.io/actions/new

• react
• typescript
• 블로그
• gatsby

code 강조가 안됨니다..

해결됨

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

코드블럭 테스트 language::typescript export const { auth, signIn, signOut, handlers } = NextAuth({ 등등을 존재하는데 아래와같이 코드는 작성했는데 코드 강조가 안되고있습니다. 뭐가문제일까요? import React from 'react' import { ContentfulRichTextGatsbyReference, renderRichText, } from 'gatsby-source-contentful/rich-text' import { getImage } from 'gatsby-plugin-image' import { NodeRenderer, Options } from '@contentful/rich-text-react-renderer' import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types' import { Blockquote, Heading, Image, HorizontalRule, OrderedList, UnorderedList, Link, Code, } from './node' export const HEADERS = [ BLOCKS.HEADING_1, BLOCKS.HEADING_2, BLOCKS.HEADING_3, ] as const const CODE_METADATA_REGEX = /^language::(\w+)/ const options: Options = { renderMark: { [MARKS.CODE]: text => { const isBlock = !!text && CODE_METADATA_REGEX.test(text.toString()) if (!isBlock) return <Code>{text}</Code> else return ( <Code isBlock className={`language-${ CODE_METADATA_REGEX.exec(text.toString())?.[1] }`} > {text.toString().replace(CODE_METADATA_REGEX, '').trimStart()} </Code> ) }, }, renderNode: { ...HEADERS.reduce<{ [block: string]: NodeRenderer }>((nodes, header) => { nodes[header] = (node, children) => ( <Heading type={header}>{children}</Heading> ) return nodes }, {}), [BLOCKS.OL_LIST]: (_node, children) => ( <OrderedList>{children}</OrderedList> ), [BLOCKS.UL_LIST]: (_node, children) => ( <UnorderedList>{children}</UnorderedList> ), [BLOCKS.HR]: () => <HorizontalRule />, [BLOCKS.QUOTE]: (_node, children) => <Blockquote>{children}</Blockquote>, [BLOCKS.EMBEDDED_ASSET]: node => { const { gatsbyImageData, description } = node.data.target const image = getImage(gatsbyImageData) if (image) return <Image image={image} alt={description} /> }, [INLINES.HYPERLINK]: (node, children) => ( <Link href={node.data.uri as string} target="_blank" rel="noopener noreferrer" > {children} </Link> ), }, } export default function useRenderRichText({ raw, references, }: Queries.ContentfulPostContent) { if (!raw) return null return renderRichText( { raw, references: references as unknown as ContentfulRichTextGatsbyReference[], }, options, ) } import React from 'react' import { GatsbyBrowser } from 'gatsby' import Layout from './src/components/common/Layout' import 'prismjs/themes/prism-tomorrow.min.css' export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({ element, props, }) => { return <Layout {...props}>{element}</Layout> } import React from 'react' import { GatsbyBrowser } from 'gatsby' import Layout from './src/components/common/Layout' import 'prismjs/themes/prism-tomorrow.min.css' export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({ element, props, }) => { return <Layout {...props}>{element}</Layout> } import React, { useEffect } from 'react' import styled from 'styled-components' import { TPostBodyProps } from '../../types/PostBody' import Prism from 'prismjs' import 'prismjs/components/prism-typescript' import useRenderRichText from '../../hooks/useRenderRichText' const Wrapper = styled.div` position: relative; display: grid; grid-template-columns: 1fr 220px; grid-gap: 30px; justify-content: space-between; align-items: flex-start; padding-top: 100px; ` const Content = styled.div` overflow: auto; display: flex; flex-direction: column; gap: 100px; font-size: 16px; line-height: 2; word-break: break-word; ` export default function PostBody({ content }: TPostBodyProps) { const richText = useRenderRichText(content) useEffect(() => { Prism.highlightAll() }, []) return ( <Wrapper> <Content> <div id="content">{richText}</div> {/* 댓글 컴포넌트가 들어갈 자리 */} </Content> {/* 플로팅 목차 컴포넌트가 들어갈 자리 */} </Wrapper> ) }

• react
• typescript
• 블로그
• gatsby

Github Actions 배포 이후 ReadMe만 보이는 에러

해결됨

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

깃허브 액션으로 배포하는 강의 자료부분 하는 중인데 build가 완료돼도 배포된 사이트에선 리드미 파일만 보이는데 무슨 문제인지 잘 모르겠습니다ㅠ https://github.com/jihun-24k/jihun-24k.github.io

• react
• typescript
• 블로그
• gatsby

Property 'references' does not exist on type 'ContentfulPostContent' 에러

해결됨

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

안녕하세요 게시글 렌더링 컴포넌트 구현하기 강의에서 {contentfulPost.slug}.tsx 파일 내에 아래와 같이 graphql을 호출하고 useRenderRichText 훅을 구현시 아래와 같은 에러가 발생합니다. export const query = graphql` query PostPage($slug: String!) { contentfulPost(slug: { eq: $slug }) { title thumbnail { gatsbyImageData(width: 1000) } category date content { raw references { ... on ContentfulAsset { contentful_id title description gatsbyImageData(width: 774) __typename } } } } } `

• react
• typescript
• 블로그
• gatsby

정규 표현식 질문

해결됨

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

안녕하세요 저번 개츠비 강의 너무 맘에 들어서 후속 강의도 거의 나오자마자 지른 수강생입니다! 열심히 따라하면서 강의 진행하던 와중에 "게시글 렌더링 커스터마이징하기(2)" 강의 안 코드 블럭 메타데이터 파싱 기능 개발하기 파트에서 CODE_METADATA_REGEX 부분 정규표현식에 대해서 질문드립니다 본문에 const CODE_METADATA_REGEX = /^language::(\\w+)/ 이런 식으로 정규표현식이 작성되어서 따라 진행했는데 자꾸 정규표현식을 인식 못하는거 같아 /^language::(\w+)/ 위와 같이 문법을 고쳐 사용했는데 오타인가 여쭤봅니다

• react
• typescript
• 블로그
• gatsby

이미지가 출력되지않아요ㅠㅠ

미해결

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

선생님이 알려주신대로 블로그를 만들어서 유용하게 운영중입니다. 지금까지 별 다른 문제가 없었는데 1달전부터 갑자기 마크다운 이미지가 안보이더라구요ㅠㅠ 이상한건 5월31일 이후 작성한 마크다운 게시물들만 이미지가 출력되지 않는다는겁니다.. 제가 content 폴더에 마크다운, 이미지 파일을 싹다 몰아넣고 관리중인데 이게 문제인걸까요?? 빌드하고 public 폴더 확인해보려니 양이 너무 방대해서 하나하나 확인할 엄두가안나네요... 혹시 해결 방법없을까요ㅠㅠ https://github.com/BoubleJ/BoubleJ.github.io 제 깃허브 코드입니다. 감사합니다!

• 블로그
• gatsby
• image

프로젝트 명 무엇으로 작성하였나요?

미해결

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

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

• 블로그
• gatsby

오류이 나서.... 어떻게 해결 해야 할지도 모르겟습ㄴ다

미해결

https://github.com/leechangseop71/blog 제 깃허브 주소입니다 오류이 났는지 어떻게 해결하면 될까요?

• bolg
• gatsby

수업내용대로 했지만...오류나서 어디 문제일까요?

미해결

https://github.com/leechangseop71/blog 제 깃허브 주소입니다 보시고 무슨 문제인지 오류나는지 알고 싶습니다

• 블로그
• gatsby

섹션3 MD파일을 사용하기 위한 라이브러리 세팅하기에서

미해결

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

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 다음과 같은 에러가 뜹니다... 구글링해도 모르겠습니다 ㅠㅠ

• 블로그
• gatsby

ModuleNotFoundError: Module not found: Error: Can't resolve 'react-helmet' 에러

해결됨

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

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

• 블로그
• gatsby

gatsby-node.js의 기존코드

미해결

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

// 기존에 설치시 작성되어있던 코드 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

gatsby command 찾기 실패

미해결

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

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

• 블로그
• gatsby

Cannot query field "fields" on type "MarkdownRemark". error 발

미해결

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

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

• 블로그
• gatsby

13강까지 들었는데, 프로필 이미지와 썸네일 이미지가 잘 뜨질 않습니다.

미해결

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

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

• 블로그
• gatsby