[Javascript][Node.js] Github actions를 이용해서 README 자동 업데이트하기

프로그래머스 코딩 테스트 문제를 풀고 깃허브 레포지토리에 풀이를 올리는 스터디를 진행하고 있었다.

 

스터디는 아래와 같이 진행된다.

1. 문제를 풀고 통과한다.
2. 통과된 풀이를 [레벨/문제명.js] 파일 형식으로 푸시한다.
3. README에 풀이 링크를 추가한다.

 

매일 하루에 한 문제 이상을 푸는 것을 목표로 했고 위와 같은 행동이 반복되던 찰나 .. 어쩐지 엄청난 귀찮다🤔

 

2번만 수행하면 3번 과정이 자동으로 수행될 수 없을까?

 

README를 작성하는 방식은 아래와 같다

README 작성하기

무작정 풀이 파일을 올리게 되면 문제 개수가 많기 때문에 나중에 다시 찾아보기가 어렵다.

README에 테이블로 정리해놓으면 어느 문제인지 + 어떻게 풀이했는지를 쉽게 확인할 수 있다.

 

README 테이블 형식

- 번호

   - 문제 개수를 파악하기 위해 0번부터 index를 설정해주었다.

- 문제

   - 링크를 누르면 프로그래머스 문제 페이지로 이동한다.

- 풀이

   - 링크를 누르면깃허브에 올라온 풀이 파일로 이동한다. 3번이 바로 이 링크를 추가해주는 과정이다.

 

마크다운으로 보면 아래와 같다.

// README.md
| index | [문제명](프로그래머스에서 해당 문제 링크) | [문제명.js](깃허브에 업로드한 풀이 링크) |

// 예시
// | 2 | [과일 장수](https://school.programmers.co.kr/learn/courses/30/lessons/135808) | [과일-장수.js](https://github.com/minkyung00/programmers-coding-test/blob/main/level-1/과일-장수.js) |

 

문제 탭 : axios로 프로그래머스 문제 가져오기

문제 탭에는 프로그래머스 문제 정보(문제 이름 + 문제 링크)가 작성되어야한다.

하지만 프로그래머스에는 문제가 많기 때문에 url을 일일이 복사 + 붙여넣기 해서 작성할 수 없다.

 

axios 통신을 이용해서 프로그래머스 문제 정보를 가져오자.

// 프로그래머스 문제를 가져와서 title, url 정보만 사용한다.

const getProblems = async PAGE => {
  try {
    const {
      data: { result },
    } = await axios.get(`${API_URL}/?perPage=20&levels[]=${LEVEL}&order=${ORDER_BY}&page=${PAGE}`);

    return result.map(({ id, title }) => ({
      title,
      url: getProblemURL(id),
    }));
  } catch (error) {
    console.log(error);
  }
};

 

1. 프로그래머스 API에 문제 정보를 요청한다.

   - 개발자 도구 > 네트워크 탭에 들어가보면 요청 주소를 바로 알 수 있다.

크롬 개발자도구 > Network > Request URL

 

2. 문제 레벨 / 정렬 방식 / 페이지는 변할 수 있기 때문에 상수로 관리해주었다.

3. README에는 문제 이름 / 문제 url만 사용할 것이기 때문에 해당 정보만 반환해준다.

 

테이블 형식으로 마크다운 작성하기

응답 받은 데이터 중 title, url을 마크다운 테이블 형식으로 변환해준다.

/* 테이블 형식
** | index | [문제 이름](프로그래머스 문제 링크) | [문제이름.js](깃허브에 올라온 문제 풀이)|
*/

const createTable = problems => problems.map(({ title, url }, index) => `| ${index} | [${title}](${url}) |`).join('\n');

 

풀이 탭: 파일 읽고 쓰기

이제 README에서 테이블의 문제 탭은 채워졌다.

풀이 탭을 채우기 위해서는 파일이 존재하면 정보를 추가해주고 없으면 빈칸으로 작성해야한다.

풀이 파일 읽어오기

const getSolvedProblemList = problems =>
  fs
    .readdirSync(`level-${LEVEL}`)
    .map(fileName => ({
      title: formatFileName(fileName),
      fileName,
      url: `${GITHUB_URL}/level-${LEVEL}/${fileName}`,
    }))
    .map(({ title, url, fileName }) => {
      const { title: problemTitle, url: problemUrl } = problems.find(
        ({ title: problemTitle }) => problemTitle === title
      );
      return {
        title: problemTitle,
        url: problemUrl,
        fileName,
        fileUrl: url,
      };
    });

1. level 폴더에 파일을 읽어온다.

    - level-레벨/문제이름.js 구조로 저장된다.

2. 이 때, 풀이 파일의 이름은 문제 이름에 공백이 있으면 -(하이픈)으로 되어있다. formatFileName으로 원래 문제 이름으로 변경해준다.

3. 파일이 존재하는 문제의 문제 이름 / 문제 주소 / 파일 이름 / 파일 주소를 반환한다.

 

README 작성하기

이제 필요한 정보인 문제 이름 / 문제 주소 / 파일 이름 / 파일 주소 를 모두 갖고 있다.

이를 마크다운 문법으로만 변환해주면 된다.

/* problem 객체 정보
** {
**   title: 문제 이름,
**   url: 문제 주소,
**   fileName: 파일 이름,
**   fileUrl: 파일 주소,
** }
*/

const createTable = problems =>
  problems
    .map(
      ({ title, url, ...fileInfo }, index) =>
        `| ${index} | [${title}](${url}) | [${fileInfo?.fileName ?? ''}](${fileInfo?.fileUrl ?? ''}) |`
    )
    .join('\n');

파일 정보가 없는 경우에는 빈 내용으로 두고 파일 정보가 있을 때만 작성한다.

 

최종 README를 작성하면 아래와 같다

const createReadme = async () => {
  const problems = await getAllProblems();
  const solved = getSolveProblemList(problems);

  const content = problems.map(problem => solved.find(({ title }) => title === problem.title) ?? problem);

  const readme = `
## 프로그래머스 코딩 테스트 문제풀이 (2022.11.29 ~)

## 문제

문제는 항상 **최신순**으로 업데이트됩니다.

### Level 1

| 번호 | 문제 | 풀이 |
| --- | --- | --- |
${createTable(content)}
`.trim();

  return readme;
};

1. problems: 문제 탭에 필요한 정보

2. solved: 풀이 탭에 필요한 정보

3. 1번과 2번을 합친 최종 정보

 

3번 정보를 이용해서 마크다운 테이블을 만들고 readme에 삽입해준다.

const build = async () => {
  const readme = await createReadme();
  fs.writeFileSync('README.md', readme, 'utf8');
};

build();

그 후 파일 쓰기를 통해 README.md에 최종 readme 문자열을 작성해준다.

 

자동으로 REAMDE 업데이트하기

아래와 같이 자동화를 수행할 수 있다

1. 문제이름.js 가 push된다.

2. 위에서 만든 README를 작성하는 파일을 실행한다.

yml 파일

github actions를 사용하기 위해서는 설정 파일을 작성해주어야한다.

 

레포지토리의 Actions > Choose a workflow > Node.js 를 참고하면 yml 파일을 쉽게 작성할 수 있다.

 

configure 버튼을 누르면 예시 yml 파일이 나오는데

해당 파일을 참고하여 yml 파일을 작성하였다.

name: update-readme

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - name: Set up Node.js 16.16.0
        uses: actions/setup-node@v3
        with:
          node-version: 16.16.0
      - name: Install dependencies
        run: npm install
      - name: Run Update README.md
        run: node utils/updateReadme.js
      - name: Create README.md
        run: |
          git add README.md
          git config user.name github-actions
          git config user.email github-actions@github.com
          git commit -m "docs: README.md 자동화 업데이트"
          git push

 

성공적인 결과🕺

 

문제 풀이 후 push 하니 바로 자동으로 yml 파일이 실행된다.

yml에 작성한 모든 프로세스가 정상적으로 통과되면 README가 업데이트된다. 꺅!

 

추가 개선사항

README 중복 작성

현재 push를 하면 README를 아예 새로 작성한다.이는 모든 push가 문제 풀이를 업로드하는 것을 가정하고 있다.

 

만약 문제 풀이가 아니라 유틸 함수 리팩토링을 할 경우, README 내용이 변경되지 않는다.

따라서, 이전 README과 현재 README가 동일하다면 파일 작성을 하지 않는 것으로 코드를 수정할 수 있을 것 같다.