오늘 배운 것

Javascript 개념

비동기 통신 APIs

• AJAX

  Asyncronous Javascript and XML | Javascript의 비동기 통신

  클라이언트와 서버 간 데이터를 주고 받을 때 HTTP 통신을 사용한다.

  그 중에서도 AJAX는 변경하고 싶은 부분(필요한 부분)만 서버에 비동기적으로 요청하여 특정 데이터(JSON, XML 형식)을 받아 부분적으로 화면을 갱신하게 해주는 기술이다.
  

• XMLHttpRequest

  XMLHttpRequest 객체를 이용한 Ajax의 구현

  • 특징
    Ajax 기술의 핵심적인 구성 요소로서 객체에서 제공하는 프로퍼티와 메서드 등을 이용해서 HTTP 통신을 가능하게 해준다.
    

  • 구현 방법

            const xhr = new XMLHttpRequest() // 객체 생성
    
            xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1") // http 요청 초기화
            xhr.setRequestHeader("content-type", "application/json") // http 요청 헤더 설정
            xhr.send() // http 요청 전송
    
            // HTTP 요청이 성공했을 경우 발생하는 이벤트 핸들러
            xhr.onload = () => {
              if (xhr.status === 200) {
                console.log(JSON.parse(xhr.response))
              } else {
                console.error("Error", xhr.status, xhr.statusText)
              }
            }

  • 장/단점

    • 장점
      - 별도의 dependency가 필요하지 않다.
    • 단점
      - 요청할 때의 코드가 장황하고 가독성이 좋지 않다.
      - 크로스 브라우징 기능이 없기 때문에 브라우저 호환성이 떨어진다.
      - 콜백 지옥이 발생할 가능성이 있다.
      → 응답 데이터/에러를 받을 때 콜백 함수를 이용하기 때문에, 받은 데이터를 이용해서 또 비동기 통신을 해야 할 때 콜백 지옥 발생
      

• jQuery - $.ajax

  jQuery 라이브러리에서 제공하는 API

  • 특징
    jQuery 라이브러리를 import 해서 사용해야 한다.
    XMLHttpRequest 객체를 이용한 통신의 불편함, 호환성을 보완하여 등장했다.
    콜백 함수를 이용하여 비동기 통신을 구현한다.

  • 구현 방법

    $.ajax({
              url: "https://jsonplaceholder.typicode.com/todos/1", // 요청 서버 URL 주소
              data: {}, // 서버로 보낼 데이터 (메서드에 따라 선택)
              type: "GET", // HTTP 요청 메서드(GET, POST, PUT, DELETE ...)
              dataType: "json", // 서버에서 보내줄 데이터의 타입
              success: function onData(data) { // 서버 응답이 성공하였을 때 실행되는 함수
                console.log(data)
              },
              error: function onError(error) { // 서버 응답이 실패하였을 때 실행되는 함수
                console.error(error)
              },
            })

  • 장/단점

    • 장점
      - 요청을 직관적으로 작성할 수 있다.
      - 브라우저 호환성을 지원한다.
      - 지원하는 기능이 많다.
      → jQuery의 deferred 객체, when 등 Promise 와 비슷한 기능을 지원하여 콜백 지옥에서 벗어날 수 있다.
    • 단점
      - jQuery 라이브러리를 사용해야 한다.
      → 비동기 통신만을 위해 사용하는 것이라면 무거운 라이브러리를 사용하기가 부담.
      

• fetch api

  • 특징

    ES6 부터 도입된 Javascript 내장 API

    Promise 기반으로 만들어져 있다.
    응답 형태가 Response 객체이기 때문에 처리를 해주어야 한다.
    → res.json(), res.text() 등
    
  • 구현 방법

    const post = (url, payload) => {
      return fetch(url, {
        method: 'POST',
        headers: {'content-Type': 'application/json'},
        body: JSON.stringify(payload)
      })
    }
    
    const url = 'https://getmyinfo.com/posts/1'
    post(url, { payload: 'payload' })
    	.then(res => console.log(res))

  • 장/단점
    • 장점
      - Promise 기반으로 동작하므로 콜백 지옥이 없다.
      - 라이브러리 추가 없이 이용할 수 있다.
      - xhr 객체 대비 가독성이 조금 더 좋아진다.
      - React Native의 잦은 업데이트에도 잘 적용된다.
      → 아직 안정화가 되지 않은 프레임워크의 지속적인 update에도 에러 발생 확률이 낮다.
      
    • 단점
      - 내장 API로 브라우저 간 호환성 지원이 없다.
      - 기능이 부족하다. (response timeout 등)
      - API 요청 취소가 불가능하다.

• axios

  • 특징

    node.js와 브라우저를 위한 HTTP 통신 라이브러리

    Promise 기반으로 동작한다.
    React, Vue.js에서 많이 사용된다.
    
  • 구현 방법

    axios({
      method: 'post',
      url: 'https://getmyinfo.com/posts/1',
      data: { payload: 'payload' }
    });

  • 장/단점
    • 장점
      - 코드가 간단하고, 가독성이 좋다.
      - Promise 기반으로 동작하므로 콜백 함수의 걱정이 없다.
      - 크로스 브라우징 기반으로 브라우저 호환성이 좋다.
      - 자동으로 JSON 데이터 형식으로 변환된다.
      - fetch api 보다 기능이 많다
      → 요청 취소 기능, response timeout 기능, HTTP 요청 가로채기 기능/interceptors - XSRF 해킹 기법에 비교적 안전하다. (보안성)
    • 단점
      - 라이브러리를 설치해야 한다.
      

[참고 및 출처]
https://ghost4551.tistory.com/139
https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch#ajax
https://ko.javascript.info/fetch