비동기 처리의 단점

비동기 처리의 경우 Web API로 들어오는 요청 순서가 아닌, 작업이 완료되는 순서에 따라 처리된다는 특징이 있다.

이 경우 실행과정을 예상할 수 없어 코드의 실행 순서가 불명확해진다는 단점이 생김.

이 경우 Callback 함수를 사용하면 순서를 명확히 할 수 있음

Callback

Callback Function

• 다른 함수의 인자로 전달되는 함수
• 동기, 비동기 구분없이 사용 가능
• 비동기 작업이 완료된 후 실행할 적업을 명시하는데 사용되는 콜백함수를 비동기 콜백(Asynchronous callback)이라 부름
• 비동기 코드를 작성하다 보면 콜백 함수로 인한 콜백 지옥(Callback Hell)은 필연적으로 나타나게 되며, 이는 코드의 가독성을 해치고, 유지보수를 어렵게 만듦

Callback Hell(콜백 지옥)

• 비동기 처리를 위한 콜백을 작성할 때 마주하는 문제를 Callback Hell(콜백 지옥)이라 하며, 그때의 코드 작성 형태가 마치 피라미드와 같다고 하여 Pyramid of Doom(파멸의 피라미드)라고도 부름

Callback 함수를 사용하는 이유

• 명시적인 호출이 아닌 특정한 조건 혹은 행동에 의해 호출되도록 작성할 수 있음
• 비동기 처리를 순차적으로 동작할 수 있게 함

Promise

• Callback Hell 문제를 해결하기 위해 등장한 비동기 처리를 위한 객체
• 비동기 작업의 완료 또는 실패를 나타내는 객체
  • then(callback)
    • 요청한 작업이 성공한 경우, callback 실행
    • callback은 이전 작업의 성공 결과를 인자로 전달 받음
  • catch(callback)
    • 하나라도 실패한 경우 callback 실행
    • callback은 이전 작업의 실패 객체를 인자로 전달 받음
• axios로 처리한 비동기 로직이 항상 promise 객체를 반환
• then()을 통해 계속해서 이허가면서 작성(chaning) 가능

AJAX

비동기 통신 웹 개발 기술(AJAX, Asynchronous Javascript And XML)은 비동기 통신을 이용해 화면 전체의 새로고침 없이 서버로 요청을 주고받아 화면의 일부분만을 업데이트 할 수 있도록 하는 기술.

• Axios는 AJAX를 위한 라이브러리 중 하나

AJAX의 특징

• 페이지 새로고침 없이 서버에 요청
• 서버로부터 응답(데이터)을 받아 작업을 수행