React 앱에 GitHub 기여 통계를 추가하는 방법-JS 튜토리얼-php.cn

How to Add GitHub Contribution Stats to Your React App

React 포트폴리오에 GitHub 활동을 공개하고 싶으신가요? 이 튜토리얼에서는 효율적인 캐싱을 갖춘 GitHub의 GraphQL API를 사용하여 전체 GitHub 기여를 표시하는 React 구성 요소를 만드는 방법을 보여 드리겠습니다. 멋진 것을 만들어 봅시다! ?

우리가 구축할 것

우리는 다음과 같은 React 구성 요소를 만들 것입니다.

2020년부터 현재까지 GitHub 기여를 가져옵니다
공공 및 민간 기여 모두 포함
클라이언트 측 캐싱을 구현하여 성능 최적화
가져오는 동안 로드 상태 표시
오류를 적절하게 처리

전제 조건

시작하기 전에 다음이 필요합니다.

GitHub 개인 액세스 토큰(읽기:사용자 범위 포함)
React 프로젝트 설정(Create React App, Next.js 또는 선호하는 설정 사용)
React Hooks 및 비동기 작업에 대한 기본 지식

1단계: GitHub 토큰 설정

먼저 프로젝트 루트에 .env 파일을 생성하고 GitHub 토큰을 추가하세요.

NEXT_PUBLIC_GITHUB_TOKEN=your_github_token_here

로그인 후 복사

2단계: 데이터 가져오기 유틸리티 만들기

githubApi.js라는 새 파일을 만듭니다.

export async function fetchGithubCommits(username) {
  const GITHUB_TOKEN = process.env.NEXT_PUBLIC_GITHUB_TOKEN;
  const CACHE_KEY = `github-commits-${username}`;
  const CACHE_TTL = 3600; // 1 hour in seconds

  if (!GITHUB_TOKEN) {
    console.error("No GitHub token found!");
    throw new Error("GitHub token is required");
  }

  const cachedData = getCachedData(CACHE_KEY);
  if (cachedData) {
    return cachedData.value;
  }

  try {
    const currentYear = new Date().getFullYear();
    const startYear = 2020;
    let totalCommits = 0;

    for (let year = startYear; year <= currentYear; year++) {
      const query = `
        query($username: String!, $from: DateTime!, $to: DateTime!) {
          user(login: $username) {
            contributionsCollection(from: $from, to: $to) {
              totalCommitContributions
              restrictedContributionsCount
            }
          }
        }
      `;

      const response = await fetch("https://api.github.com/graphql", {
        method: "POST",
        headers: {
          Authorization: `Bearer ${GITHUB_TOKEN}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          query,
          variables: {
            username,
            from: `${year}-01-01T00:00:00Z`,
            to: `${year}-12-31T23:59:59Z`,
          },
        }),
      });

      const data = await response.json();
      if (data.errors) {
        throw new Error(data.errors[0].message);
      }

      const yearCommits =
        (data.data?.user?.contributionsCollection?.totalCommitContributions || 0) +
        (data.data?.user?.contributionsCollection?.restrictedContributionsCount || 0);

      totalCommits += yearCommits;
    }

    setCachedData(CACHE_KEY, totalCommits, CACHE_TTL);
    return totalCommits;
  } catch (error) {
    console.error("Error fetching GitHub commits:", error);
    throw error;
  }
}

function setCachedData(key, value, ttl) {
  const item = {
    value,
    timestamp: Date.now(),
    ttl: ttl * 1000,
  };
  localStorage.setItem(key, JSON.stringify(item));
}

function getCachedData(key) {
  try {
    const item = localStorage.getItem(key);
    if (!item) return null;

    const parsedItem = JSON.parse(item);
    const now = Date.now();

    if (now - parsedItem.timestamp > parsedItem.ttl) {
      localStorage.removeItem(key);
      return null;
    }

    return parsedItem;
  } catch {
    return null;
  }
}

export function invalidateCommitsCache(username) {
  localStorage.removeItem(`github-commits-${username}`);
}

로그인 후 복사

3단계: React 구성요소 생성

GitHubStats.js라는 새 파일을 만듭니다.

import React, { useState, useEffect } from 'react';
import { fetchGithubCommits } from './githubApi';

const GitHubStats = ({ username }) => {
  const [commits, setCommits] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchStats = async () => {
      try {
        setLoading(true);
        setError(null);
        const totalCommits = await fetchGithubCommits(username);
        setCommits(totalCommits);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchStats();
  }, [username]);

  if (loading) {
    return <div>Loading GitHub stats...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div className="github-stats">
      <h2>GitHub Contributions</h2>
      <p>Total commits since 2020: {commits.toLocaleString()}</p>
    </div>
  );
};

export default GitHubStats;

로그인 후 복사

4단계: 스타일 추가

기본적인 스타일링을 추가해 보겠습니다. GitHubStats.css 생성:

.github-stats {
  padding: 20px;
  border-radius: 8px;
  background-color: #f6f8fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.github-stats h2 {
  margin: 0 0 15px 0;
  color: #24292e;
}

.github-stats p {
  font-size: 1.2em;
  color: #586069;
}

로그인 후 복사

5단계: 구성 요소 사용

이제 앱에서 구성요소를 사용할 수 있습니다.

import GitHubStats from './GitHubStats';

function App() {
  return (
    <div className="App">
      <h1>My Developer Portfolio</h1>
      <GitHubStats username="your-github-username" />
    </div>
  );
}

로그인 후 복사

더 나은 기능: 고급 기능

1. 새로고침 버튼 추가

수동 새로 고침 옵션을 포함하도록 GitHubStats.js를 업데이트하세요.

import React, { useState, useEffect } from 'react';
import { fetchGithubCommits, invalidateCommitsCache } from './githubApi';

const GitHubStats = ({ username }) => {
  // ... previous state declarations ...

  const handleRefresh = async () => {
    invalidateCommitsCache(username);
    await fetchStats();
  };

  return (
    <div className="github-stats">
      <h2>GitHub Contributions</h2>
      <p>Total commits since 2020: {commits.toLocaleString()}</p>
      <button onClick={handleRefresh} disabled={loading}>
        {loading ? 'Refreshing...' : 'Refresh Stats'}
      </button>
    </div>
  );
};

로그인 후 복사

2. 연도별 분석 추가

연간 기여도를 표시하도록 구성요소를 수정할 수 있습니다.

NEXT_PUBLIC_GITHUB_TOKEN=your_github_token_here

로그인 후 복사

성능 팁

캐싱 전략: 현재 구현에서는 한 시간 동안 데이터를 캐시합니다. 필요에 따라 CACHE_TTL을 조정하세요.
오류 경계: 예기치 않은 오류를 적절하게 처리하려면 구성 요소를 오류 경계로 래핑하는 것이 좋습니다.
로드 상태: 더 나은 UX를 위해 단순한 "로드 중..." 텍스트 대신 스켈레톤 로더를 추가합니다.

일반적인 문제 및 해결 방법

CORS 문제: 올바른 GitHub API 엔드포인트와 헤더를 사용하고 있는지 확인하세요.
토큰 권한: GitHub 토큰에 필요한 권한이 있는지 확인하세요.
속도 제한: 응답 헤더에서 남은 속도 제한을 확인하여 GitHub의 API 속도 제한을 처리합니다.

이제 React 앱에 완전한 기능을 갖춘 GitHub 통계 구성 요소가 생겼습니다! 이 구현은 구축할 수 있는 견고한 기반을 제공합니다. 개선을 위한 몇 가지 아이디어:

GitHub 통계(예: 별, PR, 이슈) 추가
차트를 사용하여 시각적 표현 만들기
로딩 및 업데이트용 애니메이션 추가
더 자세한 오류 처리 구현

GitHub 토큰을 안전하게 보관하고 저장소에 커밋하지 마세요. 즐거운 코딩하세요! ?

위 내용은 React 앱에 GitHub 기여 통계를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!