JSON 데이터로 HTML 코드 만들기

Bob Hwang
Mar 26, 2021

--

JSON 데이터로 만들어진 HTML

만들고 있는 자바스크립트 프로그램 목록을 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 파일만 수정하면 목록이 변경됨으로 마음이 편하다.

--

--