software

GitHub README에 실시간 스타 히스토리 차트를 추가하는 방법

발행: (2025년 12월 18일 오전 11:17 GMT+9)
7 분 소요
원문: Dev.to

I’m happy to translate the article for you, but I’ll need the full text of the post (the paragraphs, headings, and any explanatory content) in order to do the translation. The source link you provided is fine to keep unchanged at the top, but please paste the article’s content here, and I’ll translate it into Korean while preserving the original formatting, markdown syntax, and technical terms.

면책 조항

중요 공지: 이 애플리케이션은 star-history/star-history를 기반으로 하며 수정 및 업그레이드되었습니다. 우리는 앞으로도 더 많은 데이터 분석 기능을 추가할 예정입니다. 원 저자분들께 진심으로 감사드립니다! 이 문서 역시 원 저장소의 문서를 기반으로 수정 및 개선되었습니다.

New repository

github-data-analysis-

우리는 차트 구현을 업데이트하고 MongoDB 기반 캐싱을 도입하여 GitHub API 호출을 줄이고 성능을 향상시켰으며, 다크 테마를 추가했습니다.

데이터 쿼리 및 이미지 다운로드

우리는 직접 데이터 쿼리와 이미지 다운로드 기능을 제공하지만, GitHub 개인 액세스 토큰을 제공해야 합니다. 시스템은 서버 측에 토큰을 저장하지 않습니다.

차트 이미지를 직접 삽입하는 경우 토큰이 필요하지 않지만, GitHub 속도 제한으로 인해 사용에 영향을 받을 수 있습니다. MongoDB 캐싱을 사용하여 이러한 영향을 가능한 한 최소화합니다.

GitHub README에 실시간 star‑history 차트 추가하기

이제 GitHub README에 실시간 star‑history 차트를 삽입할 수 있습니다. 위 스크린샷은 저희 자체 GitHub 데이터 분석에서 가져온 것입니다.

star‑history.com 메인 페이지에서 저장소를 조회하면 스니펫이 생성됩니다; 해당 스니펫을 README 마크다운 파일에 복사하기만 하면 됩니다.

Embed with “

인기 있는 웹‑사이트 임베딩 구현을 검토한 결과, 우리는 “를 컨테이너로 선택했습니다. 이는 백엔드 서버 없이도 웹 페이지에 원본 차트를 표시할 수 있으며 실시간 데이터와 함께 인터랙티브하게 유지됩니다.

GitHub API는 익명 호출자에 대해 엄격한 속도 제한을 적용하므로, 사용자는 해당 제한을 극복하기 위해 개인 액세스 토큰을 제공해야 합니다.

iframe 임베드 사용 단계별 가이드

  1. gitdata.xuanhun520.com 를 열고 저장소를 조회합니다.

  2. 차트 아래에 있는 Embed 버튼을 클릭합니다.

  3. 개인 액세스 토큰을 입력합니다.

    임베드 토큰 입력

  4. Copy 버튼을 클릭한 뒤, 생성된 “ 스니펫을 웹사이트나 블로그에 붙여넣습니다.

SVG 형식의 실시간 차트 이미지

iframe 기반 임베드는 개선된 방법이지만 몇 가지 제한 사항이 있습니다:

  • GitHub의 마크다운 형식은 “ 를 렌더링할 수 없으며, 따라서 차트를 리포지토리 README에 직접 삽입할 수 없습니다.
  • 사용자는 개인 액세스 토큰을 제공해야 합니다. 토큰은 우리 서버에 저장되지 않으며(서버가 없습니다), 페이지 소스에서 확인될 수 있기 때문에 신뢰할 수 있는 플랫폼(예: 내부 대시보드)에서만 사용이 제한됩니다.

GitHub README에 차트를 추가하는 단계별 가이드

  1. gitdata.xuanhun520.com 를 열고 저장소를 조회합니다.

  2. 액션 버튼 아래쪽으로 스크롤합니다.

    Scroll to image link

  3. Copy 버튼을 클릭하여 정적 이미지 URL을 복사합니다.

  4. 마크다운 이미지 링크를 저장소의 README에 붙여넣습니다.

모든 작업이 완료되었습니다. 😎

결론

우리는 실시간 별‑히스토리 차트를 삽입하는 두 가지 방법을 제공합니다:

  • 인터랙티브 임베드: 사설 네트워크나 대시보드에서 자동 크기 조절이 가능한 인터랙티브 차트를 위해 “ 를 사용합니다.
  • 정적 이미지: GitHub README와 같은 공개 장소에 최신 차트를 표시하려면 간단한 이미지 링크를 사용합니다. 예시:
https://gitdata.xuanhun520.com/api/starimg?repos=visactor/vchart&type=Date&theme=dark

향후 계획

  • 포크 히스토리 차트 및 기여자 활동 차트와 같은 데이터 분석 기능을 추가합니다.
  • 개인 저장소 분석을 지원하기 위해 사용자 인증을 구현합니다.
  • 인포그래픽 및 애니메이션 차트를 포함한 추가 시각화 형태를 도입합니다.
Back to Blog

관련 글

더 보기 »