깃허브 블로그에 총 단어 수 추적 트래커 넣기

이 블로그에 마지막으로 글을 게시한 것이 2025년 7월 8일이었습니다. 아무래도 블로그 글 쓰기에 동기부여가 되지 않아서, 모든 게시물을 일 단위로 스캔하여 총 단어 수 증가량을 추적하는 위젯을 박아 놓고 계속 보고 있으면 - 깃허브 잔디 심기 하듯 - 조금 동기부여가 될까 싶어 오랜만에 시간을 들였습니다.

요즘은 AI 코딩이 워낙 편해져서, 코드 자체를 구체적으로 어떻게 구성해야 하는지를 쓰는 것이 그리 큰 의미가 있는가 싶기도 합니다. 이후에 시간이 더 생긴다면 세부 코드를 더 업데이트하겠지만, 우선은 어떤 라이브러리와 작업들이 필요했는지, 구체적으로 들여다봐야 했던 항목들은 무엇이 있었는지, 어디에서 막혀서 애를 먹었는지만 간단하게 적어 두면 충분할 것 같습니다.

Backend: Github Actions + Python

이런 작업에 백엔드라는 거창한 이름을 붙이는게 조금 우스운가 싶기도 하지만 어쨌든 백엔드는 백엔드입니다. 목표는 파이썬 코드를 하나 만들어서 특정 폴더에 있는 모든 포스트들을 순회하며 단어 숫자를 세고 그 총합을 날짜별로 저장하도록 하는 것입니다. 코드를 실행한 결과로는 "yyyy-mm-dd": number 꼴의 데이터 엔트리들을 갖는 JSON 파일에 새로운 날짜 키에 대한 데이터가 추가되도록 합니다. Github Actions에서 일 단위로 특정 파이썬 코드를 실행하는 것이 가능하다는 것만 알고 있으면 한살배기 제 딸도 할 수 있는 작업입니다.

필요한 코드는 전부 ChatGPT로 작성했습니다 (성능 좋은 유료 플랜을 쓸 필요도 없습니다). 한 번에 딸깍 하는 데 실패해서 조금 고생을 해야 했던 부분, ‘이걸 모르면서 생성형 AI에 코드를 짜 달라고 하기는 조금 쑥스럽겠다’ 하는 부분만 몇 개 정리합니다.

• Github Actions 워크플로우가 클라우드 환경에서 특정 파이썬 코드를 실행하게 할 수 있습니다.
• Github Actions에서 파이썬 코드를 주기적으로 실행하기 위한 yaml 파일은 리포지토리의 .github\workflows 폴더에 작성하여 저장합니다.
  • workflow_dispatch 항목을 두면 Github Actions 페이지에서 해당 워크플로우를 수동으로 실행할 수 있는 버튼이 활성화됩니다.
• 이 블로그는 한글/영문 포스트를 나누어 작성하고 있기 때문에 JSON 파일도 언어별로 두 개 작성되도록 했습니다.
• 단어 수 세기는 re 모듈의 정규식을 이용해 처리합니다.
• 빈 JSON 파일은 정말로 빈 파일이면 안 되고 중괄호 하나가 필요합니다 (아무것도 없으면 읽기 실패가 발생합니다).

Frontend: Chart.js

방문자 카운터 만들기 작업을 하면서 만들어 둔 차트 양식을 그대로 사용했습니다. 차트 모양을 그려 주고 특정 id를 갖는 DOM에 데이터를 넣어 주는 작업을 하는 자바스크립트 코드가 필요합니다.

• yyyy-mm-dd꼴 문자열 x를 파싱해서 new DATA()로 날짜 객체를 만들려고 하면, x 는 UTC 시간으로 해석되고 이것을 시스템 로컬 시간으로 보정해서 표시해 주려고 합니다. 방문자 카운터의 날짜 기준이 UTC 시간으로 되어 있어서 이 부분이 일관성을 해쳤고, .getUTCMonth()와 .getUTCDate()를 이용해 UTC 변환 월/일을 뽑아낸 다음 문자열로 교체한 다음 축 라벨에 붙이는 식으로 해결했습니다.