[면접 예상 질문] 프론트엔드(3/3)

21. 비동기 처리

• 자바스크립트의 비동기 처리란, 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.
• 예로는 setTimeout 메소드, ajax, axios 등의 네트워크 요청이 있다.
• 비동기 처리는 콜백, 프로미스, async await 로 해결할 수 있다.

22. 콜백, 프로미스, async & await

• 콜백 : 콜백 함수를 파라미터로 전달함으로써, 비동기 처리된 결과를 가지고 로직을 수행해 코드의 실행 순서를 보장받도록 하는 방법이다.
• 프로미스
  • 콜백을 이용해 여러 함수간의 의존성을 처리하면 코드가 복잡하고 읽기 힘들다(콜백 헬). 비동기 작업을 객체로 다룸으로써, 더 유연한 비동기 처리가 가능해진다.
  • 객체를 생성할 때 resolve와 reject 두 개의 메소드를 파라미터로 전달한다. 내부 비동기 처리가 성공적이라면 resolve 메소드를, 실패라면 reject 메소드를 호출해 처리할 수 있다.
  • resolve시 then 메소드를 호출한다. catch 메소드를 통해 예외 처리를 할 수 있다.
• async & await
  • 함수 앞에 async 예약어를 붙이고, 내부에 비동기 처리를 하는 메소드 앞에 await 예약어를 붙인다.
  • 일반적으로 await 의 대상이 되는 비동기 처리 코드는 프로미스를 반환하는 Axios 등의 API 호출 함수다.
  • 프로미스 객체가 resolved 상태면 결과값이 리턴된다. 프로미스가 reject되면, throw 문을 작성한 것처럼 에러가 던져지므로, try catch 구문으로 에러를 처리해야 된다.