백준허브 크롬 확장프로그램 커스텀 방법

코딩 테스트를 준비하기 위해서 코테 문제 풀이 인증 스터디에 참가하게 되었다. 여기서 백준허브라는 크롬 확장자를 새롭게 알게 되었다.

예전부터 사용하던 깃허브 코딩테스트 레포지토리에 해당 확장자를 연결하여 사용하는데.. 세상에? 디렉토리 구조랑 파일명, 그리고 리드미가 생성… 되고 있다! 기존에 사용해오던 구조와 너무나도 달랐기 때문에 나는 바로 커스텀을 할 수 있는 방법을 찾게 되었다.

그리고 해당 글은 나 같이 커스텀하고 싶은 사람들을 위해 글을 적어둔다.

🎨 백준허브 크롬 확장 프로그램 커스텀

🚨 커스텀 방법을 알아보기에 앞서 주의할 점

백준허브 코드를 살펴보면 각 문제풀이 사이트(프로그래머스, 백준 등)의 폴더마다 파일명을 동일하지만 내부 함수명이 좀 다르다. (구조도 조금 다른 것 같기도)

따라서, 프로그래머스가 아닌 경우에는 다음 내용을 참고만 하는 것이 좋다. 실제로 나의 경우에도 백준 사이트만 커스텀한 분의 글을 그대로 따라했다가.. 버그가 발생했다.. 이건 아래 글 참고

그리고 꼭! 아래 글을 끝까지 정독하고 참고하기를 추천한다. 아니면.. 버그를 만날 수 있다.. 그러니 진짜 꼭 끝까지 글을 읽고 참고해야 한다!

그러면 이제 어떻게 백준허브를 커스텀 할 수 있는지 차근차근 살펴보자.

백준허브 깃허브 레포지토리를 fork

아래 링크가 백준허브 깃허브 레포지토리이다. 해당 링크로 접속하여 자신의 깃허브에 fork하면 된다.

🔗 GitHub - BaekjoonHub/BaekjoonHub: 백준 자동 푸시 익스텐션(Auto Git Push for BOJ)

로컬에 해당 fork한 레포를 clone하고 열어 주기

원하는 문제풀이 사이트 폴더의 parsing.js로 이동

나의 경우에는 프로그래머스에서 문제를 대부분 풀이하기 때문에, programmers 폴더의 parsing.js를 수정해줬다.

커스텀하고 싶은 내용 수정 | makeData 함수

이동한 파일의 makeData 함수를 살펴보면 쉽게 커스텀을 진행할 수 있다. 아래는 친절하게 주석으로 작성해두신 내용이다.

  - directory : 레포에 기록될 폴더명
  - message : 커밋 메시지
  - fileName : 파일명
  - readme : README.md에 작성할 내용
  - code : 소스코드 내용

makeData 함수에서 변경하고 싶은 부분을 본인의 입맛에 맞게 수정하면 된다.

나의 경우에는 거의 모든 것을 바꿔줬다. directory, message, fileName을 변경해줬는데, Readme.md는 같이 업로드 하지 않을 것이기 때문에 커밋 메세지에 Date(문제 풀이한 날짜 및 시각)가 포함될 수 있도록 수정해줬다.

이때, Date가 출력되는 포맷도 변경해주기 위해서 해당 폴더의 utils 폴더 내부에 있는 getDateString의 return 값도 변경해줬다.

Readme 업로드 막기 | uploadfunctions.js의 upload 함수

나의 경우에는 Readme.md 파일을 업로드하지 않을 예정이라 아래 코드 한 줄을 주석처리 해줬다. 그리고 이 주석은.. 엄청난 파장을 불러오는데..😱

const readme = await git.createBlob(readmeText, ${directory}/README.md); // readme 파일

확장 프로그램 이름 변경 | manifest.json의 name

커스텀한 내용의 확장 프로그램으로 새롭게 크롬에 설치를 해줘야, 커스텀한 내용이 적용된다. 그렇기 때문에 확장 프로그램 이름을 변경해주지 않으면 이게 커스텀한 건지… 안한건지.. 헷갈릴 수 있다. 내가 그랬다

그래서 아래와 같이 manifest.json 파일에서 name 부분을 원하는 이름으로 변경해주면 된다. 나는 뒤에 Custom만 추가로 넣어줬다.

"name": "백준허브(BaekjoonHub) Custom",

🐉 커스텀한 확장 프로그램 크롬에 적용하기

자, 이제 커스텀을 끝냈다. 그러면 이 커스텀한 코드를 어떻게 우리가 크롬에 사용할 수 있는지를 알아보자.

확장 프로그램 관리 페이지에 접속

본인의 크롬 브라우저에 다음과 같이 url을 넣어주면 확장 프로그램 관리 페이지에 바로 접근할 수 있다.

chrome://extensions/

개발자 모드 토글을 클릭

압축해제된 확장 프로그램을 로드합니다. 클릭

위 이미지를 참고하여 넘버링된 순서에 맞게 클릭해주면 된다.

clone했던 폴더 업로드

위에서 수정을 진행해줬던 폴더를 업로드 한다. 그럼 끝이다.

커스텀 폴더가 잘 적용되었는지 확인하기

아래 이미지와 같이 이미지 하단에 빨간 아이콘이 존재하고 변경했던 확장 프로그램 이름이 잘 반영되어있다면? 커스텀했던 백준허브가 우리의 크롬 확장 프로그램으로 잘 들어온 것이다.

이후에는 기존에 백준허브를 사용했던 것과 동일하게 원하는 레포지토리를 생성 혹은 연결해주면 끝이다. 사용 방법은 기존 백준허브와 완전히 동일하다.

그럼 어디 커스텀 백준허브가 잘 작동되었는지 확인해보자!

.

.

.

🚨 업로드 되지 않는 버그 발생

… 그렇다. 버그가 발생했다… 간단하게 뚝딱 될 줄 알았는데.. 어… 역시 뭘 하던 버그는 마주칠 수 밖에 없는 문제인 것 같다… 하하..

위에 내가 설명한 대로 수정을 진행하면 아래와 같이 설정한 레포지토리에 정상적으로 커밋되지 않는 문제가 발생한다.

원인을 찾기 위해서 수정했던 파일 중에 문제를 일으킬 만한 것을 살펴보았지만 아무리 봐도 없었다.. 그러던 중…

문제 원인 발견

서얼마.. readme를 주석처리 해서.. 이게 혹시 원인..?이란 생각이 들어서 주석을 해제하고 시도하니.. 다음과 같이 정상적으로 커밋이 되었다.

♻️ Readme 파일을 업로드하지 않도록 하기 (Retry)

일단 위에서 설명했던 5번의 코드는 주석을 진행해도 된다. 다만, 같이 해줘야 하는 작업이 있다.

treeSHA 상수 수정

아래와 같이 treeSHA의 상수 값을 수정해줘야 한다.

readme 값을 주석처리 했기 때문에 현재 readme라는 상수는 존재하지 않게 되었다. 그런데 treeSHA에서 readme를 사용하려고 하고 있다. 어라라? 존재하지 않는 값을 사용한다..? 역시.. 말이 안되는 행위이다..

따라서 treeSHA에서 readme 값을 제거해준다. 그러면 사라진 readme 라는 상수는 사용되지 않아 여기서 문제가 발생하지 않을 것이다.

// 변경전
const treeSHA = await git.createTree(refSHA, [source, readme]);
// 변경후
const treeSHA = await git.createTree(refSHA, [source]);

const commitSHA = await git.createCommit(commitMessage, treeSHA, refSHA);
await git.updateHead(ref, commitSHA);

+) 추가로 source 값 하나만 존재하니까 배열로 안 감싸도 되지 않을까? 라는 생각을 한 나는.. [source]가 아닌 source로 작성했는데 이러면 안된다.. 확장 프로그램에서는 커밋되었다는 초록색 check 표시가 뜨는데, 페이크이다.. 실제 레포지토리에 가면 커밋되어있지 않다.

updateObjectDataFromPath 주석

여기도 역시 readme라는 상수는 사라졌는데 사용하고 있으니 동일하게 주석처리를 해주면 된다!

/* stats의 값을 갱신합니다. */
updateObjectDatafromPath(stats.submission, `${hook}/${source.path}`, source.sha);
// updateObjectDatafromPath(stats.submission, `${hook}/${readme.path}`, readme.sha);

✌🏻 결과

원하는 디렉토리 형태와 파일명, 그리고 Readme.md 없이 잘 커밋되어있는 것을 확인할 수 있다.

실제 커스텀한 백준허브 깃허브 리포지토리

혹시 어떻게 코드를 변경했는지 참고하고 싶다면 아래 링크에 접속하여 참고하면 된다.

참고로 나의 경우에는 기존의 백준허브 코드를 지우지 않고 주석처리 해뒀다. 그래서 다소.. 코드가.. 좀.. 더러울 것이다.

🔗 GitHub - soi-ha/BaekjoonHubCustom: 백준 자동 푸시 익스텐션(Auto Git Push for BOJ) 커스텀 repo

✍🏻 생각 끄적이기

사실 readme 상수를 주석처리 하면서도 음.. 아래에서 사용하고 있는데 이거 문제 생길 것 같은데.. 근데 참고한 글은 냅다 주석해도 되었다는 걸 보면 괜찮겠지? 라는 생각을 가지고 그냥 냅다 따라했다. 그랬다가 나의 1시간을 순삭당했는데..

이번에 정말 온 몸으로 깨달은 것은 무작정 글을 믿고 따라하면 안된다는 것이다. 사람은 사고를 하는 동물 아닌가? 그러니 해당 글은 참고만 하고 생각을 하면서 개발을 해야 하는 것을 잊지 말아야겠다. 이래서.. 생각 없이 무작정 사용하는 것을 지양하고 무언가를 할 때 꼭 어떤 이유에서 이렇게 코드를 작성했는지 생각하라는게.. 이래서구나~ 라는 걸 깨닫게 되는 과정이었다.

그리고 해당 코드가 타입스크립트가 아니라 자바스크립트라.. 이게 생각보다 불편하더라. 해당 값의 형태가.. string인지.. 꼭 object 형태여야 하는 건지.. 이런 것을 알 수가 없었다. 타입추론이 안되니 굉장히 불편하구나를 1년동안 ts만 쓰면서 처음으로 깨달았다.

📚 참고 문서

• LeetHub 폴더 구조 변경하기
• 백준 허브 커스터마이징