AJAX

AJAX??

Asynchronous Javascript and XML의 줄임말이다. 여기에서 핵심은 Asynchronous인데 비동기적인 앱 실행을 위해 생겨났다. AJAX는 하나의 특정 기술을 의미하는게 아니라 함께 사용하는 기술의 묶음을 지칭하는 말이다.

Ajax는 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 예를들어서 네이버 뉴스에서 내가 보고싶은 스포츠를 클릭했을때 페이지 전체가 다시 로딩하는게 아니라 그 부분만 바뀌는 것을 의미한다.

Callback

콜백함수를 봐보자

const printString = (string, callback) => {
  setTimeout(
    () => {
      console.log(string)
      callback()
    },
    Math.floor(Math.random() * 100) + 1
  )
}

const printAll = () => {
  printString("dog", () => {
    printString("cat", () => {
      printString("tuttle", () => {})
    })
  })
}

printAll()

결과값은 언제나 "dog" => "cat" => "tuttle" 순으로 프린트 될 것이다. 하지만 여기에는 단점이 있는데 'callback hell'이다.

보는 것처럼 가독성이 낮고 관리하기에도 불편하다. ㅠㅠ

Promise

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.
Promise 객체는 3가지 상태를 가지고 있다.

pending: 초기상태인데, fullfilled와 rejected둘다 아닌 상태
fullfilled: 연산이 성공적으로 완료됨
rejected: 연산이 실패함

const prinntString = (string) => {
  return new Promise((resolve, reject) => { //Promise 객체를 리턴 한다. 
    setTimeout(
      () => {
      	console.log(string)
        resolve() //다음 액션으로 reject는 에러를 다룸.
      },
      Math.floor(Math.random() * 100) + 1
  	)
  })
}

const printAll = () => {
  printString("dog") //Promise객체를 가진 instance 이다.
  .then(() => { //그래서 긍정일 경우에는 .then안에 있는 것을 실행한다.
  	return printString("cat")
  })
  .then(() => {
  	return printString("tuttle")
  })
}
printAll()

이전의 callback과 비교했을 경우에 훨신 가독성이 올라가고 눈이 편해짐을 느낄 수 있다. 하지만 Promise도 return을 사용하지 않을 경우 hell에 빠질수있다. 그래서 return을 사용해서 Promise Chaining을 해주는게 좋다.

async & await

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 내가 async & await을 사용하고 나서 가장 크게 느낀 부분은 바로 이해할 수 있었다.

function fetchAnimals(){
  return new Promise(function(resolve, reject){
    let Animals = ['dig', 'cat', 'tuttle'];
    resolve(Animals)
  });
}

async function logAnimals(){
  let result = await fetchAnimals();
  console.log(result);
}

await를 사용하지 않았다면 데이터를 받아온 시점에 콘솔을 출력할 수 있게 콜백함수나, .then()등을 사용해야 했을 거다. 하지만 await를 사용함으로서 기존의 비동기 처리 코드 방식으로 사고하지 않아도 되는 장점이 생긴다.