Gatsby 블로그 만들기 3 - 시리즈 기능 구현
이전 글에서는 Gatsby 기본 기능을 구현을 위한 튜토리얼을 소개했고 태그 기능을 구현했으며, MDX 글 안에 인라인 이미지와 테이블을 삽입했다.
오늘은 시리즈 기능을 구현해보자.
1. 개요
시리즈 기능은 여러 글들을 하나로 묶어주는 기능이다. 카테고리와 유사 한 기능이지만, 같은 종류의 글을 묶는 카테고리와 달리 이어지는 글들을 하나로 묶어주는 기능이라고 보면 된다. 이전에 사용하던 블로그 서비스인 velog 에서 해당 기능을 확인할 수 있다.
Gatsby 의 GraphQL 과 mdx, gatsby-node 기능을 사용해 시리즈를 구현해보겠다.
2. 구현
구현을 위해 해야 할 일은 아래와 같다.
- mdx 파일에 시리즈 정보 넣기
- 시리즈 목록 페이지 구현
- 시리즈 상세 페이지 구현
- 글 상세 페이지에 해당 글이 속한 시리즈의 글 목록 추가
2.1. mdx frontmatter 에 시리즈 필드 추가
mdx 파일에 시리즈를 위한 필드를 추가하자. 이름은 series 로 하겠다. 이제 같은 시리즈로 포함시킬 글들은 series 필드 에 같은 이름을 넣어주면 된다.
---
title: # ...
date: # ...
slug: # ...
tags: # ...
series: "Gatsby 블로그 만들기"
---2.2. 시리즈 목록 페이지 구현
시리즈 목록을 위한 페이지를 src/pages/series/index.tsx 에 만들어보자.
2.2.1. 기본 페이지 추가
기본 구현은 태그 목록을 위한 페이지 구현 방법 과 같다.
// src/pages/series/index.tsx
import * as React from "react";
import { graphql, Link, PageProps } from "gatsby";
import Layout from "../../components/Layout";
import Seo from "../../components/Seo";
type SeriesPageData = {
allMdx: {
group: {
fieldValue: string;
totalCount: number;
}[];
};
};
const SeriesPage = ({ data }: PageProps<SeriesPageData>) => {
const series = data.allMdx.group;
return (
<Layout>
<h1>시리즈</h1>
<ul>
{series.map((sr) => (
<li key={sr.fieldValue}>
<Link to={`/series/${sr.fieldValue}/`}>{`${sr.fieldValue}`}</Link>{" "}
<small>{sr.totalCount}</small>
</li>
))}
</ul>
</Layout>
);
};
export const query = graphql`
query {
allMdx(limit: 2000) {
group(field: { frontmatter: { series: SELECT } }) {
fieldValue
totalCount
}
}
}
`;
export const Head = () => <Seo title="시리즈 목록" />;
export default SeriesPage;이렇게 구현하면 시리즈 목록 페이지가 완성된다.
하지만 완성된 모습이 다소 허전하다. velog 의 시리즈 목록 페이지를 보면 해당 시리즈의 썸네일과 마지막 작성글 날짜까지 보인다. 하지만 우리가 만든 페이지에는 시리즈들의 이름과 글 수만 덩그러니 있을 뿐이다.
우리도 썸네일과 마지막 작성글 날짜를 추가해보자.
2.2.2. GraphQL 쿼리 수정
쿼리에 edges 를 추가하자. 이렇게 하면 시리즈별로 시리즈에 속한 글들을 (모두) 가져올 수 있다.
// src/pages/series/index.tsx
export const query = graphql`
query {
allMdx(limit: 2000) {
group(field: { frontmatter: { series: SELECT } }) {
fieldValue
totalCount
edges {
node {
frontmatter {
title
originalDate: date
date(formatString: "YYYY. M. D.")
heroImageAlt
heroImage {
childImageSharp {
gatsbyImageData
}
}
}
}
}
}
}
}
`;2.2.3. 데이터 정렬 및 시리즈별 마지막 글 선택
아쉽게도 GraphQL 쿼리로 해당 시리즈에 속한 글 중 최신글만 골라서 가져올 수는 없다. (정말 불가능한 건지는, GraphQL 을 잘 몰라서 확실치 않다.)
또한 GraphQL 의 group 쿼리에는 정렬을 적용할 수 없다. (이것 또한, GraphQL 의 한계인지 Gatsby 의 한계인지는 잘 모르겠다.)
따라서 가져온 데이터를 코드로 직접 정렬하고, 시리즈별로 마지막 글만을 골라내야 한다.
// src/pages/series/index.tsx
const SeriesPage = ({ data }: PageProps<SeriesPageData>) => {
const series = data.allMdx.group
.map(({ edges, ...sr }) => ({
...sr,
// 시리즈별로 가장 최신 글만 골라서 `node` 필드에 넣자
node: edges.sort((a, b) =>
b.node.frontmatter.originalDate.localeCompare(
a.node.frontmatter.originalDate
)
)[0].node,
}))
// 최신 글의 작성일 기준으로 시리즈를 내림차순 정렬하자.
.sort((a, b) =>
b.node.frontmatter.originalDate.localeCompare(
a.node.frontmatter.originalDate
)
);
// ...2.2.4. 뷰 업데이트
데이터를 가져왔으니 뷰를 업데이트 해보자.
// src/pages/series/index.tsx
import SeriesItem from "../../components/SeriesItem";
// ...
const SeriesPage = ({ data }: PageProps<SeriesPageData>) => {
// ...
return (
<Layout>
<h1>시리즈</h1>
<SeriesList>
{series.map((sr) => (
// 코드가 길어져서 별도의 컴포넌트로 분리
<SeriesItem key={sr.fieldValue} {...sr} />
))}
</SeriesList>
</Layout>
);
};// src/components/SeriesItem.tsx
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { navigate } from "gatsby";
// ...
function SeriesItem({ fieldValue, totalCount, node }: SeriesItemProps) {
const { date, heroImage, heroImageAlt } = node.frontmatter;
const image = heroImage ? getImage(heroImage) : null;
return (
// 링크를 연결하고
<Container onClick={() => navigate(`/series/${fieldValue}`)}>
<ThumbnailWrapper>
{/* 썸네일이 있으면 썸네일을 그리고 */}
{!!image && <ThumbnailImage image={image} alt={heroImageAlt ?? ""} />}
{/* 시리즈에 포함된 글 수를 표시하고 */}
<small>{`${totalCount}`}</small>
</ThumbnailWrapper>
<Info>
{/* 시리즈 이름을 보여주고 */}
<h3>{fieldValue}</h3>
{/* 마지막 글의 작성일을 표시한다 */}
<small>{`~ ${date}`}</small>
</Info>
</Container>
);
}
// ...
const ThumbnailImage = styled(GatsbyImage)`
width: 100%;
height: 100%;
object-fit: cover;
`;
// ...그럼 이제 시리즈 목록 페이지는 완성이다. 아래처럼 보일 것이다.
2.2.5. 상세 코드
위 코드 조각들은 생략된 부분이 있으므로, 코드 전문을 보고 싶다면 아래를 참고하자.
2.3. 시리즈 상세 페이지 구현
시리즈 상세 페이지도 구현해보자.
(이건 이전에 작성했던 Gatsby 블로그 만들기 1 - 기본 구현 및 태그 기능 구현 글에서 태그의 상세 페이지를 만드는 방법과 동일하다.)
빌드 타임에 현재 존재하는 모든 시리즈 이름을 GraphQL 로 가져와서, 시리즈 별로 상세 페이지를 만들어 줄 것이다. 상세 페이지에는 해당 시리즈에 속한 글들이 작성일자 순으로 정렬되어 보일 것이다.
이것을 위해 페이지를 만들 때 쓰일 템플릿을 만들고, 빌드 타임에 실행될 스크립트를 작성하자.
2.3.1. 탬플릿 작성
// src/templates/SeriesDetailPageTemplates.ts
import * as React from "react";
import { graphql, Link, PageProps } from "gatsby";
import Layout from "../components/Layout";
type SeriesDetailPageTemplateData = {
// ...
};
type SeriesDetailPageTemplateContext = {
series: string;
};
const SeriesDetailPageTemplate = ({
// `pageContext` 에는 gatsby-node.ts 의 createPages 에서 넘겨주는 값들이 들어있다.
pageContext,
// `data` 에는 아래 쪽에 있는 pageQuery 쿼리의 결과값이 들어있다.
data,
}: PageProps<
SeriesDetailPageTemplateData,
SeriesDetailPageTemplateContext
>) => {
const { series } = pageContext;
const { totalCount, edges } = data.allMdx;
return (
<Layout>
<h1>{`시리즈 "${series}"`}</h1>
<ol>
{edges.map(({ node: { frontmatter } }) => (
<li key={frontmatter.slug}>
<Link to={`/posts/${frontmatter.slug}`}>{frontmatter.title}</Link>
</li>
))}
</ol>
</Layout>
);
};
// $series 는 gatsby-node.ts 의 createPages 로부터 넘겨받는다.
export const pageQuery = graphql`
query ($series: String) {
allMdx(
limit: 2000
sort: { frontmatter: { date: ASC } }
filter: { frontmatter: { series: { in: [$series] } } }
) {
totalCount
edges {
node {
frontmatter {
title
slug
}
}
}
}
}
`;
export default SeriesDetailPageTemplate;2.3.2. gatsby-node.ts 의 createPages 수정
gatsby-node.ts 의 createPages 함수에서는 빌드 타임에 페이지를 생성할 수 있다. 만약 기존에 해당 함수를 구현한 적이 없었다면, 아래 코드를 gatsby-node.ts 에 그대로 추가해주면 된다. 만약 해당 함수가 이미 있다면, 아래 내용의 함수 안 코드를 기존의 createPages 안에 적당히 끼워넣어주자.
// gatsby-node.ts
export const createPages: GatsbyNode["createPages"] = async ({
actions,
graphql,
reporter,
}) => {
// 존재하는 모든 시리즈를 가져온다.
const result = await graphql<TagGroupsQueryData>(`
{
seriesGroup: allMdx(limit: 2000) {
group(field: { frontmatter: { series: SELECT } }) {
fieldValue
}
}
}
`);
if (result.errors || !result.data) {
reporter.panicOnBuild(`Error while running GraphQL query.`);
return;
}
// 상세 페이지 생성에 쓰일 템플릿 컴포넌트의 경로를 가져온다.
const seriesTemplatePath = path.resolve(
"src/templates/SeriesDetailPageTemplate.tsx"
);
const { seriesGroup } = result.data;
// 시리즈 별로 페이지를 생성한다.
// `context` 를 통해 시리즈 이름을 템플릿에 넘겨주자.
seriesGroup.group.forEach((series) => {
actions.createPage({
path: `/series/${series.fieldValue}/`,
component: seriesTemplatePath,
context: { series: series.fieldValue },
});
});
};이제 개발 서버를 껐다 켜면, 시리즈 상세 페이지가 잘 생성된 것을 확인할 수 있다.
취향에 따라 스타일을 바꾸고 글의 썸네일이나 작성일 등을 넣어주자. (나중에 진행할 예정)
2.3.3. 상세 코드
위 코드 조각들의 원문을 보고 싶다면 아래를 참고하자.
2.4. 글 상세 페이지에 해당 글이 속한 시리즈의 글 목록 추가
글이 특정 시리즈에 속해있다면, 해당 글의 상세 페이지 상단에 시리즈의 글 목록을 넣어주자.
상세 페이지(src/pages/posts/{mdx.frontmatter__slug}.tsx)에서 해당 글이 속한 시리즈의 글 목록을 얻기 위해, 일단 gatsby-node.ts 를 또 수정할 것이다.
2.4.1. gatsby-node.ts 의 createResolvers 수정
createResolvers 에서는 GraphQL 쿼리에서 사용할 수 있는 필드를 추가할 수 있다. 우리는 sameSeriesPosts 필드를 추가할 것이다.
// gatsby-node.ts
export const createResolvers: GatsbyNode["createResolvers"] = ({
createResolvers,
}) => {
createResolvers({
Mdx: {
sameSeriesPosts: {
type: ["Mdx"],
resolve: async (source, args, context, info) => {
if (!source.frontmatter.series) {
return;
}
const { entries } = await context.nodeModel.findAll({
query: {
filter: {
frontmatter: {
series: {
eq: source.frontmatter.series,
},
},
},
},
type: "Mdx",
});
// 공식 문서에 의하면 createResolvers 내에서
// GraphQL 기능으로 정렬하는 건 불가능하다고 한다.
// 스크립트 코드로 직접 정렬해주자
return [...entries].sort((a, b) =>
a.frontmatter.date.localeCompare(b.frontmatter.date)
);
},
},
},
});
};이제 GraphQL 쿼리로 시리즈의 글 목록을 가져올 수 있다.
2.4.2. 글 상세 페이지에 시리즈의 글 목록 추가
// src/pages/posts/{mdx.frontmatter__slug}.tsx
import SameSeriesPosts from "../../components/SameSeriesPosts";
// ...
const PostDetailPage = ({ data, children }: PageProps<PostDetailPageData>) => {
const {
frontmatter,
// 아까 `createResolvers` 에서 추가한 필드인
// `sameSeriesPosts` 를, GraphQL 쿼리로 가져올 수 있다.
sameSeriesPosts,
} = data.mdx;
const { title, slug, date, tags, series, heroImage, heroImageAlt } =
frontmatter;
const image = heroImage ? getImage(heroImage) : null;
return (
<Layout>
<Header>
<h1>{title}</h1>
<WrittenDate>{date}</WrittenDate>
<Tags>
{tags.map((tag) => (
<li key={tag}>
<Link to={`/tags/${tag}`}>{tag}</Link>
</li>
))}
</Tags>
</Header>
{/* 뷰 상세 코드는 생략 */}
<SameSeriesPosts name={series} data={sameSeriesPosts} current={slug} />
{!!image && <ThumbnailImage image={image} alt={heroImageAlt ?? ""} />}
<MdxContent>{children}</MdxContent>
<Comments />
</Layout>
);
};
// ...
export const query = graphql`
query ($id: String) {
mdx(id: { eq: $id }) {
# ... 다른 필드는 생략 ...
# 이렇게 가져오면 된다.
sameSeriesPosts {
frontmatter {
title
slug
}
}
}
}
`;이렇게 하면 아래처럼 글 상세 페이지에 시리즈의 글 목록을 넣을 수 있다.
2.4.3. 상세 코드
위 코드 조각들은 생략된 부분이 있으므로, 코드 전문을 보고 싶다면 아래를 참고하자.
3. 다음
이로서 시리즈 기능을 구현해보았다. 다음으로 구현 및 정리할 것들은 아래와 같다.
- 댓글 기능 구현
- 코드블록 문법 하이라이팅 기능 구현
- 글의 목차 기능 구현
- 임시글 기 능 구현
- GitHub Pages 배포
- 등등
순서는 미정이다.