Bob Hwang

짧은 코드를 자랑한다.

커버리지를 물어보면 주눅이 든다.

당장 필요한지 물어보면 머뭇거린다. 진행시켜?

거꾸로, 서비스 코드를 고쳐야 하는 경우가 발생한다.

만들었지만 아무도 사용하지 않을 수 있다. 있었는데 없다.

다른 사람에게 이야기를 꺼낼 때 당당하지 못하고 움츠러든다.

--

--

Photo by Icons8 Team on Unsplash

서버 시간이 필요할 때가 있다. HTTP Header의 Date를 사용하여 현재 서버 시간을 읽을 수 있다. 아래 코드를 사용한다.

브라우저에서

fetch('/', { method: 'HEAD' })
.then((r) => {
console.log(r.headers.get('date'))
})

Node에서

const axios = require('axios')
axios
.head('https://afrontend.medium.com/')
.then(res => {
console.log(res.headers.date)
})
.catch(error => {
console.error(error)
})

그리고 쉘에서도 읽을 수 있다.

curl --HEAD afrontend.medium.com 2>&1 | grep Date
Date: Fri, 12 Nov 2021 03:23:23 GMT

--

--

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 파일만 수정하면 목록이 변경됨으로 마음이 편하다.

--

--