[Git] Github Actions를 활용해서 README.md 꾸미기

본인의 계정명과 동일한 repository를 만들어 README.md를 작성해서 프로필을 만드는 기능이 발표되고, 많은 개발자들이 이 기능을 사용해서 본인의 Github 프로필을 꾸민다. 세상에 존재하는 개발자만큼 프로필을 꾸밀 수 있을텐데, 오늘 포스팅에서는 최근 알게된 방법으로 진행했던 프로젝트 소개를 깔끔하게 정리한 경험을 공유하려고 한다.

 

프로젝트를 조금 더 예쁘게 정리하고 싶어...

• AS-IS

    - 진행했던 프로젝트들에 대해 사용한 기술 스택과 간단한 설명, 그리고 수행한 역할에 대해 정리했었다.

    - 여러 프로젝트가 있어 굉장히 길어지고 가시성이 좋지 못했다.

    - Repository를 정리하며 해당 내용들을 정리했기 때문에 더 이상 이렇게 정리할 필요가 없다고 느껴졌다.

 

이런 이유들로 프로젝트를 정리할 방법을 찾다가 profile_stack을 발견하여 적용하기로 하였다.

이 repository는 프로젝트를 자신의 기술 스택(Tech stack) 별로 정리할 수 있는 기능을 제공한다. 특이한 점이 하나가 있었는데 바로 Github Actions를 사용한다는 것이었다.

 

Github Actions ?

Github Actions는 개발 생명주기에서 수행되는 활동을 자동으로 처리하도록 하는 서비스라고 할 수 있다. 일종의 CI/CD(Continous Integration/Continous Development)를 지원해주는 도구라고 생각하면 정확하진 않지만 이해가 쉬울 것 같다. 공동 작업을 진행할 때 동료 중 한 명이 본인이 맡은 작업을 마치고 PR을 날리게 되면, 해당 PR이 정확히 수행하는지 여러 테스트 과정을 거치게 된다. Github Actions를 활용하면 PR을 날리면 자동으로 지정해둔 테스트를 수행하고, 이후의 지정된 과정을 진행하도록 할 수 있다.

 

어떻게 적용할 수 있는가?

저장소에 사용 방법이 매우 잘 소개되어 있어 적용은 크게 어렵지 않았다. 우선 Github Actions를 사용하기 위해 프로젝트 파일에 .github/workflows 경로를 생성한다. 수행할 작업을 작성하는 부분으로 `yml` 파일을 하나 생성하고 아래와 같이 작성한다.

 

name: Profile Stack

on:
    push:
      branches:
      	- main

jobs:
    profile_stack:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v2
            - uses: Matt-Gleich/profile_stack@master

 

- 작성된 내용을 각각 뜯어보자.

  - name : 수행할 action의 이름이다.

  - on : action이 일어날 상황과 어떤 브렌치에 대해서 수행할 지에 대해서 명시되어 있다. 이 action의 경우 main 브렌치에 대해 push가 진행되었을 때 동작하게 된다.

  - jobs : action에서 수행할 작업이다. 작업 이름인 profile_stack이 명시되고 어떤 환경(ubuntu-latest) 어떤 과정을 거칠 것인지에 대해서 작성한다. 두 번째 동작이 README.md에 projects 내용을 추가해주는 부분이다.

 

이 작업이 완료되면 repository의 루트 경로로 돌아와서 stack.yml이라는 파일을 하나 생성한다. 이 파일의 경우 프로젝트에 대한 정보를 작성한다. 내용은 아래와 같다.

 

- name: Javascript
  logo: javascript
  url: https://www.javascript.com/
  color: F1E05A
  projects:
          - url:

- 작성한 내용에서 name, logo, url, color는 기술에 대한 내용이다. logo의 경우, 주로 사용되는 용어는 작성해주면 알맞은 로고를 추가해준다.

- 그리고 해당 기술을 사용한 프로젝트가 있다면 projects 하위의 url에 github repository 주소를 추가해주면 된다.

 

이렇게 완료하고 작성한 내용을 올려주면 아래와 같이 Actions에서 수행한 동작들을 확인할 수 있다.

 

---

 

 

완료된 결과 화면이다. 사용한 기술들과 기술들에 대한 프로젝트를 한 눈에 볼 수 있다.

각 프로젝트에 대한 정보까지 담기에는 한정적이기 때문에 이 정도로 정리하는 것으로 만족한다.