LeetHub 사용 방법 및 LeetHub 연동 문제 해결하기

23.09.17 업데이트
현재 LeetHub 자체는 더이상 유지보수가 되지 않으며, 아래 방법으로도 연동 문제가 해결되지 않을 수 있습니다. 이를 유저들이 인지하였는데 확장 스토어에서 LeetHub v2를 다운로드하여 최신 버전의 ui에서 손쉽게 github를 연동할 수 있으며 아래 링크를 남겨둡니다:

Chrome 웹 스토어 - 확장 프로그램 (google.com)

LeetHub v2

 

 

 

---

서두에 잡소리가 길기 때문에 바쁜 분들은 아래 연동 문제 해결하기 섹션에서 찾아뵙겠습니다.

 

제가 미천한 학부생이던시절, 갓 배운 c언어로 콘솔 슈팅 게임을 만들고 유니티와 C#을 배워 로그라이크 게임을 만드는 삽질을 하고 있을 때, 알고리즘 열풍이 불었던 적이 있었습니다.

 

당시에는 게임 개발을 공부하는데 여념이 없어 그러한 기류를 한 귀로 듣고 한 귀로 흘려들었지만, 그 대가로 취준 준비 시절에 호되게 알고리즘에게 따귀를 맞으며 공부했었습니다. 그 때 당시에만 해도 알고리즘 문제 해결 사이트는 국내 기준 백준이 인지도가 가장 높았고, 일부 고수들이 글로벌한 실력을 뽐내기 위해 코포 같은 사이트를 방문했던 것으로 기억합니다.

 

요즘의 알고리즘 문제 해결 사이트는 프로그래머스, LeetCode 등 워낙 다양해져서 이러한 사이트들을 비교한 포스팅도 있으니 자신의 상황과 취향에 맞는 사이트에 대한 선택권이 넓어졌다고 볼 수 있겠습니다.

코딩테스트 플랫폼 전격 비교: 백준 vs 프로그래머스 vs Leetcode vs SWEA 그 외

 

그중 LeetCode가 실무에서 꽤나 핫한 것 같아 며칠간 이용해 보았는데 옛날 백준과 달리 IDE 없이 웹에서 바로 코딩과 테스트가 가능한 점은 참으로 편리했습니다(물론, 실시간 디버깅 모드는 프리미엄 비용이 발생하기 때문에 무료로 사용하고자 한다면 디버깅을 위한 IDE가 필요합니다).

 

특히 LeetHub라는 크롬 확장 프로그램은 단순히 LeetCode에서 알고리즘을 제출(submit)하여 통과(Aceept)하기만 하면 이를 감지하여 연동된 GitHub의 레포지토리에 자동으로 소스 코드를 커밋해주는 것이 인상적이었습니다. 예전에 백준으로 문제를 풀 때, 일일이 수동으로 코드를 올리지 않아도 되는 편리함은 귀찮은 개발자에게 마른 사막의 오아시스와 같았습니다.

 

 

 

LeetHub 사용하기

---

 

서론이 길었는데 LeetHub에 대한 서론까지 길어버리면 배보다 배꼽이 더 클 것 같으므로 생략하겠습니다. LeetHub는 다음 사이트에서 다운로드할 수 있습니다. 다른 크롬 확장 프로그램과 설치 방식이 다르지 않습니다.

LeetHub

그림 1. LeetHub 크롬 확장 프로그램 다운로드 페이지

 

설치하고 이를 눌러보면 아래와 같은 팝업창이 뜨며, Authenticate 버튼을 눌러 github 계정을 연결하면 되겠습니다.

그림 2. LeetHub 연동 팝업

 

계정을 연결한 이후, 나오는 페이지에서 레포지토리 연결 방식을 결정하면, 설정 끝입니다. 아래 Pick an Option은 다음과 같은 옵션을 포함하고 있습니다:

• Create a new Private Repository : 새 Private 레포지토리를 생성하고 LeetHub와 연동합니다.
• Link an Existing Repository : 기존의 레포지토리와 연동합니다.

그림 3. LeetHub 레포지토리 연동

 

이렇게 하면 기본 설정은 끝이 납니다... 만은 LeetCode의 UI가 리뉴얼되면서 최신 UI에서는 동작하지 않는 문제가 현재 발생하고 있습니다(링크)

 

 

 

연동 문제 해결하기

---

현재 이 문제는 2가지 방법으로 해결할 수 있습니다:

• 구 버전 UI에서 제출하기
• LeetHub에서 포크하여 해당 문제를 해결한 레포지토리를 다운받아 확장 프로그램 재적용하기

 

 

구 버전 UI에서 제출하기

이 방법은 쉽고 간편하며 잘 작동합니다. 단순히 LeetCode 코딩 페이지에서 우측 상단 프로필 버튼을 누른 후 아래 빨간 포커싱 박스 영역을 선택하여 작성하면 됩니다.

그림 4. LeetCode 구 버전 UI로 돌아가기

이전 버전의 UI가 구리지만 다음 소개할 해결 방법보다 쉽고 간편하므로 자동화하는데 너무 많은 수고로움이 든다고 생각하는 분들에게 추천합니다.

 

 

LeetHub에서 포크하여 해당 문제를 해결한 레포지토리를 다운받아 확장 프로그램 재적용하기

이 방법은 최신 UI 버전에서 사용 가능하게 만들어주나 그 과정이 복잡합니다. 먼저 해당 문제를 해결한 포크 레포지토리\를 찾아가서 git clone 또는 download zip을 통해 소스 코드 전체를 받아줍니다. 그 전에 기존의 LeetHub는 미리 삭제해두도록 합니다.

GitHub - 3ba2ii/LeetHub: Automatically sync your leetcode solutions to your github account - top 5 trending GitHub repository

 

받으면 다음과 같이 구성되어 있습니다(내용물은 신경쓰지 않아도 됩니다).

그림 5. 다운로드받은 소스 코드

이후, 이것을 크롬 확장프로그램에 등록하기 위해 크롬 확장 페이지로 들어가서 압축 풀린 파일 로드 버튼을 눌러, 다운로드한 소스코드의 부모 폴더를 선택합니다.

그림 6. 사용자 크롬 확장 프로그램 설치

 

그럼 설치가 된 것을 확인할 수 있는데, 종속성 다운로드를 위한 추가 작업을 해줘야 합니다. cmd 창을 열고 소스코드가 있는 디렉토리를 찾아가 npm rum setup을 입력하시면 됩니다. 이 때 npm 명령어는 node.js를 설치해야 사용할 수 있으므로 없으신 분들은 링크에서 다운로드하시면 되겠습니다.

다운로드 | Node.js

 

이렇게 하면 모든 작업이 완료가 되었으며 최신 UI에서 코드 제출 시에도 github에 정상적으로 푸쉬가 되는 것을 확인할 수 있습니다.

 

 

2가지 방법을 다 해봤는데 안되요

제가 위 두가지 방법을 다 해봤는데 안되서 연동에만 6시간을 소모했습니다. 이 때 레포지토리가 기본적으로 생성되는 디폴트와 다르게 커스터마이징되어 발생하는 문제일 수 있습니다.

 

제 경우에는 branch 디폴트 이름을 develop으로 하는데, LeetHub와 연동된 레포지토리는 branch name이 반드시 master로 설정되어 있어야 합니다. LeetHub 자체가 다양한 유즈케이스를 두고 개발이 되지 않은 것으로 생각됩니다.

 

이 방법으로도 해결되지 않는다면 LeetHub의 github 페이지 이슈 탭에 보시면 동병상련의 정을 느낄 수 있는 성토의 장이 마련되어 있으니, 그 중에 자신의 케이스에 해당하는 문제를 찾아 해결하시길 바라겠습니다.

GitHub - QasimWani/LeetHub: Automatically sync your leetcode solutions to your github account - top 5 trending GitHub repository

 

 

 

레퍼런스

---

• so.py - 코딩테스트 플랫폼 전격 비교: 백준 vs 프로그래머스 vs LeetCode vs SWEA 그 외
• so's devlog - LeetHub 연동 에러 문제 (feat.새로운 ui 페이지)