JavaScript

AJAX

Asynchronous Javascript And XML - 상황

sync (동기 통신)

User Interface에서 Web Server로 모든 데이터를 요청하고 받는다.

async (비동기 통신)

User Interface에서 필요한 데이터를, Ajax Engine을 통해 문자화 된 JSON data로 Web Server에 요청하고, Ajax Engine을 통해 문자화 된 JSON data를 받는다.
=> sync에 비해 부드럽게 데이터를 가져온다.

문자화 된 데이터는 JSON.parse() 또는 JSON.stringify()를 사용해 변환한다.

REST

Repressentational State Transfer - 방법

• POST (Create)
• GET (Read)
• PUT (Update)
• DELETE (Delete)

XHR

1. new XMLHttpRequest() 생성자 함수를 변수에 담는다.
2. .open() 메소드를 사용해서 웹페이지를 연다.
3. .addEventListener('readystatechange', 콜백함수) 메소드를 사용하여 변화되는 상태에 따른 코드를 작성한다.
4. .send() 메소드를 사용하여 보낸다.

   JSDoc
   => /** */ 주석을 이용해서 함수에 대한 설명을 만들어줄 수 있다.

Promise

코드가 복잡하고, 어느 시점에서 코드가 실행됐는지 파악하기 어려운 콜백 함수 패턴을 개선하기 위해 사용한다.

let promise = new Promise(function(resolve, reject) {excutor})

• excutor는 반드시 실행된다.
• resolve 또는 reject 중 하나는 반드시 설정해야 하고, 둘 중 하나만 실행된다.
  => resolve가 실행됐을 때의 state는 fulfilled이다.
  => reject가 실행됐을 때의 state는 rejected이다.

  이후의 처리는 .then() 메소드를 사용하여 처리할 수 있다.

  • .then() 메소드의 첫 번째 인수는 promise가 이행되었을 때 실행될 함수(result)이다.
  • 두 번째 인수는 promise가 이행되지 않았을 때 실행될 함수(error)이다.
  • 보통은 두 번째 인수는 설정하지 않고, .catch() 절에서 promise가 이행되지 않았을 때의 실행될 함수를 설정한다.

Promise Chaining
.then | .catch | .finally를 호출하면 promise가 반환되기 때문에,
반환된 값에 다시 메소드를 사용할 수 있다.

비동기 통신에서 항상 promise를 반환하도록 해야 언제든 chaining 하기에 유리하다.

async()
function 앞에 async를 붙이면 해당 function은 항상 이행된 promise로 반환된다.