Overview
수년간 각종 앱을 옮겨 다니던 일기 데이터를 Markdown 포맷으로 바꿔 개인 저장소로 옮기고, HTML으로 전용 뷰어를 제작한 기록이다. 나에게 의미 있는 과거의 기억을 고이 모셔놓고 이따금씩 찾아가는 공간이라는 점에서 Journal Shrine이라는 이름을 붙였다.
결과물: Journal Shrine
계기: 일기 어플 유목민의 결심
사전작업
원하는 곳에 폴더를 만든다. 컴퓨터일수도, USB일수도.
일기를 어느 단위로 쪼갤지 정한다 (e.g. 1개월).
파일 네이밍 컨벤션을 정립한다 (e.g. 일반 일기는 YYYY-MM.md 꿈 일기는 YYYY-MM-d.md).
파일 내부 컨벤션을 정립한다 (e.g. 날짜는 # M.DDh1로 표기, 강조되는 문단은 >blockquote 사용). 100% 본인의 편의를 위한 거니까 규칙에 집착하지 말고 단순하게 유지해야 한다.
정립한 컨벤션에 맞춰 기존 일기 텍스트들을 정리한다. vscode에 마크다운 미리보기 모드로 스타일이 적용된 모습을 미리 확인할 수 있다. 노가다 작업이지만 과거를 돌아볼 기회로 이용하자.
journal-shrine/
├─ node_modules/
├─ 2020-01.md
├─ ...
├─ 2024-12.md
├─ version.md
├─ index.html
├─ styles.css
├─ script.js
├─ favicon.png
├─ package-lock.js
├─ package.js
index.html
head에 css와 favicon을, body에 js를 링크한다.
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="stylesheet" href="styles.css">
...
<script src="script.js"></script>
header에 뷰어의 이름을 적어준다.
그 아래 div에 nav와 main을 만든다.
nav에는 details와 summary 태그를 사용해 연도별로 펼칠 수 있는 버튼을 만들어주고, 그안에 ul와 a 태그로 마크다운 파일의 이름을 하드코딩한다.
main에는 컨텐츠가 들어갈 div를 넣어준다.
<div id="content"></div>
marked라는 마크다운을 HTML로 바꿔주는 라이브러리를 다운받고, 링크한다.
<script src="node_modules/marked/marked.min.js"></script>
script.js
function loadMarkdown(filename) {
fetch(filename)
.then(response => response.text())
.then(text => {
document.getElementById('content').innerHTML = marked.parse(text);
})
}
파일을 fetch해서 .text()하고 marked.parse()해서
아까만든 content에 innerHTML로 넣어준다.
다시 index.html로 돌아와서 nav의 링크들에 loadMarkdown()을 넣어준다.
<a onclick="loadMarkdown('2024-01.md')">2024-01.md</a>
깃헙에 올리지 않으니까 수정 기록은 version.md에 수동으로 남기고 header의 뷰어 이름에 링크를 걸었다.
백업과 암호화
2025.4.23: 원래 드라이브에 올리지 않을 생각이었는데 그러다 교환학생 중 노트북 도난당하면 끝장인 거니까 구글 드라이브에 저장하고 폴더를 cryptomator로 잠가서 쓰기로 했다.