문제 상황
나는 leetcode를 사용하며 문제 코드를 자동으로 깃허브에 커밋해주는 leetcode를 같이 사용하고 있었다. 기존 leethub 1.0은 old leetcode UI만 지원했었기 때문에 그냥 old UI를 사용하고 있었다. 그리고 기본 설정은 선택한 레포지토리의 root 디렉토리에 커밋하도록 되어 있었다. 디렉토리 문제는 이 글을 보고 해결했지만… old UI 대신 예쁘고 가독성 좋은 new UI를 사용하고 싶어서 leethub 2.0, 3.0을 찾아보게 되었다.
하지만 2.0, 3.0도 root에 커밋해야 하는 것은 동일했고, new UI+디렉토리 커스터마이징을 하니까 아예 작동이 안되는 문제가 발생했다…
leethub 작동 원리와 코드를 이해해서 아래의 목적을 달성해보자!
- new UI를 사용하면서도 원하는 디렉토리에 커밋할 수 있도록 변경
- Note가 비어있는 경우는 Note를 붙이지 않도록 변경
- 코드+Note+Readme(문제 정보)를 한번에 커밋하도록 변경
new UI 오류 해결 + 디렉토리 커스터마이징
우선 new UI를 사용하기 위해 leethub 2.0을 기준으로 코드를 변경하였다. 해당 코드는 여기에서 확인할 수 있다.
getAndInitializeStats 오류 수정
leetcode.js를 열면 getAndInitializeStats 함수에 오류 메시지가 뜬다.
getAndInitializeStats는 크롬 로컬 스토리지에서 저장해둔 stats 정보를 가져오는 함수이다. 만약 stats가 비어있다면 초기화시키는 역할도 한다.
stats이 뭔지 확인하기 위해서 크롬의 로컬 스토리지를 확인해 보자.
chrome.local.storage 확인하기
확인하려는 확장 프로그램을 선택하고 배경 페이지/서비스 워커 링크를 클릭한다. 개발자 도구가 열렸으면 console 탭에서 아래 명령어를 입력한다.
chrome.storage.local.get(null, function(result) { console.log(result); });
위의 명령어를 통해 chrome.storage.local에 저장된 모든 데이터를 출력할 수 있다. null 대신 특정 키를 입력하면 해당 정보만 출력할 수 있다.
실제 stats에는 내가 현재까지 풀었던 문제 정보가 들어가게 된다. 즉 leethub 팝업창을 열었을 때 나오는 난이도별 푼 문제 개수와 실제 문제 정보가 들어간다.
크롬의 로컬 스토리지를 사용하기 때문에 확장 프로그램을 삭제하면 이전까지의 로컬 스토리지도 초기화된다. 이것도 나중에 고칠 수 있으면 좋겠다…
그러면 getAndInitializeStats에서 오류가 난 부분을 살펴보자.
const getAndInitializeStats = problem => {
return chrome.storage.local.get('stats').then(({ stats }) => {
if (stats == null || stats === {}) {
stats = {};
stats.solved = 0;
stats.easy = 0;
stats.medium = 0;
stats.hard = 0;
stats.shas = {};
}새로운 {} 객체와 stats 객체를 참조 위치가 동일한지 비교하고 있기 때문에 ‘This condition will always return 'false' since JavaScript compares objects by reference, not value’오류가 떴다.
이전에는 new UI + 디렉토리 변경을 적용했을 때 아예 깃허브 커밋이 작동하지 않았는데, 위의 오류 때문에 stats가 아예 초기화되지 않아서인 것 같다.
stats이 비어 있는지 확인하기 위해서 stats === {} 대신 Object.keys(stats).length == 0를 사용했다.
저장할 디렉토리 변경
leetcode.js에서 Cmd+F로 ‘const url’을 검색하면 3개의 결과를 확인할 수 있다. ~${hook}/contents/ 까지가 root 디렉토리이며 나는 루트에 LeetCode 디렉토리를 추가하기 위해 다음과 같이 변경했다.
const URL = `https://api.github.com/repos/${hook}/contents/LeetCode/${difficulty}/${problem}/${filename}`;3개의 url 전부 동일하게 변경해주면 된다.
위의 과정을 진행하면 new UI를 사용하면서 디렉토리를 커스터마이징할 수 있다. 변경한 코드를 크롬 확장프로그램으로 사용하기 위해서는 아래와 같은 과정을 따르면 된다.
- 크롬 접속
- 확장 프로그램 탭에서 확장 프로그램 관리 페이지 접속
- 개발자 모드가 꺼져 있다면 우측 상단의 개발자 모드 토글을 눌러 개발자 모드로 진입
- 좌측 상단의 ‘압축해제된 확장 프로그램을 로드합니다. ‘버튼 클릭
- 수정한 파일(leethub 2.0 폴더) 선택
leethub 확장 프로그램과 깃허브 레포지토리를 연결하면 된다!
위의 과정을 통해 new UI에서 작동하도록 수정했지만 노트가 비어있는데도 계속 커밋되는 문제는 아직 해결하지 못했다. 버전을 변경하면서 작동하지 않는 함수가 많은 것 같다... 이후에 더 수정하면서 제대로 작동하도록 변경해야 할 것 같다.
