inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

포스트 아이템 링크 연결 및 게시글 페이지 생성하기

게시글 연결 에러(404)

해결된 질문

575

vitamin

작성한 질문수 11

2

안녕하세요!
'포스트 아이템 링크 연결 및 게시글 페이지 생성하기'에서
똑같이 코드를 작성하였는데도
마지막에 수행되어야 하는
"이제 로컬 서버를 실행해 메인 페이지에서 아무 포스트 아이템이나 눌러 404 에러가 더 이상 안 뜨는지, 콘솔창에 올바르게 data라는 이름으로 Props 데이터가 출력되는지 확인해보세요."
에서
GET http://localhost:8000/page-data/404.html/page-data.json net::ERR_ABORTED 404 (Not Found)
에러가 발생하고, 특정 포스트를 클릭하면,
화면에는 Post Template 만 나옵니다.
뭐가 문제인지 파악하기 쉽지 않아
지금까지 수행한 코드를 올린 깃헙 주소를 아래에 첨부드립니다.
(수정)
참고로, URL은 의도한대로(slug 반영) 잘 변경됩니다.
답변 부탁드립니다.
감사합니다.

blog Gatsby

답변 1

0

주현도

안녕하세요, vitamin님!

일단 레포지토리 직접 돌려본 결과 이상이 없는 것으로 보입니다.


먼저 콘솔창에 뜨는 에러에 대해 설명해드리겠습니다.

GatsbyJS는 내부적으로 src/pages 디렉토리 내의 파일을 통해 페이지를 생성해줍니다.

따라서 index.tsx 파일은 메인 페이지, info.tsx 파일은 /info 페이지가 되는 것입니다.

GatsbyJS에서는 이렇게 페이지를 생성해줄 수 있는데, 여기서 필수적으로 생성해줘야 하는 파일이 있습니다.

바로 index.tsx 파일과 404.tsx 파일인데요, 저 오류가 뜨는 이유는 바로 404.tsx 파일이 존재하지 않기 때문에 나타나는 것입니다.

404 페이지 생성 부분은 강의 뒷부분에서 다루기 때문에 해당 오류는 무시하시고 넘어가셔도 상관없지만, 보기 불편하시다면 src/pages/404.tsx 파일을 생성하신 후에 빈 컴포넌트를 작성해주시면 오류가 뜨지 않습니다.



이제 두 번째 부분인 화면에 Post Template만 나온다는 것에 대해 설명해드리겠습니다.

포스트 아이템 링크 연결 및 게시글 페이지 생성하기 챕터에서 src/templates/post_template.tsx 파일을 아래와 같이 작성합니다.

import React, { FunctionComponent } from 'react';

interface PostTemplateProps {}

const PostTemplate: FunctionComponent<PostTemplateProps> = function (props) {
  console.log(props);

  return <div>Post Template</div>;
};

export default PostTemplate;


해당 컴포넌트는 메인 페이지의 포스트 아이템을 눌렀을 때 보여지는 컴포넌트로, Post Template이라는 글자만 반환하고 있습니다.

그래서 빈 화면에 Post Template이란 글자만 나와야 정상적으로 작동하는 것입니다.

단, 여기서 props가 출력이 되지 않는다면 다른 코드에서 빼먹은 부분이 존재할 가능성이 있기 때문에 꼭 props가 콘솔창에 잘 출력되는지 확인해주셔야 합니다.

0

vitamin

답변 감사합니다.

다만, "단, 여기서 props가 출력이 되지 않는다면 다른 코드에서 빼먹은 부분이 존재할 가능성이 있기 때문에 꼭 props가 콘솔창에 잘 출력되는지 확인해주셔야 합니다."

와 관련해서도 props 값인 data가 출력되지 않아서 질문드렸었는데

확인해주실 수 있을까요?

0

주현도

이 부분은 다시 확인해봤는데 강의 내용이 잘못되어 있었습니다.

GraphQL Query를 통해 데이터를 조회해야만 data라는 이름으로 Props가 넘어오는데 해당 부분에서는 아직 Query를 작성하지 않았었네요.

{
  "path": "/test11/",
  "location": {
    "pathname": "/test11/",
    "search": "",
    "hash": "",
    "href": "https://8000-lime-wildfowl-rh51ttzo.ws-us10.gitpod.io/test11/",
    "origin": "https://8000-lime-wildfowl-rh51ttzo.ws-us10.gitpod.io",
    "protocol": "https:",
    "host": "8000-lime-wildfowl-rh51ttzo.ws-us10.gitpod.io",
    "hostname": "8000-lime-wildfowl-rh51ttzo.ws-us10.gitpod.io",
    "port": "",
    "state": {
      "key": "1626348611985"
    },
    "key": "1626348611985"
  },
  "pageResources": {
    "json": {
      "pageContext": {
        "slug": "/test11/"
      }
    },
    "page": {
      "componentChunkName": "component---src-templates-post-template-tsx",
      "path": "/test11/",
      "webpackCompilationHash": "123",
      "staticQueryHashes": []
    },
    "staticQueryResults": {}
  },
  "uri": "/test11",
  "pageContext": {
    "slug": "/test11/"
  },
  "params": {}
}

그래서 위와 같은 객체가 콘솔창에 출력되는지만 확인해주시면 됩니다.

실행 환경이 다르기 때문에 내용은 조금씩 다를 수 있으며, pageContext 속성의 slug만 제대로 들어있는지 확인해주시면 될 것 같습니다!

강의 수강하시는데 불편함을 드려 죄송합니다.

0

vitamin

네, 잘나오네요! 감사합니다.

혹시 'GraphQL Query를 통해 데이터를 조회해야만 data라는 이름으로 Props가 넘어오는데 해당 부분에서는 아직 Query를 작성하지 않았었네요.'

이 부분은 어떤 파일에서 어떻게 추가해야하는지 알수있을까요?

index.tsx에 작성한 query가 아닌가요?

0

주현도

아마 바로 다음 챕터에서 post_template.tsx 파일에 GraphQL Query 부분을 구현할 것입니다.

해당 부분을 잘 따라오신다면 데이터가 잘 보일거에요 :)

쿼리오류 Field "thumbnail" must not have a selection...

1

872

1

타입스크립트를 설정할 때 jsxPragma 옵션을 뺀 이유는 무엇인가요?

1

607

1

마지막 배포 부분 질문드립니다!

1

626

1

'[username]/[username].github.io' -> 'username/reponame'

0

344

0

IntersectionObserver deploy( gatsby build) 시 오류(자답)

1

400

1

PostHead.tsx BackgroundImage 동작오류(자답)

1

297

0

19강 인피니티 스크롤 IntersectionObserver 코드 위치 수정이 필요합니다.

1

412

1

썸네일 이미지 제작 및 학습 방법 관련 문의

1

448

1

배포 후 포스트 업로드 방법

1

387

1

배포 질문이요!

1

530

1

gatsby develop 오류

1

941

1

깃허브 레퍼지토리 질문드려요

1

344

1

특정 게시글을 클릭하여 상세 페이지로 넘어가는 과정과 SPA에 관한 질문

1

285

1

Unhandled Runtime Error 가 뜹니다

0

507

2

sign in with GitHub 클릭 시

1

394

3

동작 반복 시 오류

1

351

2

const BackgroundImage 질문

1

212

1

오타 문의

1

305

2

Props로 받아 포스트 데이터 출력하기가 안됩니다.

1

203

1

index.tsx allMarkdownRemark 에러..

0

596

2

스네이크 케이스로 변수명을 짓는 이유

1

251

1

'Tagged Template Literal 방식을 통해 정의한 CSS 적용 방법'에서 발생하는 문제

3

353

2

상단 이미지를 썸네일 사용하지않고 다른 이미지를 쓰고싶습니다

1

284

1

여기까지 했는데 runtime 에러가 발생합니다

2

286

1