Github API 다루기

Github API를 통한 유저의 Repository 받아오기, 선택한 Repository의 issue 모아보는 기능을 만들어봤습니다.

아래 깃헙 링크를 통해 clone으로 직접 사용해보실수 있습니다.
깃헙 링크

repository

아래는 Repository를 불러오는 코드입니다.

await axios
  .get(`https://api.github.com/users/${username}/repos`, {
	headers: {
		Accept: "application/vnd.github.nightshade-preview+json",
				// Authorization: `Token b6b4269b1...`,
		},
	})
	.then((el) => changeHandler(el.data));

위 코드에 changeHandler는 prop로 받아온 핸들러입니다.

const changeHandler = (data) => {
	const repoData = JSON.stringify(data);
	localStorage.setItem("repoData", repoData);
	setToggle(!toggle);
};

핸들러에 data를 전달하면 data를 로컬스토리지에 repoData란 이름으로 저장해줍니다.

URL은 다음과 같습니다

https://api.github.com/users/$유저이름/repos

issue

아래는 issue를 불러오는 코드입니다.

// repoRegister 개수만큼 요청 후 해당 이슈만큼 map으로 뿌려줌
useEffect(() => {
	// 처음 불러올때 초기화
	let temp = [];
	const username = localStorage.getItem("username");
	const repoRegister = JSON.parse(localStorage.getItem("repoRegister"));

	if (repoRegister) {
		const getRepo = async () => {
			for (let i = 0; i < repoRegister.length; i++) {
				let url = `htts://api.github.com/repos/${username}/${repoRegister[i].name}/issues`;

				await axios
					.get(url, {
						headers: {
							Accept: "application/vnd.github.nightshade-preview+json",
						},
					})
					.then((res) =>
						res.data.forEach((el) => {
							el.repo = repoRegister[i].name;
							temp.push(el);
						})
					);
			}
			setLoading(!loading);
			setIssue(temp);
		};
		getRepo();
	}
	}, []);

1. 로컬스토리지에 저장된 username(계정명)과 repoRegister(등록된 레포지토리) 두개는 issue요청할 URL에 사용되야하기에 불러와줍니다.
   그리고 임시로 issue들을 담아놓을 배열도 선언해줍니다.

issue를 요청할 url은 다음과 같습니다.

https://api.github.com/repos/유저이름/레포지토리이름/issues

2. 한 페이지에 저장된 모든 Repository들의 issue를 보여줘야하기에 위처럼 for문을 사용해서 Repository 개수만큼 요청해줍니다.

3. header에 Accept 요청 까먹지 말고 넣어주고 요청해서 받아온 것들은 임시로 만든 배열에 추가해줍니다.

4. 모든 반복이 끝났다면 임시로 만든 배열을 상태로 관리하고 있는 issue 배열에 넣어줍니다.
   로딩도 끝내주세요.

setLoading(!loading);
setIssue(temp);

5. 이 모든걸 useEffect로 덮어주고 repoRegister가 있을때만 동작하게 조건문을 걸어놓는다면 완성입니다.

참조

공식문서
hyun-jii.log