클라우딩 어플리케이션 엔지니어링 TIL(번외1)

API 추가 설명

• API(Application Programming Interface)는 서로 다른 소프트웨어 간의 통신을 위한 구성이나 프로토콜을 규정한 인터페이스 사양이다
• API 자체가 하나의 프로그램이 아니라 규범으로 같은 API를 쓸 지라도 개발자들의 요구에 따라 다른 형태로 사용될 수 도 있다.

  자바스크립트의 API 예시:
  XML HTTP Request
  Fetch API
  Axios
  jQuery AJAX

각 API의 특징 살펴보기

XML HTTP Request
새로 고침 없이 사용 가능함, AJAX에서도 사용 가능
사용 예시

요청 및 반환

var xmlHttp = new XMLHttpRequest(); (객체 생성)
xmlHttp.onreadystatechange = function() { // onreadystatechange 이벤트 핸들러를 작성함.
    // 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었을 때
    if(this.status == 200 && this.readyState == this.DONE) {
        // 요청한 데이터를 문자열로 반환함.
        document.getElementById("text").innerHTML = xmlHttp.responseText;            
    }
};
xmlHttp.open("GET", "/examples/media/xml_httpxmlrequest_data.txt", true);
xmlHttp.send();

텍스트 전달

xmlObj = xmlHttp.responseXML;                   // 요청한 데이터를 XML DOM 객체로 반환함.
nameList = xmlObj.getElementsByTagName("name"); // XML DOM 객체에서 요소이름이 "name"인 요소들을 선택함.
result = "";
for (idx = 0; idx < nameList.length; idx++) {
    // id가 "name"인 요소들의 텍스트 노드를 찾아 그 값을 반환함.
    result += nameList[idx].childNodes[0].nodeValue + "<br>";
}
document.getElementById("text").innerHTML = result;

Fetch API
간단한 사용(XML보다 훨씬 코드가 짧음)
XML처럼 비동기, promise 기반 코드

사용 예시

fetch(url, options) //URL 설정 및 받아올 데이터 설정
  .then((response) => console.log("response:", response)) //성공시 데이터 받기
  .catch((error) => console.log("error:", error)); //실패시 핸들링

Axios
Node.js 및 promise 기반 API
서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용

사용 예시

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response); //성공시 데이터 받기
  })
  .catch(function (error) {
    console.log(error); //실패시 핸들링
  });

jQuery AJAX
전체 HTML 파일이 아닌 갱신이 필요한 파일만 갱신 가능
복잡하지만 자체적으로 인터랙티브한 웹페이지 구현

사용 예시

<script type="text/javascript">
    function ajax_text() {
        var test_text = "go";
        $.ajax({ 
            type:"POST", 
            url:"test_page2.php",
            data: {
                text: test_text,
            },
            dataType:"text",
            success:function(result){ 
                console.log(result);
            }
        });
    }
</script>
<div id="button" class="box" onclick="ajax_text()">
    ajax 통신하기!
</div>

RESTful API
현대 API의 대세 규칙, 웹 기반 통신에 최적화된 룰이기 때문에 대다수의 API가 준수하는 규칙

• 주요 조건들(https://code-lab1.tistory.com/194)
  Server-Client(서버-클라이언트 구조)
  Stateless(무상태)
  Cacheable(캐시 처리 가능)
  Layered System(계층화)
  Uniform Interface(인터페이스 일관성)

• Server-Client(서버-클라이언트) 구조 
  : 자원이 있는 쪽이 서버, 자원을 요청하는 쪽이 클라이언트가 된다. 서버는 API를 제공하고 비즈니스 로직 처리 및 저장을 책임진다. 

• Stateless(무상태)
  : 서버에 정보를 저장하지 않는다

• Cacheable ( 캐시 처리 가능)
  HTTP의 캐싱 기능을 적용할 수 있다.

• Layered System(계층화)
  클라이언트는 REST API 서버만 호출한다. REST 서버는 다중 계층으로 구성될 수 있다.

• Uniform Interface(인터페이스 일관성)
  URI로 지정한 자원에 대한 조작을 통일되고 한정적인 인터페이스로 수행한다.