[프로젝트] 1일 1커밋 실천할 수 있는 웹사이트 - 연속 커밋 횟수 보여주는 곳

'1일 1커밋을 계속 실천 해 줄 수 있는 방법은 없을까?'

`매일매일 알고리즘 한 문제씩 풀자!` 라는 목표를 가지고 있었지만 열심히 하다가도 중간에 빼먹고..

그러다가 다시 시작하기를 계속 반복하다보니 뭔가 동기부여할 수 있는게 있으면 좋겠다는 생각을 했다. 

내 깃헙 커밋 기록,, 보면 잘하다가 중간에 쉬고, 다시 잘하다가 쉬고 무한 반복중,,

 

몇일 전에 갑자기 떠오른 아이디어!

그러다가 내가 제 2외국어 공부를 하는 '듀오링고' 어플에서 아이디어를 따왔다.

듀오링고에서 소소하게 프랑스어 공부를 하고 있는 데 연속 횟수를 보여주는 것이 특징이다.

아무래도 연속 횟수를 깨면 다시 0으로 돌아가다보니까 뭔가 빼먹지 않고 열심히 하게 된다.

그래서 이런 연속횟수를 깃헙 레포에도 적용하면 괜찮을 것같다 ? 라는 아이디어가 떠올랐다.

 

https://github.com/DenverCoder1/github-readme-streak-stats

DenverCoder1/github-readme-streak-stats

찾아보니까 사실 이분이 이미 만드시긴 했더라 🤭

그래도 나는 레포별로 만들고 싶기도 하고 조금 다른 방식으로 만드려고 했다.

 

결국 그래서 리액트 요리조리 사용해서 웹사이트를 간단하게 만들어보았다.

프론트엔드는 지식이 별로 없어서 요리조리 하다가 고생했다.

 

1. 먼저 깃헙 아이디랑 레포 이름을 적는다.

깃헙에서 제공하는 REST API가 있어서 해당 아이디 + 레포 조합으로 커밋기록을 불러올 수 있었다.

rest api document는 여기에 -> https://docs.github.com/en/rest

GitHub REST API - GitHub Docs

submit 버튼을 누르면 해당 API를 조회하고 커밋기록을 불러와서 연속일수들을 계산해준다.

 

2. 연속 횟수와 최근 3주간의 기록 보여주기

 

요런식으로 최근 연속 커밋 횟수를 보여주고, 오늘 달성했는지 or 달성하지 못했는지,

최대 연속 커밋 횟수랑 최근 3주간의 기록을 보여준다.

streak 숫자가 점점 올라가면 올라갈수록 기록이 깨기 싫어서 커밋을 하게 될 것 같다.

연속 100회 넘었다가 갑자기 0이 되면 너무 허무하기 때무네,,,

 

요거를 만든 이후로 알고리즘 12일 연속 1문제 이상 풀게 되었는 데 1차 목표는 연속 50일이다 ❗️

과연 할 수 있을까..

 

프로젝트에서도 아쉬운게 넘 많은데

1) 불러오기 오류시에 에러페이지 표시할 것

2) 라우터 추가할 것

3) 먼가 더 디자인적으로 눈에 확 들어오게 하고싶음

 

프론트엔드는 거의 첫 프로젝트였지만 좀 더 공부해서 완성도있게 만들고 싶었던 것 같담

 

여러분도 해보세요 !

해당 웹사이트 주소랑

https://b-chae.github.io/GithubRepoCommitStreak/

깃헙 주소입니다.

https://github.com/b-chae/GithubRepoCommitStreak 

즐겨찾기  or 이슈 남기기 등등 다 환영