내 코드가 성공했을 때, 문제와 코드가 github에 자동 푸시되도록 만들기 (LeetCode, 백준, 프로그래머스 전부 한 레포지토리에)

- 한 레포에 모든 코테 결과 오토푸시하기 LeetCode(LeetHub) + 백준, 프로그래머스(백준허브)

서론

쉴때는 쉬어야지

그치만 할때는 해야한다 (?)

 

주로 책, 노트와 펜으로 공부를 해서 대부분의 기록들은 아날로그로 남아있다.

아날로그 기록들은 어쩔 수 없으니 이걸 제외한 나머지 내가 개발자가 되기 위해서 노력했던 무언가의 과정들은 왠만하면 한 곳에 기록되었으면 한다. 그래야 이곳저곳 안 뒤적거리고 한 곳에서 내가 한  것들을 모아 볼 수 있으니 나중에 돌아볼 때 편할 것(좋을 것) 같다.

그래서, 네이버, 워드프레스블로그, 벨로그 등등을 다 내려두고 티스토리랑 깃허브 이렇게 투트랙으로 가려고 한다.

내 블로그는 이런저런 잡스런 이야기들이 섞여 더 이상 어디가서 개발블로그라고 하기가 부끄부끄하지만 그건 내가 진짜 개발자가 아니라서 그런거라고 하자.

 

지금 프로그래머스를 조금씩 여유날 때 하고 있다.

근데 뭔가 풀고 싹 휘발되는 느낌?... 그렇다고 여기에 내가 푼 걸 다 긁어 올리는 건 너무 생-노가다이고 말이다.

프로그래머스에 내가 푼 문제와 내 코드가 남아있긴 하지만 이 내용을 그 곳이 아닌 내 영역의 어딘가에 모아두고 싶었다.

언젠가 백준도 할꺼니깐, 백준 문제내역, 프로그래머스 문제내역, 모두 한 곳에 기록해두고 싶었다.

그치만 수작업은 너무 비효율적이고... 그러다 크롬의 자동 커밋 익스텐션인 백준허브 라는 것을 알게 되었다.

그리고 백준허브가 LeetCode라는 해외 코테사이트의 자동 커밋 익스텐션 LeetHub에서 영감을 받은 프로그램이라는 것도 알게되어

LeetCode도 들어가보았다.

UI

너무 놀랜게 Solutions 카테고리이다. 진짜 정-말 놀랬다. 답만 띡 있는 게 아니라서 말이다.

비디오 솔루션도 있고, 다양한 알고리즘을 적용한 풀이를 제시해주고 알고리즘 별 시간복잡도까지 알려준다.

문제를 맞추면 그냥 넘어가기 마련인데, 여기는 맞아도 솔루션을 읽어보는 것이 하나의 엄청난 공부가 되겠더라.   

풀이에 진심인 이곳

---

 본론: 그래서, 오늘의 목표는 !

내 깃허브의 한 레포지토리 속에 LeetCode/백준/프로그래머스 레포가 있고 그 속에 내가 푼 문제정보가 자동 푸시되는 시스템 만들기!

완성된 상태 미리보기

① 백준이랑 프로그래머스: 쉽다

아까 말한 백준 허브가 해준다.

크롬 익스텐션 백준 허브를 깐 다음 내 레포지토리와 연동하면 된다

그래서, Algorithm_Cpp_SQL 이라는 내 레포지토리와 연동시켰다.

테스트 겸 백준, 프로그래머스 문제 각각 풀어보니, 내 코테레포 속에 백준, 프로그래머스 각각의 폴더가 생기고,

그 각각의 폴더에는 또 난이도별 폴더가 있고 그 안에 내가 푼 각각 문제에 해당하는 폴더가 만들어져서

그 문제 폴더 속에 내가 쓴 코드, 코드에 관련된 문제내용과 성능이 써진 리드미가 자동으로 올라가 있는 것을 확인했다.

(예) Algorithm / 백준 / Bronze / 2557. Hello World

(예) Algorithm / 프로그래머스 / 1 / 12910. 나누어 떨어지는 숫자 배열

아-주 편하구만 !!!?!!

② LeetCode : 자기 폴더도 없고 난이도 구분도 안해줘...

간단하게 내 목표는 내 코테폴더에 백준폴더, 프로그래머스폴더, 리트코드 폴더를 담는건데 리트코드 담는게 빡셌다.

푼 문제를 깃허브에 자동푸시해주는 리트허브는 백준허브의 원조격인 프로그램이다.

그런데 일단 크롬에 검색하니 똑같이 생긴 것들이 있어서 뭘 다운받아야하는지도 모르겠더라.

분신술쓰는 리트허브

( 검색을 해봤더니 이렇게 된데에는 사연이 있었다.

기존 LeetHub 개발자 분께선 너무 바쁘셔서 업데이트를 중단하신 상태였는데

LeetCode가 홈페이지 UI를 바꾸는 바람에

기존의 LeetHub가 작동을 안 해버리는 상황이 와서

다른 사람들이 바통을 이어받아 여러 버전이 생겼다는 그런 사연 )

그래서, 각 리트허브의 레포지토리 리드미를 읽어보고 가장 최신 버전인 LeetHub v3 를 깔았다.

그런데 기본 LeetHub에는 문제가 있었다.

백준허브(백준, 프로그래머스 오토푸시)는 내가 설정한 레포지토리에 바로 문제폴더를 푸시하는게 아니라 자기 폴더 > 난이도로 들어가서 푸시를 한다.

그러나 리트허브는 설정한 레포지토리에 바로 문제폴더를 올려버린다.

내 코테폴더 > 백준 폴더, 프로그래머스 폴더, 리트 문제 좌르륵  이런 식으로 되버려서...... Hㅏ

 

그래서 문제를 어떻게 해결할지 좀 찾아봤는데

LeetHub v1 을 사용하시는 분들께서 해결하는 글을 좀 올려두셨다. [링크]

기존 앱을 커스텀한 다음에 내가 직접 크롬 익스텐션으로 올려야하는 (...)

나는 v3 이라 해결방법이 완전 똑같진 않지만 그래도 결이 같아서 해결법을 파악한 다음에 다행히 해결했다.

LeetCode 결과도 자기 폴더에 난이도별로 푸시되도록 LeetHub커스터마이징해보자

LeetHub v3 README

1) LeetHub v3 readme 읽기

일단 LeetHubv3 리드미를 보자. 우리는 Optional 설치 메뉴얼을 봐야한다. 저거 고대-로 하면된다.

2) Settings / Developer Settings / OAuth Apps 에서 NewOAuth App 을 클릭하여 생성하기

https://github.com/settings/applications/new 에 들어가서

New OAuth App을 눌러 새로 만든다

Application name은 내맘대로

Homepage URL과 Authorization callback URL은 README.md에 쓰여있는대로 기입해서 만든다.

Client ID와 Client secrets(없으면 생성) 복사해서 메모장에 잠깐 붙여둔다.

3) LeetHub v3 Clone 하기

그리고 쉘, 터미널을 통해서 해당 폴더(LeetHub-3.0)로 들어간다

4) npm run setup 입력

근데 나는 npm이 뭔지도 모르는....데다가

난 npm이 없어서(그게 뭔지몰루) 그거부터 설치하려는데 Homebrew가 필요하다는데 그것도 없어서..

Homebrew 설치한 후에

brew install node 로 npm 설치를 한 후에야

npm run setup 을 사용할 수 있었다.

5) scripts  폴더 속 authorize.js 와 oauth2.js 파일 내용 수정하기

메모장에 붙여뒀던 내 Client ID와 Client secrets 값을

코드의 this.CLIENT_ID, this.CLIENT_SECRET 의 값으로 붙여둔 후 저장한다.

(나중에 앱 구동할 때 작동을 안하길래 다시 이 과정으로 와서 터미널(쉘)에다가 npm audit fix 를 쳐서 해결했다. 이유는몰루..)

6) scripts  폴더 속 leetcode.js 파일 내용 수정하기

ctrl+f 하여 const URL 을 찾아보면 딱 두 줄 나온다. 그 두 줄을 전부 아래 값으로 변경한 후 저장한다. 

const URL = `https://api.github.com/repos/${hook}/contents/LeetCode/${difficulty}/${problem}/${filename}`;

7) chrome 의 확장프로그램에 들어가서 개발자모드 - 압축해제된 .. 클릭 - LeetHub 폴더 선택

주소는 chrome://extensions/ 이다.

개발자모드 - 압축해제된 확장 프로그램을 ... 클릭

아까 클론받아서 수정했던 LeetHub-3.0 폴더 선택

8) 기존 백준허브, LeetHub 쓰듯 사용하면 됨!

설치 직후에 리트코드 풀었는데 바로 반영이 안 되길래 무서웠는데 시간이 좀 지나니깐 되었다.

휴

끝