(API활용) 깃허브 유저찾기 app 1

https://docs.github.com/en/rest?apiVersion=2022-11-28

GitHub REST API documentation - GitHub Docs

To create integrations, retrieve data, and automate your workflows, build with the GitHub REST API.

docs.github.com

github에서 제공하는 api 목록들임

제일 하단에 Users api를 활용할 예정

한 명의 유저를 찾아옴

이 api를 요청 할 때

fetch api

Axios 사용해볼거임

https://axios-http.com/kr/

Axios

브라우저와 node.js를 위한 Promise 기반 HTTP 클라이언트 라이브러리 Axios는 브라우저와 node.js를 위한 간단한 Promise 기반 HTTP 클라이언트입니다. Axios는 확장 가능한 인터페이스를 가진 작은 패키지로

axios-http.com

ajax를 좀 더 편하게 하기 위한 라이브러리임

gitbash 로 열기

code . vs코드로 염

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>깃허브 유저찾기</title>
  </head>
  <body>
    <form class="user-form" id="form">
      <input
        type="text"
        id="search"
        placeholder="깃허브 유저 검색"
        autocomplete="off"
      />
    </form>

    <main id="main">
      <div class="card">
        <div>
          <!-- 언스플래쉬에서 랜덤으로 이미지 가져옴 -->
          <img
            src="https://source.unsplash.com/random/300×300"
            class="avatar"
          />
        </div>
        <div class="user-info">
          <h2>홍길동</h2>
          <p>lorem15</p>
          <ul>
            <li>300 <strong>Fallowers</strong></li>
            <li>100 <strong>Fallowing</strong></li>
            <li>30 <strong>Repos</strong></li>
          </ul>
          <div class="repos">
            <a href="#" class="repo">저장소 1</a>
            <a href="#" class="repo">저장소 2</a>
            <a href="#" class="repo">저장소 3</a>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

css생성

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: cornflowerblue;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.user-form {
  width: 100%;
  max-width: 700px;
}

.user-form input {
  width: 100%;
  display: block;
  background-color: #4c2885;
  border: none;
  border-radius: 10px;
  color: #fff;
  padding: 1rem;
  margin-bottom: 2rem;
  font-family: inherit;
  font-size: 1rem;
  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1);
}

.user-form input::placeholder {
  color: #bbb;
}

.user-form input:focus {
  outline: none;
}

.card {
  max-width: 800px;
  background-color: #4c2885;
  border-radius: 20px;
  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1);
  display: flex;
  padding: 3rem;
  margin: 0 1.5rem;
}

.avatar {
  border-radius: 50%;
  border: 10px solid #2a2a72;
  height: 150px;
  width: 150px;
}

.user-info {
  color: #eee;
  margin-left: 2rem;
}

.user-info h2 {
  margin-top: 0;
}

.user-info ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
  max-width: 400px;
}

.user-info ul li {
  display: flex;
  align-items: center;
}

.user-info ul li strong {
  font-size: 0.9rem;
  margin-left: 0.5rem;
}

.repo {
  text-decoration: none;
  color: #fff;
  background-color: #212a72;
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
}

@media (max-width: 500px) {
  .card {
    flex-direction: column;
    align-items: center;
  }

  .user-form {
    max-width: 400px;
  }
}

lorem15 사용해서 랜덤 단어 넣어주고

나는 색상을 바꿔줌

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코

axios-http.com

</head>

Axios 라이브러리 CDN 추가하기

endpoint

https://docs.github.com/en/rest/overview/endpoints-available-for-github-app-installation-access-tokens?apiVersion=2022-11-28

위의 주소로 가져올거임

일단 테스트해줌

endpoint를 사용해서 유저정보를 가져올건데

기본적으로 들어가는 api 벡앤드 주소임

localhost:8080과 동일하다고 생각하면됨

const API_URL = "http://api.github.com/users/";

async function getUser(username) {
  const result = await axios(API_URL + username);
  console.log(result);
}
getUser("jbkim08"); //해당 유저 정보를 가져옴

axios가 유저 데이터를 가져오는데

그 때 기다려야함 (다 가져올 때 까지 ) 그래서 await 가 들어가고 function 앞에는 async가 붙음

console.log로 result를 출력해봄

f12 개발자모드로 확인해보면 콘솔에 뜸

status 200 정상적으로 정보를 받음

우리가 원하는 정보는 data만 있으면 됨

깃허브 유저의 블로그, 가입날짜 등 있음

자바 스크립트 수정

data만 가져오기

async function getUser(username) {
  const { data } = await axios(API_URL + username);
  console.log(data);
}

다시 확인하기 data 만 가져옴

만약 아이디를 잘 못 입력하면 에러가 발생함

그래서 try catch문으로 에러가 있으면 에러 출력하게끔 코드 수정함

async function getUser(username) {
  try {
    const { data } = await axios(API_URL + username);
    console.log(data);
  } catch (error) {
    if (error) {
      console.log(error);
    }
  }
}

아래와 같이 에러가 출력된다.

아이디 입력창에 아이디를 입력하고 엔터를 누르면 submit됨

테스트해봄

const form = document.getElementById("form");

form.addEventListener("submit", (e) => {
  e.preventDefault(); //
  console.log("서브밋이벤트");
});

const form = document.getElementById("form");
const search = document.getElementById("search");

form.addEventListener("submit", (e) => {
  e.preventDefault(); // submit 시 서버 전달 이벤트 중지
  const user = search.value;
  console.log(user);
});

테스트

//alert("테스트");

//상수라서 대문자로 작성함
const API_URL = "http://api.github.com/users/";

async function getUser(username) {
  try {
    const { data } = await axios(API_URL + username);
    console.log(data);
  } catch (error) {
    if (error) {
      console.log(error);
    }
  }
}

//getUser("jbkim08"); //해당 유저 정보를 가져옴

const form = document.getElementById("form");
const search = document.getElementById("search");

form.addEventListener("submit", (e) => {
  e.preventDefault(); // submit 시 서버 전달 이벤트 중지
  const user = search.value;
  //console.log(user);
  if (user) {
    getUser(user); //유저 정보 가져오기
    search.value = ""; // 입력값 초기화
  }
});

확인

'FRONTEND > 기타' 카테고리의 다른 글

[Typescript] 공부 내용 정리 (1)	2024.08.30
(API활용) 깃허브 유저찾기 app 2 (1)	2023.11.14
AJAX 기본 개념 및 예제 (1)	2023.10.16
로또 번호 가져오기 (0)	2023.10.06
jQuery 를 활용해 AJAX 사용 load() (0)	2023.10.06

Axios 사용해볼거임

'FRONTEND > 기타' 카테고리의 다른 글

티스토리툴바