개요

포트폴리오 웹사이트를 업데이트하다가 수동으로 날짜를 업데이트하고 있는 나의 모습이 제법 짜쳐서 구현해 본 자동 업데이트 기능에 대한 내용이다.

서론

내 포트폴리오 웹사이트 우측 상단엔 아래 이미지와 같이 포트폴리오를 업데이트한 날짜를 표시하고 있다. 해당 포트폴리오가 어느 시점까지의 나의 이력이고, 또 지속적으로 관리하고 있다라는 것을 어필하기 위해 넣은 요소였다.

해당 요소를 넣으면서 날짜 업데이트를 자동화하면 좋을 것 같다는 생각을 했지만, 빠른 구현을 위해 일단 하드코딩하고 추후 업데이트가 잦아지는 시점에 개선해보고자 했다.

그렇게 시간이 좀 지나고 해당 날짜를 수동으로 수정하고 있는 내모습을 발견하게 되는데..! 자, 이제 때가 됐다.

구현 과정

원리는 간단하다. git hooks의 pre-commit을 사용해서 작업 후 커밋할 때마다 자동으로 pre commit 되도록 한다.

🧑‍💻_ Git Hook? pre-commit?
Git Hook는 git에 이벤트가 발생했을 때 실행되는 스크립트이다.
pre-commit은 Git Hooks 중 하나로, 사용자가 커밋을 실행하기 전에 자동으로 실행되는 스크립트이다. 커밋 직전의 snapshot을 사용한다.
Git Hook을 사용하면 효율적인 작업 자동화가 가능하다.

구현 절차는 다음과 같다.

1. 컴포넌트에 변수 선언
2. Shell Script 생성
3. Git Hook(pre-commit) 설정

하나씩 살펴보자.

01. 컴포넌트에 사용할 변수 선언

pre-commit시 사용할 변수 선언 후 빈 문자열을 할당한다.
(어차피 pre-commit 과정에서 해당 값은 커밋 날짜로 바뀔 거라 아무 문자열이나 할당해도 상관 없다.)

코드 예시

const LAST_UPDATED_DATE = '';

const IntroContents = () => {
  return (
    <div>
      <p>Frontend Developer.</p>
      <p>2024 | Portfolio</p>
      <p>updated. {LAST_UPDATED_DATE}</p>
    </div>
  );
};

export default IntroContents;

02. Shell Script 생성

pre-commit 단계에서 실행할 Shell Script를 작성했다.
프로젝트 루트에 updateDate.sh 파일을 만들고 아래와 같이 날짜를 업데이트해주는 스크립트를 넣어줬다.

적용 코드

#!/bin/bash

# 날짜 포맷 지정
DATE=$(date +"%y. %m. %d")

# HTML 파일에서 날짜 부분을 찾아 업데이트
sed -i "" "s/const LAST_UPDATED_DATE = '.*'/const LAST_UPDATED_DATE = '$DATE'/" src/components/Intro/IntroContents.tsx

# 변경된 파일 스테이징
git add src/components/Intro/IntroContents.tsx

권한 부여

다음 명령어를 통해 작성한 셸파일에 대한 권한을 부여해 줬다.
스크립트 실행에 대한 권한을 부여해줘야 해당 pre-commit 시 스크립트를 실행할 수 있다.

chmod +x updateDate.sh

03. Git Hook 설정

팀 프로젝트일 경우 husky의 pre-commit을 통해 git hook을 설정하면 설정한 git hook을 팀원들과 함께(일관되게) 사용할 수 있다.
나 같은 경우 개인 포트폴리오 프로젝트라 husky를 도입하지 않았기 때문에, .git/hooks 폴더에 pre-commit 파일을 생성해서 git의 pre-commit 훅을 직접 설정해 줬다.

.git 폴더 찾기

pre-commit 파일 생성을 위해 먼저 .git 폴더 위치를 알아야 한다. 일반적으로 .git 폴더는 숨겨진 폴더이다.

프로젝트 디렉토리에 위치한 후 아래 명령어를 입력하면 다음과 같이 .git 폴더가 존재하는 걸 확인할 수 있다.

ls -a

pre-commit 파일 생성

아래 과정을 통해 pre-commit 파일을 생성하고 vsc로 작성할 수 있도록 파일을 열어보자.
.git/hooks 폴더로 이동

cd .git/hooks

pre-commit 파일 생성

touch .git/hooks/pre-commit

pre-commit 파일 열기

code pre-commit

파일을 열었다면, pre-commit 단계에서 ./updateDate.sh 스크립트가 실행될 수 있도록 아래와 같이 설정해준다.

#!/bin/bash

./updateDate.sh

날짜를 포맷팅하고 업데이트하는 스크립트를 해당 파일에 집적 입력해도 동작하지만, 추후 유지보수성을 고려해 위와같이 별도 스크립트를 구성하고, 해당 스크립트를 불러다가 pre-commit 단계에 실행 방법을 택했다.

권한 부여

Shell Script와 마찬가지로 pre-commit 파일 실행에 대한 권한 또한 필요하다.

chmod +x pre-commit

자, 이제 모든 준비를 끝마쳤다!
글이 많아 자칫 복잡하게 느껴질 수 있지만 사실 간단하다.

결론

포트폴리오 작업 후 여느때와 같이 commit & push하여 배포했고, 업데이트 날짜가 커밋 날짜로 자동 갱신되는 것을 확인할 수 있었다.
더이상 업데이트 할 때마다 수동으로 날짜를 업데이트 해주지 않아도 된다!

해당 구현을 통해 Git Hook과 pre-commit 개념에 대해 알아볼 수 있었고, 직접 적용까지 해봄으로써 추후 다른 케이스에서 자동화가 필요할 때도 잘 적용해 볼 수 있겠다.

참고 자료

• https://techblog.woowahan.com/2530/
• https://git-scm.com/book/ko/v2/Git%EB%A7%9E%EC%B6%A4-Git-Hooks