[Javascript] Axios / openAPI

2022. 4. 4. 15:41

#1. Axios

1. Axios의 개념

1) Axios란?

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이리브러이다.
상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘 되어 있고, API가 다양하다.
프론트엔드와 백엔드의 통신을 쉽게 하기 위해 Ajax와 함께 많이 사용한다.

2) Axios의 특징

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
Promise API 사용 (ES6)
요청 및 응답 데이터 변환
HTTP 요청 취소
HTTP 요청과 응답을 JSON 형태로 자동 변경

3) Axios 설치

npm 사용하기

npm install axios

bower 사용하기

bower install axios

yarn 사용하기

yarn add axios

jsDelivr CDN 사용하기

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

unpkg CDN 사용하기

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. Axios 사용하기

라이브러리를 설치(또는 CDN방식으로 사용)하면 axios라는 변수에 접근할 수 있게 된다.
HTTP에서는 클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알리는 메서드가 있다.
접속 방식에는 대표적으로 GET, POST, PUT, DELETE 가 있고, 각각 함수로 존재한다.

1) GET(읽기, READ) : axios.get(url, [config])

단순 데이터(페이지 요청, 지정된 요청) 요청을 수행할 경우에 사용한다
파라미터 데이터를 포함시키는 경우 (사용자 번호에 따른 조회)
서버에서 어떤 데이터를 가져와서 보여주는 역할을 한다.
값이나 상태등르 바꿀 수는 없다.

axios
  .get("url")
      /*
      옵션을 주고자 할 때는 params를 통해 요청한다.
      axios.get("url", {
        params: {
          ID: 12345
        }      
      })
      */
  // 성공했을 때
  .then((response) => {
  console.log(response);
  })
  // 에러가 났을 때
  .catch((e) => {
  console.error(e);
  }) 
  // 항상 실행되는 함수
  .finally(() => {
    .. 실행할 함수 ..
});


// --- async&await 으로 axios 사용 --- //
async function example() {
  try {
    const ex = await axios.get("url");
    console.log(ex);
  } catch(e) {
    console.error(e);
  } finally {
    .. 실행할 함수 ..
}

2) POST(생성, CREATE) : axios.post(url, {data객체}, [config])

post 메서드에는 일반적으로 data를 Message Body에 포함시켜 보낸다.
두번 째 파라미터는 본문으로 보낼 데이터를 설정한 객체를 전달한다.
로그인, 회원가입 등 사용자가 생성한 파일을 서버에 업로드 할 때 사용한다.
- post를 사용하면 주소창에 쿼리스트링이 남지 않기 때문에 GET 보다 안전하다.
위의 get 메서드에서의 parmas를 사용한 경우와 비슷하게 수행된다.

axios
  .post("url", {
    ex1 : "example1",
    ex2 : "exmpale2"
  })
  // 성공했을 때
  .then((response) => {
  console.log(response);
  })
  // 에러가 났을 때
  .catch((e) => {
  console.error(e);
  }) 
  // 항상 실행되는 함수
  .finally(() => {
    .. 실행할 함수 ..
});

3) PUT(갱신, UPDATE) : axios.put(url, [data,[config]])

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신(수정)하는 목적으로 사용된다.
put 메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.
put 메서드는 서버 내부적으로 get -> post 과정을 거치기 때문에 post 메서드와 비슷한 형태이다.

axios
  .put("url", {
    uesername : "",
    password : ""
  })
  // 성공했을 때
  .then((response) => {
  console.log(response);
  })
  // 에러가 났을 때
  .catch((e) => {
  console.error(e);
  }) 
  // 항상 실행되는 함수
  .finally(() => {
    .. 실행할 함수 ..
});

4) DELETE(삭제, DELETE): axios.delete(url, [config])

delete 메서드는 일반적으로 body가 비어있다.
REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.
- 두번째 인자를 아예 전달하지 않는다.

axios
  .delete("url")
  // 성공했을 때
  .then((response) => {
  console.log(response);
  })
  // 에러가 났을 때
  .catch((e) => {
  console.error(e);
  }) 
  // 항상 실행되는 함수
  .finally(() => {
    .. 실행할 함수 ..
});

query나 params가 많아져 헤더에 만흥ㄴ 정보를 담을 수 없을 때는 두번째 인자에 data를 추가해 줄 수 있다.

axios
  .delete("url", {
    data: {
      postID : 1,
      commentID : 23,
      username : "andy"
    }
  })
  // 성공했을 때
  .then((response) => {
  console.log(response);
  })
  // 에러가 났을 때
  .catch((e) => {
  console.error(e);
  }) 
  // 항상 실행되는 함수
  .finally(() => {
    .. 실행할 함수 ..
});

#2. openAPI

1. openAPI의 개념

1) openAPI란?

open + api 로써 (Open + Application Programming Interface) 누구나 사용할 수 있도록 공개된 API를 말한다.
openAPI를 사용하면, 개발시 들어가는 시간을 줄이고, 비용을 절감할 수 있다.
openAPI를 통해 정보를 제공함으로써 더 많은 이익을 얻을 수 있다.
- 제공자와 개발자는 공생관계를 이루고 있다.

※ API ?

어떠한 응용 프로그램에서 데이터를 주고 받기 위한 방법을 의미한다.
오픈 api와 비공개 api로 나누어지며, 특정 사이트에서 특정 데이터를 공유할 경우 정보를 어떠한 방식으로 통신할지에 대한 규격을 api라고 한다.

※ Interface ?

어떤 기계(장치)끼리의 정보를 교환하기 위한 수단이나 방법을 의미한다.
또는 신호를 주고 받기 위한 방법을 인터페이스라고 한다.

2) 사용범위 및 제공처

지도, SNS, 음악, 공공데이터, 비즈니스, 날씨, 쇼핑 등 우리 생활과 밀접한 다양한 분야에서 사용가능하다.
대표적으로 네이버, 다음, 카카오, 구글 등에서 제공하고, 정부에서도 그동안 수집한 공공데이터를 openAPI 형태로 제공하고 있다.

2. openAPI 사용방법

openAPI는 많은 곳에서 제공하고 있지만, 영화진흥위원회에서 제공하는 영화에 관련된 정보를 사용하는 예시이다.

1) 회원가입

openAPI 서비스를 이용하기 위해서는 먼저 공개키를 발급 받아야 한다.
- 공개키를 발급 받기 위해서는 회원가입을 먼저 해야한다.
- 승인된 공개키가 있어야만 openAPI에서 제공되는 데이터를 이용할 수 있다.

2) 키 발급 받기

회원가입 완료 후 키 발급/관리 카테고리에 들어가서 공개키를 발급 받는다.
발급 받은 키는 사용 횟수가 정해져 있어 공유해서 사용하면 나중에 사용 못할 수 도 있다. (일 3000회 .. )

3) 제공서비스 이용하기

OPEN API 카테고리에 들어가면 영화진흥위원회에서 제공하는 서비스들을 확인할 수 있다.
왼쪽에 제공서비스 목록들이 있고, 각각 서비스마다 제공하는 url주소가 다르다.
현재는 2번 SOAP방식 보단, 1번 REST 방식을 많이 사용한다.
3번 인터페이스를 활용해서 값을 요청할 수 있다.

4) 영화순위표 만들기

<h1>영화진흥위원회 박스오피스 순위</h1>
<!-- 날짜 선택 -->
<input type="date" id="targetDt">
<hr />
<!-- 테이블 -->
<table border="1">
  <thead>
    <tr>
      <th>순위</th>
      <th>영화제목</th>
      <th>관객수</th>
      <th>개봉일</th>
    </tr>
  </thead>
  <tbody id="list-body"></tbody>
</table>
<!-- axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

async-await으로 비동기 처리한다.

// 파라미터로 백엔드에 전달할 값을 받아 이를 Ajax로 요쳥한 후 화면에 출력하는 함수
// async / await으로 비동기처리
const getMoiveRank = async (targetDt) => {
  // 값을 추가할 영역 요소 가져오기
  const listBody = document.querySelector("#list-body");
  // 기존에 있는 값 요소 가져오기
  const oldItem = listBody.getElementsByTagName("tr");

  // 기존에 있는 값을 배열로 만들어서 삭제한다.
  Array.from(oldItem).map(v => {
    listBody.removeChild(v);
  });

  // json변수에 null 값으로 지정
  let json = null;

  // 성공시 수행될 코드
  try {
    // rest 방식으로 가져온 url 값을 json변수에 대입
    json = await axios.get("http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json", {
      params: {
        // 키 값을 지정한다.
        key: "발급 받은 키 입력",
        // 조회할 날짜 값 지정
        targetDt: targetDt,
      },
    });
    // 실패시 수행될 코드
  } catch(e) {
    console.error(e);
    alert("요청을 처리하는데 실패했습니다.");
    return;
  };

  // json 변수가 null이 아니라면, (수신에 성공했다면)
  if(json != null) {
    // 비구조문법으로 값을 대입
    const {data} = json;
    
    // map을 활용해 값을 HTML 요소에 넣어준다.
    data.boxOfficeResult.dailyBoxOfficeList.map(v => {
      const tr = document.createElement("tr");

      const td1 = document.createElement("td");
      td1.innerHTML = v.rank;

      const td2 = document.createElement("td");
      td2.innerHTML = v.movieNm;

      const td3 = document.createElement("td");
      td3.innerHTML = v.audiCnt;

      const td4 = document.createElement("td");
      td4.innerHTML = v.openDt;

      tr.appendChild(td1);
      tr.appendChild(td2);
      tr.appendChild(td3);
      tr.appendChild(td4);

      listBody.appendChild(tr);
    });
  };
};

// e.currentTarget.value가 "yyyy-mm-dd" 형식이므로 "-"를 제거
document.querySelector("#targetDt").addEventListener("change", e => {
  const date = e.currentTarget.value.replaceAll("-", "");
  getMoiveRank(date);
});

// 하루 전의 년,월,일
const date = new Date();
let yy = date.getFullYear();

let mm = date.getMonth() + 1;
// 한자리 숫자인 경우 자리수 맞춤
mm = mm < 10 ? `0${mm}` : mm;

let dd = date.getDate();
dd = dd < 10 ? `0${dd}` : dd;

// 문자열로 결합
const sendDate = (yy + mm + dd).toString();
getMoiveRank(sendDate);

저작자표시 비영리 변경금지

'국비수업 > JavaScript' 카테고리의 다른 글

[Javascript] CRUD (0)	2022.04.07
[Javascript] Ajax / JSON-Server (0)	2022.04.02
[Javascript] 라이브러리 활용 (0)	2022.04.01
[Javascript] 데이터 읽기, 쓰기 / window 객체 (0)	2022.03.31
[Javascript] Form 요소 (0)	2022.03.28

{ chanCo }