LeetHub 디렉토리 구조 백준허브처럼 변경하기

문제풀이 사이트(백준, 프로그래머스, SWEA) 등 푸는 사람이라면 백준허브라는 것을 다들 들어봤을 거예요

해외에서의 유명한 문제풀이 사이트가 있는데 바로 LeetCode입니다!

 

하지만 LeetHub은 오직 LeetCode만을 위한 것으로

백준, 프로그래머스와 같은 상위 디렉토리가 존재하지 않는 문제가 있죠ㅠ

 

빠르게 이용하기

GitHub - wlsgh7608/LeetHub: LeetHub을 백준허브 디렉토리 구조와 동일하게 커스터마이징한 레포입니다.

 

 

 

이를 그림으로 표현하면 다음과 같습니다

 

백준허브

├─SWEA
│  ├─D4
│  │  └─1249. ［S／W 문제해결 응용］ 4일차 － 보급로
│  └─Unrated
│      └─4014. ［모의 SW 역량테스트］ 활주로 건설
├─백준
│  ├─Bronze
│  │  ├─10039. 평균 점수
│  │  └─7287. 등록
│  ├─Gold
│  │  ├─10159. 저울
│  │  └─9935. 문자열 폭발
│  └─Silver
│      ├─1015. 수열 정렬
│      ├─10157. 자리배정
│      ├─10211. Maximum Subarray
│      ├─9655. 돌 게임
│      └─9656. 돌 게임 2
└─프로그래머스
    ├─lv1
    │  └─1845. 폰켓몬
    └─lv2
       ├─12914. 멀리 뛰기
       ├─12980. 점프와 순간 이동
       └─87946. 피로도

 

리트허브

├─0074-search-a-2d-matrix
├─0079-word-search
├─0179-largest-number
├─0279-perfect-squares
├─0473-matchsticks-to-square
└─0873-length-of-longest-fibonacci-subsequence

디렉토리 구조 변경

이러한 리트허브를 백준허브 디렉터리 구조로 바꾸려면 다음과 같은 요구사항이 필요합니다.

LeetCode/{난이도}/{문제}

 

혹시 누군가가 하지 않았을까라고 두근거리며 검색을 했는데!

 

 

 

그리고 마참내! 찾았다.

LeetHub 커스터마이징하기

역시 나와 같은 불-편함을 느낀 개발자 분이 커스터마이징 하는 법을 정리해 주셨습니다..

 

 

요약하면 다음과 같습니다.

1. https://github.com/QasimWani/LeetHub 클론 후 다음 명령어를 실행

npm run setup
npm run format
npm run format-test
npm run lint
npm run lint-test

 

 

2. leetcode.js의 파일 중 다음 2가지를 수정

백준허브 디렉토리구조와 동일하게 만들기 위하여 ${difficulty}로 난이도 폴더를 추가시켜야 합니다!

70번째 라인 수정

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

140번째 라인 수정

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

 

3. 크롬 익스텐션에서 개발자 모드 > 앱축해제된 확장 프로그램 로드 > 해당 프로젝트 디렉토리 로드

 

결과

다음과 같이 백준허브 디렉토리구조와 동일하게 되었습니다...!

 

Optional - 커밋 1개로 변경

하지만 또 불편한 것이 있었는데 바로 커밋 기록입니다

백준허브는 문제당 1개의 커밋을 남기는 반면 리트허브는 3개의 커밋을 남기는 것을 발견할 수 있습니다.

커밋기록에 보이는 Attach NOTES, Create ReadME을 검색해 보겠습니다.

그리고 해당 변수를 따라가 보면 깃에 푸시를 하는 코드를 발견할 수 있는데 주석처리를 진행하겠습니다.

655라인~660라인 주석처리

  // uploadGit(
  //   btoa(unescape(encodeURIComponent(probStatement))),
  //   problemName,
  //   'README.md',
  //   readmeMsg,
  //   'upload',
  // );

 

672라인~ 678라인 주석처리

// uploadGit(
//   btoa(unescape(encodeURIComponent(notes))),
//   problemName,
//   'NOTES.md',
//   createNotesMsg,
//   'upload',
// );

 

저장 후 이전의 확장프로그램을 삭제 후  다시 올려주자.

 

결과

 

Optional - 커밋 내용 수정하기

이제 커밋 내용을 수정해 봅시다.

백준 허브와 동일하게 

[난이도] 문제 이름, Time , Memory 형식으로 변경하기 위하여

문제 이름, 난이도와 같은 경우는 다행히 이미 html 파싱이 되어 있습니다.

문제 이름에 해당하는 변수를 전역변수로 수정

 

36라인에 추가

/* question title */
let qtitle = '';

그리고 다음과 같이 바꿔줍시다..!

대략 514라인쯤 리턴문 수정

 return `[${difficulty}] Title: ${qtitle}, Time: ${time} (${timePercentile}), Memory: ${space} (${spacePercentile}) - LeetHub`;

 

그리고 다시 해당 디렉토리를 올려 확인해 보면

 

결과

우리가 원하는 대로 백준허브와 동일한 포맷으로 올라간 것을 확인할 수 있습니다.

하지만, 문제 제목의 길이가 길어 커밋의 내용이 잘리기 때문에 저는 Title은 뺐습니다!

 

요약

git clone 받고

1. 크롬 익스텐션에서 개발자 모드 > 앱축해제된 확장 프로그램 로드 > 해당 프로젝트 디렉토리 로드

GitHub - wlsgh7608/LeetHub: LeetHub을 백준허브 디렉토리 구조와 동일하게 커스터마이징하였습니다.

느낀 점

단순히 기존의 코드 중 일부만을 수정하는 것임에도 남이 짠 코드를 수정하는 것이다 보니 생각보다 쉽지 않았습니다.

또한 주석을 통해 해당 코드를 빠르게 이해할 수 있었는데, 주석의 중요성을 다시 깨닫게 됩니담....총총