Grasp The Gist

# 지킬에 깃헙 지스트(gist) 기능 추가하기

깃헙은 거대한 소셜 개발 플랫폼입니다. 그 핵심 기능은 소스 코드 관리시스템, 깃(git)이지만, 정말 유용한 기능이 지스트(gist) 입니다. 깃이 각 .git 폴더를 가지는 프로젝트 단위로 소스 코드 관리를 잘하는 툴이라면 지스트는 목적에 맞는 코드 조각만 가볍게 공유하는 기능입니다. 이에 더해 버전관리, 댓글을 통한 피드백, 고유 주소 생성 등도 빼놓을 수 없죠. 스택 오버플로우 같은 QA 사이트에서 질문의 답변으로 지스트 코드를 링크하는 일도 심심치 않게 볼 수 있습니다.

이 글에서는 지킬 사이트에 지스트를 내장(embed) 하는 방법을 간단하게 알아보겠습니다.

# 상황: 쉘 스크립트 공유하기

특정 기간 동안 발생한 로그를 처리하는 쉘 스크립트를 만들었습니다. 제품에 따라 남기는 로그의 이름 형식은 다르지만, 대체로 로그 파일은 이름에 날짜를 포함하기 때문에 시작일과 종료일을 입력받아서 해당 기간의 로그를 처리하는 스크립트입니다.

#!/bin/bash

datediff() {
    d1=$(date -d "$1" +%s)
    d2=$(date -d "$2" +%s)

    if [ ${d1} -gt ${d2} ]; then
        echo $(( (d1 - d2) / 86400 ))
    else
        echo $(( (d2 - d1) / 86400 ))
    fi
}

# ASSERT: args
if [ $# -ne 2 ]; then
    echo "usage: scanlog.sh BEGIN_DATE END_DATE"
    echo "       ex) scanlog.sh 20170101 20170110"
    exit $E_BADARGS
fi

BEGIN_DATE=$1
END_DATE=$2

DAYS=`datediff ${BEGIN_DATE} ${END_DATE}`

echo Process $((DAYS + 1)) "days of logs: "${BEGIN_DATE} "~" ${END_DATE}
echo

for i in `seq 0 ${DAYS}`;
do
    dt_date=`date -d "${BEGIN_DATE}+${i} days" +"%Y%m%d"`;
    echo " * "${dt_date}".log processing..."
    # your code here
    # ./your_script.sh error_${dt_date}.log
done

옆의 동료에게 이 코드를 어떻게 공유하는 것이 좋을까요? 메신저로? 이메일로? 위키 페이지를 새로 만들어서?지스트를 통해 공유해보시죠.

# 지스트 만들기

가장 먼저 깃헙 (opens new window)에 로그인 하고, 지스트(gist) (opens new window) 메뉴를 눌러서 이동합니다.

conda venv

화면은 따로 설명하기가 민망할 정도로 깔끔하고 직관적입니다.

  1. 이전에 작성한 지스트 목록을 보여줍니다.
  2. 한줄 짜리 간단한 코드 설명을 작성할 수 있습니다.
  3. 코드 파일명과 코드를 입력합니다. 코드 파일명의 확장자에 따라서 코드 하이라이트가 바로 적용됩니다.
  4. 원하는 공유 범위에 따라 비공개 '지스트 생성(Create secret gist)' 혹은 '공개 지스트 생성(Create public gist)' 버튼을 눌러 완료 합니다.

코드를 입력합니다. 아래 화면에서 보듯이 확장자를 입력하는 순간 코드 하이라이트가 적용되는 것을 확인할 수 있습니다.

conda venv

이제 '공개 지스트 생성(Create public gist)' 버튼을 눌러서 저장하면, 공유할 준비가 끝났습니다. 이제 스택 오버플로우에 지스트 url을 멋있게 던져주세요!

# 지킬에 지스트 내장하기

지킬에서 지스트에 저장한 코드를 보는 방법은 매우 간단합니다. Embed가 선택되었을 때 표시되는 코드를 복사해서 그대로 마크다운 포스트에 넣어주면 끝납니다. 지킬 마크다운은 HTML 태그를 그대로 해석해줍니다.

conda venv

<script src="https://gist.github.com/KwangYeol/920bc511985c9233a9fff093b1ef6255.js"></script>

하지만 좀 더 지킬다운 해결방법도 있습니다. jekyll-gist 젬(gem)을 설치하는 방법입니다. 젬을 설치하고

$ gem install jekyll-gist

_config.yml에 다음 설정을 추가합니다.

gems:
  - jekyll-gist

이제 HTML 태그가 아닌 지킬 마크다운 문법으로 지스트를 추가할 수 있습니다.

{{ "{% gist KwangYeol/920bc511985c9233a9fff093b1ef6255 " }}%}

이때 gist 다음에 오는 고유 문자는 해당 지스트의 웹 URL에서 https://gist.github.com/ 다음 부분입니다. 예를들어 URL이 https://gist.github.com/KwangYeol/920bc511985c9233a9fff093b1ef6255 였다면 KwangYeol/920bc511985c9233a9fff093b1ef6255 만 취해서 gist 다음에 넣어주면 모든 과정이 끝났습니다.

# 마무리

사실 지킬 자체에 코드를 삽입하고 하이라이트 해주는 기능이 잘 되어있기 때문에, 굳이 지스트 삽입하지 않아도 기능상 문제는 없습니다. 하지만, 지스트의 코드 하이라이트가 줄 번호 표시를 비롯해서 코드를 살펴보고 공유하는 기능을 충실히 구현하고 있음을 확인하실 수 있습니다.

마지막으로 처음 작성한 스크립트를 지스트에서 어떻게 표시하는지 직접 확인해보시기 바랍니다.

Last Updated: 3/23/2020, 11:10:33 PM