Next.js 블로그 프로젝트 - YAML

문제 상황

---

---
title: '리엑트 강의 정리 1'
subtitle: 'React props, jsx'
date: '2022-05-29'
category:'React, Node.js'
---

 다음과 같이 mdx파일에 frontmatter를 작성하여 포스팅한다.

[
	{
	  title: '리엑트 강의 정리 2',
	  subtitle: 'React event, jsx',
	  date: '2022-06-05',
	  category: 'React'
	}, ...
]

frontmatter은 추후 다음과 같은 배열 객체 형식으로 읽혀진다.

 

❗️나는 포스트 마다 두 개 이상의 category를 작성하여 중복이 없는 카테고리 배열을 받고 싶었다.

 

내가 생각했던 방법:

1. category:'React, Node.js' 쉼표로 카테고리를 작성

2. 위 문자열을 쉼표(,)를 기준으로 검사하여 split() 하고 flat()으로 배열을 풀어준 뒤 중복값을 없애준다.

export function sortCategory(data: Array<PostType>) {
     const categories = data
         .map(({ category }) => {
             if (category.includes(',')) {
                 return category.split(',');
             }
             return category;
         })
         .flat();
     return Array.from(new Set(categories));
}

내가 원하는 배열을 받아왔다는 점에서 목표를 달성했지만 문제점이 생겼다.

 

카테고리에 해당하는 포스트 페이지를 만들려면 배열에 있는 내용과 포스트에 있는 카테고리를 비교해서 포스트 내용을 가져올 수 있어야 한다. 배열과 포스트를 비교할 때 또 다시 쉼표를 기준으로 배열을 만드는 과정이 필요하고 매우 복잡해진다.

 

frontmatter를 문자열이 아니라 배열로 불러올 수 있다면 좋을 거 같다는 생각이 들었다.

YAML

---

해결을 위해 mdx문서를 다시 살펴봤다.

mdx 문서 frontmatter 부분을 읽어보면 YAML frontmatter를 사용한다고 한다.

https://mdxjs.com/guides/frontmatter/

 

프로젝트를 처음 만들었을 당시에 나는 YMAL에 대해 자세히 알아보지 않은 채 문서에 써져있는 코드 예시들만 보고 frontmatter를 작성했다 ☹️

gray-matter 사용법 읽었을 때도 대충 흠~~ 저렇게 쓰면 저렇게 뚝딱 나오는군~~하고 그냥 넘어갔었음..🤬

 

그렇다면 Yaml이란 무엇인가?

🍎 Yaml이란 Xml, Json과 같은 데이터 직렬화 언어이다.

Xml과 Json은 들어본 적이 있었는데 Yaml은 이번에 처음 보았다.

Ain’t A Markup Language이라는 뜻이다.

 

사진 출처: https://www.inflearn.com/questions/16184

같은 데이터 예시에 대해 Yaml Json Xml는 어떻게 다르게 표현하는지 한눈에 알아보기 쉽게 정리한 블로그 링크가 있다.

 

간단한 YAML 문법 설명

• 시퀀스(Sequence): 배열, 리스트 대쉬-와 스페이스(공백)로 시작하여 시퀀스를 작성한다.
• 매핑(Mapping): key value 쌍
• 스칼라(scalar): 정수, 문자열, 날짜..

 

매핑(Mapping)

다음과 같은 형식으로 매핑하여 데이터를 정의한다.

---
menu: 'bread'
cost: '$1'

{
    menu: "bread",
    cost: "$1"
}

 

시퀀스(Sequence), 주석

---
# 카페
menu: 
    - 'bread'
    - 'cake'
cost: '$1'

{
    # 카페
    menu: ["bread", "cake"],
    cost: "$1"
}

 

 

해결

---

---
title: '리엑트 강의 정리 1'
subtitle: 'React props, jsx'
date: '2022-05-29'
category:
	- 'React'
	- 'Node.js'
---

위와 같은 방식으로 mdx를 작성해주면 배열을 얻을 수 있다.

 

간단하게 중복만 없애주는 로직만 작성하면 된다

export function getCategoryData(data: Array<PostType>) {
    const categories = data
        .map(({ category }) => {
            return category;
        })
        .flat();
    return Array.from(new Set(categories));
}

//사용
export const getStaticPaths: GetStaticPaths = async () => {
    const allData = await getAllPostData();
    const categoryData = getCategoryData(allData);
		//...
}

 

문서를 꼼꼼히 읽지 못한 탓도 있었고 yaml이 언어인지 몰라서 키워드를 제대로 뽑아내지 못한 탓도 있었던 것 같다.

한주 내내 매달린 것 치고 해결방법이 매우 간단하여 허탈했지만  yaml에 대해 알게 되어 좋았다.

 

ref 

---

https://subicura.com/k8s/prepare/yaml.html#%E1%84%80%E1%85%B5%E1%84%87%E1%85%A9%E1%86%AB%E1%84%86%E1%85%AE%E1%86%AB%E1%84%87%E1%85%A5%E1%86%B8

YAML 문법

https://www.redhat.com/sysadmin/yaml-beginners

YAML for beginners

https://yaml.org/spec/1.0/#id2570745

YAML Ain't Markup Language (YAML) 1.0