[JavaScript / 비동기 처리] AJAX / Callback, Promise, async, await

📌 동기(Synchronous) 프로그래밍 vs 비동기(Asynchronous) 프로그래밍

 

 동기 프로그래밍은 코드가 반드시 작성된 순서대로 실행되는 방식이다.

 비동기 프로그래밍은 코드의 처리가 완료될 때까지 기다리지 않고 다른 코드를 처리하는 방식이다.

 

---

🔗 비동기 처리 사례 > AJAX

 

 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간의 XML 데이터를 주고받는 기술이다.

 XMLHttpRequest 객체를 이용해서 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다는 장점이 있다.

 

---

🔗 비동기 처리 방법 ① > 콜백(Callback) 함수

 

 

 함수 실행 결과값을 리턴이 아닌 매개변수로 넘어온 함수를 호출하여 넘겨주는 방식이다.

 

 

🔗 콜백 함수 사용하는 이유

 

 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다는 장점이 있다. 즉, 비동기 작업들을 순차적으로 실행시킬 수 있다.

 

 

🔗 콜백지옥🧟‍♀️, 문제점 및 해결방법🧚‍♀️

 

 콜백 함수 안에 또 다른 콜백 함수를 연속하여 사용하는 것을 콜백지옥이라고 하는데, 이러한 코드 구조는 가독성이 떨어지고 로직을 변경하기 어렵다는 문제점이 있다. 이것을 해결하기 위해 콜백 함수 대신, 프로미스나 async 함수를 사용할 수 있다.

 

---

🔗 비동기 처리 방법 ②) 프로미스(Promise)

 

 ES6 문법으로, 주로 서버에서 데이터를 요청하고 받아올 때 사용하는 API를 구현할 때 사용된다.

 

출처 - MDN

 

const condition = true; // true면 resolve, false면 reject
const promise = new Promise(function(){
    // 비동기 작업 수행
    if(condition){ // 비동기 작업 수행 성공
        resolve('성공');
    }else{ // 비동기 작업 수행 실패
        reject('실패');
    }
});
 
promise
    .then(function(message){
        console.log(message); // 성공(resolve)한 경우 실행
    })
    .catch(function(error){
        console.log(message) // 실패(reject)한 경우 실행
    });
 

 

 new Promise로 객체를 생성하고, 안에 resolve(비동기 처리 성공)와 reject(비동기 처리 실패)를 매개변수로 갖는 콜백함수를 넣어준다. 이렇게 만든 promise 변수에 then과 catch 메서드를 붙인다. 프로미스 내부에서 resolve가 호출되면 then이 실행되고, reject가 호출되면 catch가 실행된다.

 

---

🔗 비동기 처리 방법 ③) async, await

 

 ES8 문법으로, 프로미스를 사용한 코드를 좀 더 깔끔하고 동기적으로 보일 수 있게 줄여준다.

 

async function 함수명(){
    await 비동기_처리_메서드명();
}

 

 함수의 앞부분에 async 키워드를 추가하고, 함수 내부에서 Promise의 앞부분에 await 키워드를 추가한다. 에러처리를 위해 try/catch문을 사용해야 한다.

 

 

---

🔎 참고 자료

• AJAX란 무엇인가?
• 자바스크립트 비동기 처리와 콜백 함수
• 프론트엔드 개발자 면접 질문 정리

💡 같이 보면 좋을 Post

[JavaScript] 자바스크립트는 '이벤트 기반', '논블로킹' 방식을 사용하고 '싱글 스레드' 언어이다.