만들고 있는 자바스크립트 프로그램 목록을 GitHub Page에 올려두었다. index.html 파일을 직접 수정하고 parcel로 묶은 다음에 커밋한다. 목록이 10개를 넘어서자 자동화하고 싶어 졌다. React, Vue 같은 프레임워크 혹은 라이브러리를 사용할까? 고민했지만 더 간단한 방법으로 해결했다. index.html 파일에서 반복되는 부분만 JSON을 사용해서 만들었다. 아래 부분이 반복되는 HTML 코드다. 이런 코드가 10번 정도 반복된다.
아래 내용으로 이루어진다.
- 제목
- 설명
- 링크들
- 이미지
이 내용을 JSON 파일로 만들었다. 아래는 그 중 일부다.
다음은 위의 JSON 데이터를 사용하여 HTML 코드를 만드는 스크립트다.
템플릿 엔진에서 유명한 mustatch를 사용했다. 다음은 글 목록에 사용할 CSS 코드다.
아래의 명령으로 index.html 파일을 만든다.
위에서 사용한 template.html 파일은 목록을 포함할 HTML, CSS 코드가 들어 있고 makeArticle.js에서 사용할 "{{ articles }}" 문자열도 포함되어 있다. 이 문자열을 글 목록으로 대체한다. 생각보다 코드가 길어지긴 했지만 index.json 파일만 수정하면 목록이 변경됨으로 마음이 편하다.
