GitHub REST API 사용법

1️⃣ GitHub API란?

GitHub API는 개발자들이 GitHub의 데이터를 가져와서 앱이나 웹사이트에 활용할 수 있도록 도와주는 서비스입니다.
예를 들어, 유저 프로필, 레포지토리 목록, 팔로워 수 같은 데이터를 API를 통해 얻을 수 있어요.
저는 이 프로젝트에서 유저 프로필 정보를 조회하는 API를 사용했습니다.

• API URL 예시:
  https://api.github.com/users/{username}
  → {username} 부분에 조회하고 싶은 GitHub 유저의 이름을 넣으면 됩니다.
• 예시:
  https://api.github.com/users/kimjusnu

---

2️⃣ GitHub API 연결 준비

GitHub API는 기본적으로 비인증 요청도 지원합니다.
하지만 비인증 요청은 시간당 60회로 제한되어 있어요.

더 많은 요청을 처리하려면 OAuth 인증을 사용해야 하지만, 이번 프로젝트에서는 간단하게 비인증 API를 활용했습니다.

---

3️⃣ GitHub API 호출하기 (page.tsx 파일)

• 여기서 우리는 fetch라는 브라우저 내장 함수를 사용해 GitHub API에 요청을 보냅니다. 이 코드를 따라 하면 유저 이름을 입력하고, 해당 유저의 정보를 화면에 표시할 수 있어요.

const fetchUser = async (username) => {
  setLoading(true); // 로딩 상태 설정

  try {
    const response = await fetch(`https://api.github.com/users/${username}`);
    if (!response.ok) throw new Error('User not found'); // 에러 처리

    const data = await response.json(); // 데이터 파싱
    setUser(data); // 상태 업데이트
    setError(null); // 에러 초기화
  } catch (err) {
    setError(err.message); // 에러 저장
    setUser(null); // 유저 정보 초기화
  } finally {
    setLoading(false); // 로딩 종료
  }
};

---

4️⃣ fetch란?

fetch는 웹사이트가 다른 서버에 HTTP 요청을 보내도록 도와주는 함수입니다.
쉽게 말하면, 원격 서버에 데이터를 요청하고, 응답을 받아오는 역할을 해요.

fetch('https://api.github.com/users/{username}')
  .then((response) => response.json())
  .then((data) => console.log(data));

 

• API URL을 통해 GET 요청을 보냅니다.
• 응답을 JSON 형식으로 변환합니다.
• 데이터를 받아와 console.log로 출력가능합니다.

 

---

5️⃣ API 호출 시 동작 흐름

1. 로딩 표시: 데이터가 로드되는 동안 setLoading(true)로 로딩 상태를 보여줍니다.

2. API 호출:

const response = await fetch(`https://api.github.com/users/${username}`);

• GitHub API에 유저 이름을 담아 요청을 보냅니다.
• await를 사용해 요청이 완료될 때까지 기다립니다.

3. 에러 처리:

if (!response.ok) {
  throw new Error('User not found');
}

• 응답 코드가 200(성공)이 아니면 에러를 throw합니다.

4. 데이터 파싱:

const data = await response.json();

• JSON 형식으로 데이터를 변환합니다.

5. 상태 업데이트:

setUser(data); // 유저 데이터 저장
setError(null); // 에러 초기화

6. 에러 발생 시 처리:

setError(err.message); // 에러 메시지 저장
setUser(null); // 유저 정보 초기화

7. 로딩 중지:

setLoading(false);

• 데이터를 다 불러오면 로딩을 멈춥니다.

---

6️⃣  GitHub API로 제공되는 데이터 (표 형식)

아래는 GitHub API로 받아올 수 있는 기본 사용자 정보와 활동 및 통계 정보를 정리한 표입니다

항목	설명	예시
login	사용자의 GitHub 아이디	octocat
id	사용자의 고유 ID	583231
avatar_url	프로필 이미지 URL	이미지 링크
html_url	프로필 페이지 링크	octocat
name	사용자 이름	kimjusnu
company	소속된 회사나 조직	Google
location	유저 위치	Korea, Seoul
email	공개된 이메일	000@naver.com
bio	자기소개 문구	i love cat
twitter_username	트위터 아이디	2c.dasf

---

🔍 활동 및 통계 정보

항목	설명	예시
public_repos	공개 저장소 수	42
public_gists	공개 Gist 수	13
followers	팔로워 수	1500
following	팔로우 중인 유저 수	300
created_at	계정 생성 날짜	2011-01-25T18:44:36Z
updated_at	프로필 마지막 업데이트 시간	2024-10-20T10:14:27Z

---

📎 관련 리소스 링크

API 앤드포인트	설명
repos_url	유저의 저장소 목록 가져오기
followers_url	유저의 팔로워 목록 가져오기
following_url	유저가 팔로우하는 유저 목록 가져오기
gists_url	유저가 작성한 Gist목록 가져오기
events_url	유저의 활동 이벤트 목록 가져오기
organizations_url	유저가 속한 조직 목록 가져오