[프로젝트] Coplit to Github

Donghun Seol·2022년 12월 1일

상태

코드스테이츠 코플릿을 본격적으로 풀어보려하는데 버전관리가 되지 않는 것이 불만족스러웠다.
깃을 활용하면 이전 버전이랑 달라진 내역도 멋지게 비교할 수 있는데...
그래서 만들어 보기로 했다.

평소에도 만들어 보고 싶었다. 마침 메타마스크나 카이카스 처럼 멋진 크롬익스텐션을 학습했고, 간단하게 웹페이지를 조작하는데 적합하고, 배포도 쉽다고 생각했기 때문에 크롬익스텐션으로 개발해보기로 했다. 다행히 레퍼런스들이 없진 않았다.

배포하고나서 알게 된 내용이지만 백준과 프로그래머스 문제를 커밋해주는 백준허브라는 개쩌는 익스텐션이 이미 있었다. 다음 버전 업데이트시 적극참고할듯.

익스텐션 아이콘(코드스테이츠 로고)를 눌리면 팝업창이 나온다.

깃헙 api를 이용해야 하므로 깃헙에서 accessToken을 발급 받아야 한다.
(다음 절에 발급받는 방법을 설명해 놓았다.)

다음과 같이 입력하고 save버튼 누른다. 토큰값은 더 긴데 일부는 가렸다..

초록색으로 API가 사용가능하다는 안내문구가 떠야 정상적으로 사용 가능하다.
(fetch로 get요청을 날려 검증한다.)

만약 붉은색 안내문구가 뜨면 id와 accessToken이 맞지 않는 것이다. 다시 확인해보자.

먼저 깃헙에 로그인한다.

깃헙에 로그인되어 있는 상태라면 다음 url로 토큰 발급 페이지에 바로 접근할 수 있다.

Note, Expiration, Scope를 지정해주어야 한다.
노트는 생략가능하고, Expiration은 해당 토큰을 얼마동안 사용할지 정하는 것이다.
일단 넉넉하게 90일 정도 하는것을 추천

Scope설정이 중요하다. 아래 사진과 같이 repo를 클릭한다. 그리고 맨 아래로 내려가 토큰을 만들자.

생성된 토큰은 분실시 재생성해야 하니 비밀일기장에 잘 적어두자
참고로 아래 토큰은 생성 후 바로 지웠다.

잘 아시겠지만 팝업창에 아이디와 토큰을 입력한다.
save버튼을 누른 후 녹색으로 성공메시지가 뜨면 이제부터 커밋할 수 있다.
아이디와 accessToken은 로컬스토리지에 저장되므로 최초 한번만 입력하면 된다.

열심히 문제를 푼 다음 테스트한 상태에서 오렌지색 버튼을 누르면 백그라운드에서 api요청이 실행된다.
본인의 깃헙에 coplit이라는 프라이빗 리포가 없다면 자동으로 생기고, 에디터에 있는 내용대로 파일이 커밋된다.
파일명은 코플릿 번호와 이름으로 지정된다.

I'm going from failure to failure without losing enthusiasm