[깃허브 앱] 깃허브 API 로 유저 검색

Postman으로 깃허브 api 테스트한다. 

 

 

내 ID로 검색해봤다. 

 

 

 

 

검색어로도 유저 검색이 가능하다. 

 

 

 

Body-> headers

깃허브 토큰 없이 api를 사용하면 10번이 한계이고 9번 남았다는 뜻

 

 

그래서 깃허브에서 토큰 발급을 해볼것

 

 

 

 

토클 발급 후 포스트맨으로 돌아가서 

 

 

토큰 번호를 입력한 후 다시 api 데이터를 받아봤다.

리밋이 늘어난게 보임 

10->30

 

 

그리고 토큰을 .env 파일에 넣어서 보관한다. 

url도 추가

 

 

import { useEffect } from "react";

function UserResults() {
  useEffect(() => {
    fetchUsers();
  }, []); //앱 시작시 실행됨

  const fetchUsers = async () => {
    //onsole.log(`${import.meta.env.VITE_GITHUB_TOKEN}/users`);
    const response = await fetch(`${import.meta.env.VITE_GITHUB_URL}/users`, {
      headers: {
        Authorization: `token ${import.meta.env.VITE_GITHUB_TOKEN}`,
      },
    });
    const data = await response.json();

    console.log(data);
  };
  return <div>유저결과</div>;
}

export default UserResults;

 

 

 

 

Home.jsx

 

 

 

 

30개 배열 출력되는것을 확인 가능하다.

 

 

 

 

 

useState를 만든다. 

 

 

console 로 확인한 data를 setUsers에 저장한다. 

 

그리고 users를 map반복문으로 user의 login 만 불러온다

 

 

 

 

 

그리고 로딩 중을 표시할 수 있게끔 

만들어 봄

 

 

 

 

import { useEffect, useState } from "react";

function UserResults() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true); //시작 시 깃허브에서 데이터를 가져옴(작업중 true)

  useEffect(() => {
    fetchUsers();
  }, []); //앱 시작시 실행됨

  const fetchUsers = async () => {
    //onsole.log(`${import.meta.env.VITE_GITHUB_TOKEN}/users`);
    const response = await fetch(`${import.meta.env.VITE_GITHUB_URL}/users`, {
      headers: {
        Authorization: `token ${import.meta.env.VITE_GITHUB_TOKEN}`,
      },
    });
    const data = await response.json();

    setUsers(data);
    setLoading(false); // 데이터 로딩 완료(false)
  };
  if (!loading) {
    return (
      <div className="grid grid-cols-8 gap-8 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2">
        {users.map((user) => (
          <h3 key={user.id}>{user.login}</h3>
        ))}
      </div>
    );
  } else {
    return <h3>로딩중</h3>;
  }
}

export default UserResults;

 

 

 

 

로딩중 출력됨을 확인가능함

 

 

이제 로딩중이라는 텍스트말고 gif파일로 

모형으로 로딩중을 만들어줄거임

 

https://loading.io/

 

 

git 파일로 다운로드 받는다. 

 

 

 

import spinner from "../../assets/Spinner.gif";

function Spinner() {
  return (
    <div className="w-100 mt-20">
      <img
        src={spinner}
        className="text-center mx-auto"
        width={180}
        alt="로딩..."
      />
    </div>
  );
}

export default Spinner;

 

 

로딩중 대신에 스피너 컴포넌트 사용

 

     <div className="grid grid-cols-1 gap-8 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2">

 

잘 나오는지 테스트한다.