무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
Link 속성 질문드립니다.
const CategoryItem = styled(({ to, active, ...props }: GatsbyLinkProps) => ( <Link to={to} {...props} /> ) ... 여기서 Link에 to와 props는 왜 전달해줘야 하는지 이해가 잘 되지않습니다 const CategoryList: FunctionComponent<CategoryListProps> = function ({ selectedCategory, categoryList, }) { return ( <CategoryListWrapper> {Object.entries(categoryList).map(([name, count]) => ( <CategoryItem to={`/?category=${name}`} to는 여기에서만 지정해줘도 되지 않나요?? active={name === selectedCategory} key={name} > #{name}({count}) </CategoryItem> ))} </CategoryListWrapper> ) }
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
Prefetch 질문드립니다~
유용한 설명 꼼꼼히 잘 보며 배우고 있습니다..! 몇 가지 궁금한점이 있는데요. 먼저 pages에 있는 모든 파일의 이름을 통해 페이지에 접근할 수 있다는 부분입니다. 특별한 설정 없이도 모든 Gatsby 프로젝트에서 자체적으로 src/pages 폴더에 적용 되는거라고 보면 될까요? 그렇다면 폴더의 이름을 변경하고 싶은 경우에는 어떻게 해야 하나요? src/pages가 아니라 src/routes로 변경하는 경우엔 Gatsby에서 routes내부에 있는 파일의 링크를 생성하지 않는 건가요?? 2. Gatsby는 Prefetch를 통해 페이지에서 사용할 리소스의 로딩속도를 높인다고 하신 부분입니다. 만약 해당 페이지에 Link 태그가 점점 많아진다고 하면 미리 로드해오는 데이터가 점점 많아져 속도가 저하될 수 있을것 같은데 그럴경우엔 Link태그를 어떻게 관리해야 하나요???
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
질문드립니다.!
InfoPage가 어떻게 metadataQuery의 결과값을 매개변수로 실행될 수 있나요?
- 미해결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로 기술 블로그 개발하기
SSR bundle failed 오류가 발생합니다..!
안녕하세요! 먼저 강의 듣고 잘 블로그 만들었습니다 감사합니다! 블로그를 만들고 글을 작성하려고 하는데, 최근에 ERROR #98123 WEBPACK Generating development SSR bundle failed /Users/mac/developer/ingong-blog/.cache/develop-static-entry.js: Cannot read properties of undefined (reading 'path') File: .cache/develop-static-entry.js not finished Building development bundle - 0.653s not finished Caching HTML renderer compilation - 0.018s 이러한 오류가 발생합니다...! 구글링해서 node_modules 도 지웠다가 다시 깔아보고, 여러가지를 해봤는데 안되서 질문남깁니다 :(
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
github 페이지 오류 질문드립니다~
배포하고나서 들어가보니 리액트로고만 로딩되고 있어서 https://juo1221.github.io/juo1221-github.io/index.html 이렇게 index.html을 붙여서 접속하니 접속은 됩니다. 하지만 이미지들이 전부 보이지 않네요 ㅜㅜ 그리고 게시물과 같은 다른 링크를 클릭하면 해당 게시물이 보여지지않고 다시 리액트 로고가 보입니다.. 왜 이런현상이 발생하는지 혹시 아실까요???깃허브 : https://github.com/juo1221/juo1221-github.io 링크 : https://juo1221.github.io/juo1221-github.io/
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
페이지오류가 나는데..!
yarn develop으로 실행시키면 메타데이터가 뜨지 않고 위처럼 나오는데 어떻게 고쳐야 할까요?
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
라이브러리 삭제
yarn remove gatsby-plugin-manifest gatsby-plugin-gatsby-cloud 혹시 이 작업을 안하면 문제가 발생되나요?
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
gatsby develop 안돼요..
Cannot find module 'gatsby-core-utils' 에러 나서 생성한 프로젝트 폴더내에서 npm update 해주고 다시 yarn develop해줬는데도 다른 에러가 나타다고 실행이 안돼요 ㅠ
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
Error: Cannot find module 'gatsby-core-utils'
Error: Cannot find module 'gatsby-core-utils' 에러가 뜹니다. 해결방법이 있을까요?
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
Link to 질문드립니다.
<CategoryListWrapper> {Object.entries(categoryList).map(([name, count]) => ( <CategoryItem to={`/?category=${name}`} active={name === selectedCategory} key={name} > #{name}({count}) </CategoryItem> ))} </CategoryListWrapper> ); 이 부분에서 to 경로에 ? 가 쓰이는 이유가 궁금해서 질문드립니다!
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
ProfileImage컴포넌트 질문드립니다.
애로우펑션을 이용할시 안되는데 특별한 이유가 있나요? const ProfileImage = (): FunctionComponent => { return <ProfileImageWrapper src={PROFILE_IMAGES} alt="Profile Image" />;}
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
Error: Cannot find module 'gatsby-core-utils'
Error: Cannot find module 'gatsby-core-utils' 에러뜨시는분 생성한 프로젝트 폴더내에서 npm update 해주고 다시 yarn develop해주시면 움직입니다.
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
가츠비 + 리액트 가능한가요?
가츠비는 정적 페이지를 만드는 프레임 워크라고 하셨는데 그럼 예를 들어서 회사 홈페이지를 만드는데 회사 소개페이지에는 가츠비기술을 사용하고 나머지 회사 홈페이지 회원가입등등 다른 동적인 페이지에는 순수 리액트를 사용하여 하나의 프로젝트에서 개발할수 있나요?
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
"parserOptions.project" has been set for @typescript-eslint/parser.
TypeScript 개발환경 구성하기 부분에서 eslintrc.json 파일을 생성하고 내용대로 설정한 후에 이런 에러메세지가 발생하였습니다. 어떻게 해결해야할 지 모르겠습니다...
- 해결됨React 기반 Gatsby로 기술 블로그 개발하기
gasby-image 대체 방법
이미지 부분에 대해서 공부하다가, gatsby-image API가 Gatsby에서는 더 이상 사용하지 않는 API라는 공식 문서를 보게 되어 공유하고자 글을 썼습니다. (관련 링크) 공식 문서에서 이를 대체하는 방법으로 gatsby-transformer-sharp 플러그인을 사용한 GatsbyImage 인데요, 사용 방법은 공식문서를 보시면 됩니다! 위 공식 문서에서는 이미지를 불러와 사용하는 방법만 있고, 이 강의에서 하고자하는 블러 처리와 몇 가지를 통한 최적화된 이미지는 옵션을 추가하셔야 됩니다. (링크) 썸네일 관련 이미지에 대한 쿼리는 제가 아래와 같이 구현했는데, 현도님께서 강의해주신 것과 동일하게 작동합니다. query filteredData { allMarkdownRemark { edges { node { frontmatter { thumbnail { childImageSharp { gatsbyImageData( quality: 100 placeholder: BLURRED formats: [AUTO, WEBP, AVIF] transformOptions: {fit: INSIDE} layout: CONSTRAINED width: 768 height: 200 ) } } } } } } } 해당 쿼리문을 사용하는 방법은 위 공식 문서를 확인해주시면 되겠고, 프로필 이미지에 대한 쿼리문은 옵션 부분만 변경하면 되겠습니다. 현도님께서 이 글을 보고 잘못된 부분에 대해 수정해주신다면 감사드리겠습니다! 저는 아직 코린이라서요ㅠㅠ 모두 재밌는 코딩하세요:)
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
tsconfig.json 파일에서 구성 파일에서 입력을 찾을 수 없다는 오류가 발생합니다.
tsconfig.json 생성하고 들여다보자마자 구성 파일에서 입력을 찾을 수 없다는 오류가 뜹니다.. 이럴 경우 해결책이 어떻게 될까요?? 구글링을 해봐도 해결책을 찾을 수 가 없습니다.
- 해결됨React 기반 Gatsby로 기술 블로그 개발하기
오류 관련 질문 있습니다.
안녕하세요, 현도님! 강의 정말 재밌게 잘 보고 있습니다ㅎㅎ 다름이 아니라, 무한 스크롤을 구현하는 중에 SSR 관련 오류가 떠서 질문드립니다. 제가 확인해본 결과, 아래 코드를 포함하는 경우에만 아래 이미지와 같은 경고창이 뜨는 것으로 보아 IntersectionObserver를 node.js 환경에서 실행하는데 문제가 생긴 것 같습니다.(이 표현이 맞을까요?ㅎ) const observer: IntersectionObserver = new IntersectionObserver(...); (경고창일 뿐이라 개발하는데 문제 없고, 무한 스크롤도 정상 작동합니다. 처음 yarn develop 실행 후 연결 시에는 경고창이 뜨지 않는데, 새로고침 후에는 계속 뜨네요.) 추후에 배포를 하는 상황에 문제가 될 것 같기도 하고, yarn build해서 확인할 때마다 경고창이 떠서 신경이 계속 쓰여 해결하고 싶습니다ㅠㅠ 공식 문서를 보고, 구글링을 해도 해결이 쉽지 않고 다른 분들한테는 뜨는 것 같지 않아 코드 자체에 문제가 있는 것 같지는 않네요.. 계속 해결하려고 시도해보겠지만, 혹시 이 부분에 대해서 알고 계신다면 조언 부탁드리겠습니다. 그리고 좋은 강의 올려주셔서 감사합니다:) 아래는 제 깃헙 주소와 오류 관련 공식 문서입니다. 깃헙 주소: https://github.com/20170781 오류 관련 공식 문서: https://www.gatsbyjs.com/docs/debugging-html-builds/
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
이미지 링크가 깨집니다
이미지가 ?로 표시되는데 이유가 뭔지 모르겠네요
- 미해결React 기반 Gatsby로 기술 블로그 개발하기
블로그접속시 Gatsby's default starter 로 나옵니다.
안녕하세요 강의 전부 수강 후 웹 홈페이지 관리페이지를 제외하고 강의 내용대로 페이지 제작을 진행하였는데 메인 페이지가 gatsby'default starter 로 나오네요 ! 로컬에서 실행 시 강의내용대로 수정한 메인과 페이지들이 나오긴 하는데 pung8146.github.io 로 접속 시 제작한 페이지가 나오지 않는데 왜 그런지 이유를 알 수 있을까요?