• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

정말 감사합니다. 잘듣고있습니다! 질문이있습니다.

21.06.28 23:08 작성 조회수 119

2

안녕하세요. 정말 잘듣고 있어 감사드립니다.

contents 디텍토리 안에서 바로 파일경로가아니라 디텍토리를 분류하여 관리하고싶습니다.

예를들어,

contents / javascript 디텍토리안에 2021-06-21.md , 2021-06-22.md

contents/ vue 디텍토리안에 2021-06-21.md , 2021-06-22.md 

이런식으로 좀더 관리하기 편하게 폴더를 하나 더 만들어서 분류하고싶습니다.

노드에서 `${__dirname}/contents` 부분을 변경해야할거같은데 어떻게 해야할지 알수있을까요?

course-thumbnail

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

답변 2

·

답변을 작성해보세요.

0

주현도님의 프로필

주현도

지식공유자

2021.07.02

안녕하세요, rhdlwmal1234님!

댓글 잘 읽어봤습니다.

일단 위의 답변은 제가 직접 테스트해본 결과를 말씀드린거라 원래대로면 오류 없이 정상 작동해야하는데 다른 부분에서 문제가 발생한 것 같네요.

정확한 확인을 위해 해당 프로젝트를 업로드한 깃허브 링크가 필요할 것 같습니다.

혹시 링크를 댓글로 달아주실 수 있나요?

rhdlwmal1234님의 프로필

rhdlwmal1234

질문자

2021.07.04

graphql확인해보니 thumbnail에서  null 이떠서 javasript폴더안에 이미지 생성해주고 thumbnail 에 jpg 넣어주니

동작하네요. 전에는 안되었는데 갑자기 되네요.. null처리를 따로 해야할거같긴합니다. 

바쁘신와중에 친절한답변해주셔서 감사드립니다.

주현도님의 프로필

주현도

지식공유자

2021.07.04

해결하셨다니 다행입니다!

언제든지 막히는 부분이 생긴다면 바로 질문 올려주세요 :)

0

주현도님의 프로필

주현도

지식공유자

2021.06.30

안녕하세요, rhdlwmal1234님!

contents 디렉토리 안에서는 디렉토리 구조를 어떻게 설정하던 상관없이 게시글 기능은 정상적으로 작동됩니다.

그래서 따로 변경해야 할 부분은 없습니다.

원리는 다음과 같습니다.

하단은 강의에 올라온 gatsby-node.js 코드의 일부분입니다.

// Generate a Slug Each Post Data
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions;

if (node.internal.type === `MarkdownRemark`) {
const slug = createFilePath({ node, getNode });

createNodeField({ node, name: 'slug', value: slug });
}
};

가장 먼저 해당 부분에 의해 contents 디렉토리 내의 모든 마크다운 타입의 데이터에 대해 링크가 추가됩니다.

여기서 slug 부분이 게시글로 연결되는 링크인데, 파일의 위치를 기반으로 자동으로 생성해주기 때문에

contents 디렉토리 내의 구조가 바뀌어도 자동으로 위치에 맞게 생성해줍니다.

// Page Generating Function
const generatePostPage = ({
node: {
fields: { slug },
},
}) => {
const pageOptions = {
path: slug,
component: PostTemplateComponent,
context: { slug },
};

createPage(pageOptions);
};

해당 부분은 createPages API 내용 중 일부인데요, 해당 부분에 의해 게시글 페이지가 생성됩니다.

모든 마크다운 데이터를 가져와 페이지로 변환해주는데요, Gatsby에서는 내부적으로 파일 경로를 기반으로 URL을 설정해줍니다.

그리고 강의에 수록되어 있듯이 pageOptions.context 값을 PostTemplateComponent의 GraphQL문 파라미터로 받을 수 있는데, 해당 slug는 파일 경로를 기반으로 자동 생성되기 때문에 디렉토리의 구조가 변경되어도 자동으로 반영됩니다.

rhdlwmal1234님의 프로필

rhdlwmal1234

질문자

2021.06.30

친절한 답변감사드립니다. 아래와같이 javascript 디텍토리를 만든 후, 작성했습니다.

그런데  아래와같이 PostItem.tsx에서 childImageSharp가 null되어 에러가나옵니다.

이미지 경로 문제인거아서 md에서 thumbnail: './test.jpg' 을 삭제하고 해봐도 아래와같은 에러가 나옵니다.

제가 혹시 설정한게 잘못된건지.. 답변하신거 잘 읽어봐도 설정이 되지않아 문의드립니다. 죄송합니다.

아래는 강의보고작성한 gatsby-node.js 와 에러창에서나오는 postItem.tsx 파일입니다. 감사합니다.

const PostTemplateComponent = path.resolve(
__dirname,
'src/templates/post_template.tsx',
);

const TagTemplate = path.resolve(__dirname, 'src/templates/tags.tsx');

// Page Generating Function
const generatePostPage = ({
node: {
fields: { slug },
},
}) => {
const pageOptions = {
path: slug,
component: PostTemplateComponent,
TagTemplate,
context: { slug },
};

createPage(pageOptions);
};

const PostItem: FunctionComponent<PostItemProps> = function ({
title,
date,
categories,
summary,
thumbnail: {
childImageSharp: { fluid },
},
link,
}) {
return (
<PostItemWrapper to={link}>
<ThumbnailImage fluid={fluid} alt="Post Item Image" />

<PostItemContent>
<Title>{title}</Title>
<Date>{date}</Date>
<Category>
{categories.map(item => (
<CategoryItem key={item}>{item}</CategoryItem>
))}
</Category>
<Summary>{summary}</Summary>
</PostItemContent>
</PostItemWrapper>
);
};

export default PostItem;

이 글과 비슷한 Q&A