GitHub Streak 카드: 개발자 프로필을 위한 실시간 스탯스 트래커
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 개발자, 오픈소스 기여자, 학생
- 중간 난이도: GitHub API 및 프론트엔드 기술 이해 필요
핵심 요약
- 100% 정확한 스탯스 트래킹:
GraphQL API사용으로 프라이빗 커밋, 시간대 차이 문제 해결 - 다양한 커스터마이징:
dark/light/custom themes,top language표시,README에 자동 업데이트 - 실시간 데모 제공: Live Demo
섹션별 세부 요약
1. 기존 도구의 한계
- 프라이빗 커밋 무시: 대부분의 도구가
private activity지원 X - 시간대 오류:
timezone-aware기능 없음 - UI/UX 단순화:
avatar,top language표시 X
2. 주요 기능
- 프로필 정보 표시:
GitHub profile avatar,top programming language자동 감지 - 스태트스 계산:
current streak,longest streak,total contributions실시간 업데이트 - 테마 커스터마이징:
glass,dark,light등 3가지 테마 지원
3. 기술 스택
- GraphQL API 사용:
fetch commits, PRs, issues - 자동 업데이트:
npm start실행 시 매일 자동 업데이트 - 배포 옵션:
Vercel,Netlify에서 직접 호스팅 가능
4. 설정 방법
config.js파일에서username,timezone,showPrivate등 설정git clone후npm install및npm start실행README또는 웹사이트에 직접 삽입 가능
결론
- 프로젝트 활용:
GitHub Repo에서 별표 클릭,fork또는contributions참여 - 실무 적용 팁:
GraphQL API활용으로 정확한 데이터 수집,theme설정으로 개발자 브랜딩 강화 - 핵심 가치:
developer identity badge로 개발자 프로필의 실시간 스탯스를 정확하게 표현 가능
🔗 GitHub Repo | Live Demo