🧐 정적 데이터 관리 및 마크다운 파싱

데이터를 코드 자체에 직접적으로 넣어주는 것보다는 데이터만을 관리할 정적인 파일을 불러와서 사용하는 것이 더 좋을 것 같다고 생각해서 그것을 실행한 방법을 작성하는 포스트입니다.

HTML이랑 JavaScript에 데이터를 넣어서 사용할 수는 있겠지만 데이터 따로 화면을 구성하는 코드 따로 설계하는 게 유지ㆍ보수 측면에서도 더 좋다고 판단해서 따로 markdown형식의 파일들에 정적인 데이터를 넣어두고 가져와서 사용합니다.

🤜 파일과 front-matter 읽기

1. 설치

# "front-matter"를 파싱해서 객체 형태의 데이터로 변환해줍니다.
npm i gray-matter

2. 사용 예시

• markdown.md

---
title: 대충 제목
skills: ["HTML", "CSS"]
project: {
  name: "Blegram",
  description: "대충 내용"
}
---

**대충 본문 내용**

import { readFile } from "fs/promises";

(async () => {
  // 여러 파일을 읽으면 동시에 처리해주기 위해 promise사용
  const markdownFilePromise = readFile("./src/markdowns/cover.md");
  const [markdownFile] = await Promise.all([markdownFilePromise]);
  // JSON.parse(), JSON.stringify()을 사용하는 이유는 시간값이 제대로 못읽어서 오류가 발생하기 때문
  const result = JSON.parse(JSON.stringify(matter(markdownFile));
  /*
   * result에는 여러 값이 있지만 사용했던 것만 기재하겠음
   * result.data => { title: "대충 제목", skills: ["HTML", "CSS"], project: { name: "Blegram", description: "대충 내용" } }
   * result.content => "\r\n**대충 본문 내용**"
   */
})();

🤛 마크다운 파싱

1. 설치

# `markdown`형식으로 입력받은 텍스트를 `HTML`형식으로 파싱하기 위해 사용합니다.
npm i remark-parse remark-html unified

2. 예시

// 직접 실험하려면 "type": "module"로 변경하기
import remarkHtml from "remark-html";
import remarkParse from "remark-parse";
import { unified } from "unified";

const markdown = `# 제목
## 소제목
**강조**
[링크](https://naver.com)`;

(async () => {
  const { value } = await unified()
    .use(remarkParse)
    .use(remarkHtml)
    .process(markdown);

  console.log(value); 
  /**
   * '<h1>제목</h1>\n' +
   * '<h2>소제목</h2>\n' +
   * '<p><strong>강조</strong>\n' +
   * '<a href="https://naver.com">링크</a></p>\n'
   */
})();

🤝 프로젝트 적용 예시

• src/markdowns/skills.md

---
skills: {
  HTML/CSS: "최대한 시멘틱 구조를 지키기 위해 노력하며, 순수한 CSS를 먼저 이해하고 전처리기나 프레임워크에 관해 공부합니다.",
  JavaScript: "[실행 컨텍스트, 클로저, 호이스팅, 스코프 체인](https://velog.io/@1-blue/%EC%8B%A4%ED%96%89-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%8A%A4%EC%BD%94%ED%94%84-%EC%B2%B4%EC%9D%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85-%ED%81%B4%EB%A1%9C%EC%A0%80%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C), [프로토타입](https://velog.io/@1-blue/%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85-prototype) 등의 알아야 할 기본 자바스크립트에 대한 개념을 충분히 이해하고 있습니다.\n 또한 배열 메서드들, destructuring, spread operator, [Promise, async, await](https://velog.io/@1-blue/Promise-async-await) 등을 능숙하게 사용할 수 있습니다.",
  TypeScript: "타입과 인터페이스 선언과 기본적인 타입들에 대해서 이해하고 있으며, React.js와 Next.js에서 사용해본 경험이 있습니다.",
  React.js: "[Virtual DOM을 이용한 성능 개선과 컴포넌트를 이용한 코드 구현에 대해 이해](https://velog.io/@1-blue/React%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C#-react%EC%9D%98-%EC%82%AC%EC%9A%A9-%EC%9D%B4%EC%9C%A0)하고 있습니다.\n또한 Hook 기반으로 개발하는 것에 익숙하며, 기본적인 Hook에 대한 이해가 있습니다.",
  Next.js: "SSR과 SSG에 대한 사용 경험이 있으며, 어떤 것을 사용할지 스스로 판단할 수 있습니다.\n또한 이미지 최적화, 라우팅 처리, 간단한 API들을 사용해본 경험이 있습니다.",
  Node.js: "서버 구현(Express), ORM([sequlize](https://velog.io/@1-blue/sequelize), prisma), auth([passport](https://velog.io/@1-blue/passport))에 대한 경험이 있습니다.\n또한 [쿠키와 세션](https://velog.io/@1-blue/%EC%BF%A0%ED%82%A4%EC%99%80-%EC%84%B8%EC%85%98)에 대해 이해하고 있습니다.",
  Mysql: "DDL, DCL, DML에 대한 경험이 있으며, 간단한 SQL을 작성하거나 보고 이해할 수 있습니다. ( [mysql 정리](https://velog.io/@1-blue/mysql) )",
  Git/GitHub: "[Git과 GitHub](https://velog.io/@1-blue/Git%EA%B3%BC-GitHub-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC)을 이용한 협업 경험이 있으며, Git-Flow 방식을 이해하고 있습니다.",
  Trello: "개발 일정 관리를 위해 사용하며, 협업을 위해 사용한 경험이 있습니다."
}
---

# ⚒️ Skills 🛠️

• 적용 예시 ( 실제는 파일이 나눠져있고 내용도 더 있어서 주요 내용만 추려서 작성한 예시 )

(async () => {
  // 마크다운 파일 읽기
  const skillsFilePromise = readFile("./src/markdowns/skills.md");
  const [parsedMarkdownSkills] = await Promise.all([parsedMarkdownSkillsPromise]);
  
  // 읽은 파일 파싱하기 ( front-matter )
  // "content"에 마크다운 내용, "data"에 front-matter가 들어가 있음
  const parsedSkills = JSON.parse(JSON.stringify(matter(skillsFile)));
  
  // 파싱한 파일의 front-matter에서 다시 마크다운 형식 파싱
  const promiseArray = Object.keys(parsedSkills.data).map((skill) =>
    unified().use(remarkParse).use(remarkHtml).process(skills[skill])
  );
  
  // 결과
  const descriptions = (await Promise.all(promiseArray)).map((v) => v.value)
})();

// 아래와 같은 형식으로 html 그대로 랜더링 ( with "dangerouslySetInnerHTML" )
return (
  <div
    className="description"
    dangerouslySetInnerHTML={{ __html: descriptions[0] }}
  />
)

😥 아쉬운 점

데이터를 넣을 마크다운 파일을 작성하면서 그냥 마크다운 형식으로 작성해서 그대로 HTML로 파싱한 후에 화면에 렌더링하고 싶었지만 중간에 스타일도 넣고, 이벤트도 등록하는 등의 많은 작업을 처리해줘야 하기 때문에 파싱한 HTML을 그대로 넣을 수가 없어서 두 번의 파싱과정(markdown 파싱 -> markdown의 front-matter 파싱)을 거쳐서 코드가 많이 복잡해보임

• 아래와 같이 입력하고 파싱해서 사용하고 싶지만 한계가 있어서 더 복잡하지만 위의 방법을 사용함

# ⚒️ Skills 🛠️
## HTML/CSS
최대한 시멘틱 구조를 지키기 위해 노력하며, 순수한 CSS를 먼저 이해하고 전처리기나 프레임워크에 관해 공부합니다.

## JavaScript
[실행 컨텍스트, 클로저, 호이스팅, 스코프 체인](https://velog.io/@1-blue/%EC%8B%A4%ED%96%89-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%8A%A4%EC%BD%94%ED%94%84-%EC%B2%B4%EC%9D%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85-%ED%81%B4%EB%A1%9C%EC%A0%80%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C), [프로토타입](https://velog.io/@1-blue/%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85-prototype) 등의 알아야 할 기본 자바스크립트에 대한 개념을 충분히 이해하고 있습니다.\n 또한 배열 메서드들, destructuring, spread operator, [Promise, async, await](https://velog.io/@1-blue/Promise-async-await) 등을 능숙하게 사용할 수 있습니다.

... 나머지 생략