무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
특정 게시글을 클릭하여 상세 페이지로 넘어가는 과정과 SPA에 관한 질문
안녕하세요. 강의 잘 보고 있는데요. 저는 본 강의를 '참고'하여 스스로 블로그를 만들고 있는데요. 다름이 아니라, 강의 코드를 보면 게시글 리스트중, 특정 게시글 아이템을 클릭하면 to={slug}하게 되어 있는데요. 그래서 markup의 상세 페이지로 넘어가는데, 이때 렌더링되는게 templates 폴더에 존재하는 post template이고요. 근데 이때 index 화면과 똑같은부분은 import Template from 'components/Common/Template' 에서 import해와서 Template으로 래핑해 놓았는데(index.tsx 컴포넌트도 마찬가지로 Template로 래핑되어 있구요) 여기서 의문은 특정 게시글 아이템을 클릭해서 상세 페이지로 넘어갈 때 SPA처럼 동작하는게 맞을까요? 왜냐하면 보통 리액트로 따지면 최상위 컴포넌트를 Router로 래핑해서 사용하기 때문에 SPA로 동작이 가능해지지만, gatsby에서 사용하는 리액트는 router로 별도로 래핑은 안하는 것 같아서요. index.tsx를 Template로 래핑하고, Link To를 통해 상세 페이지로 넘어갔을 때도 Template을 래핑 해놓은 거라면, 변화가 필요한 영역만 바뀌는게 아니라 페이지 전체가 처음부터 다시 렌더링되는게 아닌가 싶어서 여쭙습니다 추가적으로, 앞서 말씀드린대로 처음부터 다시 렌더링 하는 경우라면, 상태를 지속적으로 관리하는건 어렵겠지요? 가령, 사이드바에서 depth가 1이상인 폴더 구조를 갖는 항목들이 있고, 각 항목들이 1개 이상의 md문서를 갖고 있을 때, 사용자가 여러 개의 폴더를 open했다가 특정 md문서로 들어가는 경우, 앞서 open되었던 폴더드의 상태를 계속 유지하는 것은 어렵겠쬬?
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
Unhandled Runtime Error 가 뜹니다
안녕하세요! "URL로부터 선택된 카테고리 파싱하기" 이번 강의의 윗 제목의 파트까지는 실행이 잘 되는데 "마크다운 데이터로 카테고리 목록 만들기" 이 제목 파트 부분의 코드를 작성 후, 로컬 서버를 실행하니 윗 사진과 같은 에러가 뜹니다 index.tsx 의 59번째 줄의 PostType를 PostListItemType으로 잘 변경을 하였는데도 에러가 계속 떠서 질문을 드려봅니다! https://github.com/shinsj4653/gatsby-blog-practice 제 github 프로젝트 주소입니다.
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
sign in with GitHub 클릭 시
sign in with GitHub 클릭 시 아래 화면 처럼 나옵니다.
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
동작 반복 시 오류
1. 동작 반복 시 섬네일 이미지 보이지 않습니다. 포스터 클릭 후 뒤로가기 아이콘 버튼 클릭 (정상동작) 위 동작 반복 시 포스터 상단이 보이지 않습니다. 2. 위 이미지 처럼 포스터 상단이 보이지 않아 F5 클릭 후 뒤로가기 버튼 클릭시 에러가 납니다.
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
const BackgroundImage 질문
const BackgroundImage = styled((props: GatsbyImgProps) => ( <Img {...props} style={{ position: 'absolute' }} /> ))` 위 코드에서 Img {...props}가 아니라 GatsbyImage가 맞는것 아닌지 문의 드립니다. Img가 defined 되지 않았다고 뜨네요.
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
오타 문의
안녕하세요 강의 잘보고 있습니다 강의를 따라서 공부하고 있는중에 오타가 의심되는 부분이 있어서 문의드립니다. PostLIst 컴포넌트에서 map 메서드를 통해 posts배열을 PostItem 컴포넌트로 넘기는 부분에서 .../PostList.tsx ... .../PostList.tsx (이부분 ) 로 디렉토리가 작성 되어 있는데 코드에는 PostItem 컴포넌트에서 작성하는것 같아서요 혹시 이부분 오타인건 가요??
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
Props로 받아 포스트 데이터 출력하기가 안됩니다.
강의에 나온대로 코드를 작성했는데, PostList.tsx에서 import PostItem에서 PostItem이 빨간줄이에요
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
index.tsx allMarkdownRemark 에러..
이런 에러가 나는데 해결방법을 모르겠습니다. 제 깃허브는 https://github.com/pie-heejin/pie-heejin.github.io/tree/develop 입니다.. 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' import PostList, { PostType } from 'components/Main/PostList' import { graphql } from 'gatsby' import { IGatsbyImageData } from 'gatsby-plugin-image' import { PostListItemType } from 'types/PostItem.types' type IndexPageProps = { data: { allMarkdownRemark: { edges: PostListItemType[] } file: { childImageSharp: { gatsbyImageData: IGatsbyImageData } } } } const CATEGORY_LIST = { All: 5, Web: 3, Mobile: 2, } const Container = styled.div` display: flex; flex-direction: column; height: 100%; ` const IndexPage: FunctionComponent<IndexPageProps> = function ({ data: { allMarkdownRemark: { edges }, file: { childImageSharp: { gatsbyImageData }, }, }, }) { return ( <Container> <GlobalStyle /> <Introduction profileImage={gatsbyImageData} /> <CategoryList selectedCategory="Web" categoryList={CATEGORY_LIST} /> <PostList posts={edges} /> <Footer /> </Container> ) } export default IndexPage export const getPostList = graphql` query getPostList { allMarkdownRemark( sort: { order: DESC, fields: [frontmatter___date, frontmatter___title] } ) { edges { node { id frontmatter { title summary date(formatString: "YYYY.MM.DD.") categories thumbnail { childImageSharp { gatsbyImageData(width: 768, height: 400) } } } } } } file(name: { eq: "profile-image" }) { childImageSharp { gatsbyImageData(width: 120, height: 120) } } } `
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
스네이크 케이스로 변수명을 짓는 이유
안녕하세요! 항상 강의 잘 보고 있습니다:) 강의 내용 중에 프로필 이미지 url을 PROFILE_IMAGE_LINK라는 변수에 초기화를 해주고 있는데요, 해당 변수만 대문자 스네이크 케이스로 변수명을 짓는 이유가 있을까요? 어떤 경우에 사용하는지 궁금합니다!
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
'Tagged Template Literal 방식을 통해 정의한 CSS 적용 방법'에서 발생하는 문제
안녕하세요! 강의 잘 보고 있습니다:) 이번 챕터에서 궁금한 것이 있어서 질문드립니다. 이 부분을 해결하기 위해서는 어떤 것을 알고 있어야 할까요? 구글링에 필요한 키워드나 참고 자료 링크가 있다면 알려주시면 감사하겠습니다!
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
상단 이미지를 썸네일 사용하지않고 다른 이미지를 쓰고싶습니다
md 파일에 카테고리를 더 추가하니까 Value "frontmatter___date" does not exist in "MarkdownRemarkFieldsEnum" enum.Value "frontmatter___title" does not exist in "MarkdownRemarkFieldsEnum" enum. Field "fields" is not defined by type "MarkdownRemarkFilterInput". 이런 에러들이 발생하고, graphql frontmatter에서도 항목이 뜨지 않습니다. 다른 방법이 있을까요?
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
여기까지 했는데 runtime 에러가 발생합니다
lint로 잡혀서 몇가지 수정한 부분을 제외한 나머지는 강의내용과 동일합니다. 수정된 부분 1. index.tsx import CategoryList, { CategoryListProps } from 'components/Main/CategoryList' CategoryListProps 추가 edges.reduce( ( list: CategoryListProps['categoryList'], { node: { frontmatter: { categories }, }, }: PostListItemType, PostType -> PostListItemType 로 수정 여기까지 한 부분 것헙에 푸시해두었습니다. https://github.com/myBabyGrand/gatsbyBlog commit ID : 88cf7df165b166d0b08b3504a73e1c85e5e21095
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
index.tsx오류
경로도 맞게 잘 적었는데 왜 안되는지 모르겠습니다
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
tsconfig.json 파일을 찾을 수 없다고 하네요
/Users/lesh/Desktop/project_plid/gatsby/lesh/tsconfig.json 요게 tsconfig 위치고 리액트를 임포트 하는데 에러가 나는데 tscofig 파일 경로가 프로젝트 루트폴더(lesh)내부의 폴더가 아니라 외부폴더에서 찾는 것 같아서..좀 이상하더군요..어떻게 해야할까용
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
develop 은 되는데 build 환경에서의 오류
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 정상 동작하는것도 확인했습니다!
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
배포에 성공후 깃허브 페이지 링크를 들어갔는데 사진도 깨져있고...
배포에 성공후 깃허브 페이지 링크를 들어갔는데 사진도 깨져있고... 게시물을 클릭했을 때 페이지가 뜨지 않고 404에러가 발생합니다... 이럴 때는 어떻게 해결하면 좋을까요?
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
다른 부분에서 오류가 안나는데 {post.map 부분이 계속 오류가 납니다.
-das import React, { FunctionComponent } from 'react' import styled from '@emotion/styled' import PostItem from 'components/Main/PostItem' import { PostListItemType } from 'types/PostItem.types' export type PostType = { node: { id: string frontmatter: { title: string summary: string date: string categories: string[] thumbnail: { publicURL: string } } } } type PostListProps = { posts: PostListItemType[] } const PostListWrapper = styled.div` display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; width: 768px; margin: 0 auto; padding: 50px 0 100px; @media (max-width: 768px) { grid-template-columns: 1fr; width: 100%; padding: 50px 20px; } ` const PostList: FunctionComponent<PostListProps> = function ({ posts }) { return ( <PostListWrapper> {posts.map( ({ node: { id, frontmatter }, }: PostType) => ( <PostItem {...frontmatter} link="https://www.google.co.kr/" key={id} /> ), )} </PostListWrapper> ) } export default PostList 색칠한 부분이 Argument of type '({ node: { id, frontmatter }, }: PostType) => JSX.Element' is not assignable to parameter of type '(value: PostListItemType, index: number, array: PostListItemType[]) => Element'. Types of parameters '__0' and 'value' are incompatible. Type 'PostListItemType' is not assignable to type 'PostType'. The types of 'node.frontmatter.thumbnail' are incompatible between these types. Property 'publicURL' is missing in type '{ childImageSharp: { gatsbyImageData: IGatsbyImageData; }; }' but required in type '{ publicURL: string; }'. 이런 에러를 띄웁니다... 계속 처음부터 따라해봤는데 요부분만 해결이 안되요...
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
thumbnail 에 링크 넣기
thumbnail: './doguri.jpeg 이런 방식으로 상대경로로 파일을 가져오는데, url을 이용해서 불러오는 것도 가능할까요?
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
"siteMetadata.siteUrl" must be a valid uri 에러
ERROR #10122 CONFIG The site's gatsby-config.js failed validation: "siteMetadata.siteUrl" must be a valid uri not finished open and validate gatsby-configs, load plugins - 0.030s 빌드시 이런오류가 발생하는데, 로컬주소로 바꿔도 오류가 나더라구요... 어떤 방식으로 유효성을 체크하는 걸까요? module.exports = { siteMetadata: { title: `철진난만한 혜심의 블로그`, description: `주니어 개발자 혜심의 블로그입니다.`, author: `Haesim`, siteUrl: '<https://my-website-link.com>', // 배포 후 변경 예정 }, plugins: [ { resolve: 'gatsby-plugin-typescript', options: { isTSX: true, allExtensions: true, }, }, `gatsby-plugin-emotion`, `gatsby-plugin-react-helmet`, { resolve: `gatsby-source-filesystem`, options: { name: `contents`, path: `${__dirname}/contents`, }, }, `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, { resolve: `gatsby-transformer-remark`, options: { plugins: [ { resolve: 'gatsby-remark-smartypants', options: { dashes: 'oldschool', }, }, { resolve: 'gatsby-remark-prismjs', options: { classPrefix: 'language-', }, }, { resolve: 'gatsby-remark-images', options: { maxWidth: 768, quality: 100, withWebp: true, }, }, { resolve: 'gatsby-remark-copy-linked-files', options: {}, }, { resolve: 'gatsby-remark-external-links', options: { target: '_blank', rel: 'nofollow', }, }, { resolve: `gatsby-plugin-sharp`, options: { defaults: { formats: ['auto', 'webp'], quality: 100, placeholder: 'blurred', }, }, }, { resolve: `gatsby-source-filesystem`, options: { name: `contents`, path: `${__dirname}/contents`, }, }, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/static`, }, }, { resolve: `gatsby-source-filesystem`, options: { name: `contents`, path: `${__dirname}/contents`, }, }, { resolve: 'gatsby-plugin-canonical-urls', options: { siteUrl: '<https://my-website.com/>', stripQueryString: true, }, }, 'gatsby-plugin-sitemap', `gatsby-transformer-sharp`, `gatsby-plugin-image`, ], }, }, ], }
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
Parsing error: Cannot Read File tsconfig.json
// tsconfig.json { "compilerOptions": { "target": "es5", "module": "commonjs", "allowJs": true, "jsx": "preserve", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "baseUrl": "./src", "paths": { "components/*": ["./components/*"], "utils/*": ["./utils/*"], "hooks/*": ["./hooks/*"] }, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true }, "include": ["src/**/*.tsx"], "exclude": ["node_modules"] } // eslintrc.json { "env": { "browser": true, "es2021": true }, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking", "plugin:prettier/recommended" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 12, "sourceType": "module", "project": "./tsconfig.json" }, "plugins": ["react", "@typescript-eslint"], "ignorePatterns": ["dist/", "node_modules/"], "rules": {} } // eslintignore gatsby-browser.js gatsby-config.js gatsby-node.js gatsby-ssr.js eslintrc, eslintignore, tsconfig 모두 같은 폴더내부에 위치해있는데 왜 gatsby-browser.js 같은 설정 파일에서 parsing 에러가 날까요 ? ㅜㅜ