[react] git API를 이용해보기(1) (yarn, react-route, axios)

react를 이용해 개인 git 프로필을 불러오고 관련하여 몇가지 기능을 수행하는 페이지를 만들어 보려한다.

npx create-react-app 으로 최초 프로젝트는 준비되어 있는 상태를 가정한다.

우선 관련 기능을 구현하기 위한 라이브러리를 불러온다

$ npm install axios react-route antd
$ yarn add axios react-route antd

각 library에 대한 설명은 너무 잘 설명된 페이지가 많기 때문에 생략한다.

이후 API를 이용한 호출기능을 먼저 확인하기 위해 app.js 파일을 아래와 같이 수정한다.

import './App.css';
import 'antd/dist/antd.css';
import './index.css';
import { Button } from 'antd';

function App() {
  return (
    <div className="App">
        <>
            <Button type="primary">Primary Button</Button>
            <Button>Default Button</Button>
            <Button type="dashed">Dashed Button</Button>
            <br />
            <Button type="text">Text Button</Button>
            <Button type="link">Link Button</Button>
        </>
    </div>
  );
}

export default App;

위와 같이 버튼들이 생겨있는데, Primary Button을 클릭했을 때 API를 호출하도록 만들어보자.

본인의 정보 불러오기

git API를 사용하기 위해 아래 링크에서 token을 발급받아야 한다. (API호출에 대한 인증을 위해)
https://github.com/settings/tokens/new

GitHub: Where the world builds software

위 링크에서 Expiration, Scope를 설정하고 token을 발급받으면 토근 발급이 완료된 것이다.
이후 아래와 같이 app.js를 수정하고 YOUR_TOKEN에 발급받은 token을 붙여넣고 primary button을 클릭해보자.

import './App.css';
import 'antd/dist/antd.css';
import './index.css';
import { Button } from 'antd';
import axios from "axios";

async function getData() {
    const token = 'YOUR_TOKEN'
    const config = {
        headers: {
            Authorization: `Bearer ${token}`
        }
    };
    try {
        //응답 성공
        const response = await axios.get('https://api.github.com/user',config);
        alert(response.status);
    } catch (error) {
        //응답 실패
        alert(error.status);
    }
}

function App() {
  return (
    <div className="App">
        <>
            <Button type="primary" onClick={getData}>Primary Button</Button>
            <Button>Default Button</Button>
            <Button type="dashed">Dashed Button</Button>
            <br />
            <Button type="text">Text Button</Button>
            <Button type="link">Link Button</Button>
        </>
    </div>
  );
}

export default App;

제대로 수행되었다면 위 화면과 같이 200 status code를 출력하는 경고창(alert)을 확인할 수 있을 것이다.
이제 response variable의 결과값을 활용하면 본인 git 계정에 대한 정보를 다룰 수 있다.

다른 USER의 정보 불러오기

이번엔 간단한 검색창을 통해 다른 유저의 이메일 정보를 불러오는것을 확인해보자.
마찬가지로 아래 코드에 YOUR_TOKEN에만 본인의 token을 입력하여 예제를 수행한다.

import './App.css';
import 'antd/dist/antd.css';
import './index.css';
import { Button, Input } from 'antd';
import axios from "axios";

const { Search } = Input;


async function getData() {
    const token = 'YOUR_TOKEN'
    const config = {
        headers: {
            Authorization: `Bearer ${token}`
        }
    };
    try {
        //응답 성공
        const response = await axios.get('https://api.github.com/user',config);
        alert(response.status);
        console.log(response);
    } catch (error) {
        //응답 실패
        alert(error.status);
        console.log(error);
    }
}

async function getUser(userName) {
    const token = 'YOUR_TOKEN'
    const config = {
        headers: {
            Authorization: `Bearer ${token}`
        }
    };
    try {
        //응답 성공
        const response = await axios.get('https://api.github.com/users/'+userName,config);
        alert(response.data.email);
        console.log(response);
    } catch (error) {
        //응답 실패
        alert(error.status);
        console.log(error);
    }
}

const onSearch = value => getUser(value);

function App() {
  return (
    <div className="App">
        <>
            <Button type="primary" onClick={getData}>Primary Button</Button>
            <Button>Default Button</Button>
            <Button type="dashed">Dashed Button</Button>
            <br />
            <Button type="text">Text Button</Button>
            <Button type="link">Link Button</Button>
        </>
        <br/>
        <Search placeholder="input search text" onSearch={onSearch} enterButton />
    </div>
  );
}

export default App;

이후 입력창에 올바른 유저의 이름을 입력하면 해당 유저의 이메일 정보를 확인할 수 있지만, 등록되지 않은 유저를 입력한 경우 undefined를 확인하게 된다.

올바른 결과

잘못된 결과