# 마크다운 파일을 HTML로 보여주기
- 목적: 학습용 개인 프로젝트
- 내용: 내가 만든 웹 페이지에서 마크다운 파일의 내용이 표시되도록 만들어보기
- 사용: 구글 제미나이, HTML, CSS, Javascript, 라이브러리(marked.js)
이번 글은 이 글을 읽고 있는 페이지를 만든 방법에 대한 기록이다. 처음에는 티스토리 블로그 같은 것을 운영해볼까 했다가 여러가지 이유로 몇 년동안 시간만 쏟아부었던 기억이 있기에, 어차피 기록용이라면 포트폴리오 홈페이지에서 함께 보이도록 하는 것도 좋을 것 같았다.
그래서 깃허브 레포지토리 첫 화면에서 readme.md 파일의 내용이 표시되는 것처럼, 내가 만든 웹 페이지에서 마크다운 파일의 내용이 표시되도록 만들어보기 도전!
마크다운 파일을 HTML로 렌더링하기 위한 방법은 클라이언트 렌더링과 서버 렌더링이 있는데, 제미나이에게서 현재 내가 할 수 있는 범위에서는 클라이언트 렌더링이 수월할 것이라고 추천 받았다.
*클라이언트 렌더링: 클라이언트인 웹 브라우저에서 자바스크립트를 사용하여 마크다운 파일을 HTML으로 변환하는 것
마크다운 파일 → 웹 서버에서 일반 텍스트로 가져옴 → 자바스크립트 라이브러리(ex: marked.js)가 텍스트를 파싱 → HTML요소로 변환 → DOM에 삽입
이 방식을 사용하면 서버 부하가 적고 동적인 콘텐츠 로딩에 유리함 등 여러 장점이 있지만 사실 개발 초보 수준인 나에게는 크게 와닿지 않았고, 단점 중에 SEO에 불리할 수 있다는 점이 마음에 걸렸으나 포트폴리오용 홈페이지라 가볍게 접근해보고 나중에 실력이 좋아진다면 Node.js를 사용하는 서버 렌더링으로 수정하는 쪽으로 정했다.
우선 라이브러리인 marked.js의 CDN을 <script> 태그를 통해 불러온다.
html
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="../js/blog-script.js"></script>blog-script.js 파일에는 제미나이의 도움으로 마크다운 파일을 읽고 HTML로 변환하여 페이지에 표시해주는 로직을 넣었다. 그 내용은 아래와 같다.
목록에 있는 글 제목을 클릭 → 클릭된 링크의 data-post-file 속성에서 글의 파일명(.md)을 가져온다 → fetch() API로 마크다운 파일의 내용을 비동기적으로 불러온다 → 마크다운 파서 라이브러리로 가져온 마크다운 파일을 HTML로 변환한다 → 변환된 결과를 내가 지정한 영역에 삽입한다
나는 자바스크립트 로직을 작성할줄은 모르지만 제미나이와의 대화를 통해 내가 의도한 대로 만들어졌다. 하지만 물론 이후에 예상치 못한 에러나 작동 오류가 발생해서 제미나이와 한참을 씨름했다.
예를 들어,
- 다른 제목을 클릭하면 마크다운의 내용도 바뀌어야 하는데 바뀌지 않는 문제 → HTML에서 ID 중복 수정, 더 넓은 범위의 부모 요소에 위임해서 해결
- 내용은 표시되지만 마크다운 문법이 적용되지 않아서 스타일링이 없는 문제 → 마크다운의 스타일을 CSS에서 다시 한번 입혀주어야 했다
- vscode의 프리뷰 창에는 보이던 이미지가 웹 페이지에서는 보이지 않는 문제 → 이미지 폴더의 위치를 브라우저가 보고 있는 위치로 수정해야 했다(ex: html 파일이 있는 폴더)
이렇게 완성된 것이 지금 이 글을 읽고 있는 블로그 페이지.
디자인이나 글 작성에 대해 아쉬운 점이 너무 많긴 하지만 천천히 조금씩 수정해나가야겠다.