게시글 연결 에러(404)

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

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

해결된 질문

작성

542

안녕하세요!

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

똑같이 코드를 작성하였는데도

마지막에 수행되어야 하는

"이제 로컬 서버를 실행해 메인 페이지에서 아무 포스트 아이템이나 눌러 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

주현도

지식공유자

안녕하세요, 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가 콘솔창에 잘 출력되는지 확인해주셔야 합니다.

vitamin

질문자

답변 감사합니다.

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

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

확인해주실 수 있을까요?

주현도

지식공유자

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

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만 제대로 들어있는지 확인해주시면 될 것 같습니다!

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

vitamin

질문자

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

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

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

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

주현도

지식공유자

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

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

인프런 커뮤니티 질문&답변

게시글 연결 에러(404)