해결된 질문
작성
·
537
2
답변 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가 콘솔창에 잘 출력되는지 확인해주셔야 합니다.
이 부분은 다시 확인해봤는데 강의 내용이 잘못되어 있었습니다.
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만 제대로 들어있는지 확인해주시면 될 것 같습니다!
강의 수강하시는데 불편함을 드려 죄송합니다.
네, 잘나오네요! 감사합니다.
혹시 'GraphQL Query를 통해 데이터를 조회해야만 data라는 이름으로 Props가 넘어오는데 해당 부분에서는 아직 Query를 작성하지 않았었네요.'
이 부분은 어떤 파일에서 어떻게 추가해야하는지 알수있을까요?
index.tsx에 작성한 query가 아닌가요?
아마 바로 다음 챕터에서 post_template.tsx 파일에 GraphQL Query 부분을 구현할 것입니다.
해당 부분을 잘 따라오신다면 데이터가 잘 보일거에요 :)
답변 감사합니다.
다만, "단, 여기서 props가 출력이 되지 않는다면 다른 코드에서 빼먹은 부분이 존재할 가능성이 있기 때문에 꼭 props가 콘솔창에 잘 출력되는지 확인해주셔야 합니다."
와 관련해서도 props 값인 data가 출력되지 않아서 질문드렸었는데
확인해주실 수 있을까요?