✍공부하기 | Promise, callback, Async Await

프론트엔드 개발자라면 너무나도 많이 사용하고 봤을!

비동기 프로그래밍에 쓰이는 Promise, Callback, Async / Await

저도 개발하면서 굉장히 많이 썼던 것들인데

이론적으로 전문용어 써서 설명하라고 하면^^.... 말 못함....ㅎ.....

그래서 요번에 이론을 뽝! 잡아볼까 합니다! 💪

 

---

 

1. 비동기 프로그래밍이란?

요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식을 말합니다

실행 순서가 확실하지 않는 것이죠!

참고로 자바스크립트는 동기적 방식입니다. 블로킹(blocking) 이며, 싱글 스레드(single-threaded) 언어이죠!

그러나 비동기로 프로그래밍을 할 수 있다는 것!

 

 

2. 자바스크립트 비동기 대표 3가지

• Callback

= Callback Function (콜백함수) 라고 많이 들어 보셨을겁니다

다른 함수에 매개변수로 넘겨준 함수를 말합니다

매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출한다는 개념입니다

function watchYutube(count, link, good) {
    count < 3 ? link() : good();
};
 
function linkYoutube() {
    console.log("경아 유튜브 보러오세요!");
    console.log("https://www.youtube.com/channel/UCTcTcjjVKOHBVlfj3YXHx5g?view_as=subscriber");
};
 
function goodWatch() {
    console.log("시청해주셔서 감사합니다");
};
 
watchYutube(2, linkYoutube, goodWatch);

watchYoutube 함수를 호출할 때 매개변수로 count에 숫자값을 주고,

link와 good 부분에 linkYoutube, goodWatch 함수를 전달했습니다

여기서 linkYoutube, goodWatch 함수가 콜백함수가 됩니다

그러나 콜백함수는 Callback hell을 야기하는데요...

그래서 대안해서 나온게 Promise!! ES6부터 정식 채택되어 사용중이라고 합니다

 

• Promise

callback 함수를 대안해서 나온 객체, 비동기의 결과를 객체화 시킨다는 점이 가장 큰 장점이자 특징입니다

const promise1 = function(param) {
    //프로미스 생성방법
    return new Promise(function (resolve, reject) {
        if(param) {
            reslove("안녕");   //성공시
        } else {
            reject("잘가");   //실패, 에러시
        }
    }
}
 
promise1(true).then(function (result) {
    console.log(result);   //출력값 "안녕"
}, function(err) {
    console.log(err)  //출력값 "잘가"
}
 
// .then -> 이행 
// .catch -> 거부

👉 프로미스 체이닝이란?

비동기 함수의 처리 결과를 가지고 또 다른 비동기 함수를 호출해야하는 경우 중첩이 되어 복잡해집니다

(그래서 콜백헬이라는게 발생한다^^)

그래서 프로미스는 후속처리 메소드를 체이닝하여 여러개의 프로미스를 연결해서 사용할 수 있습니다

(then이랑 catch를 여러개 사용 가능한 듯)

 

• Async, Await

Promise랑 같이 쓰이는 비동기 처리입니다

함수의 앞 부분에 async 키워드를 추가하고 함수 내부 Promise의 앞부분에 await 키워드를 추가해주시면 됩니다

async, await의 장점은 비동기 코드의 겉모습과 동작을 좀 더 동기 코드와 유사하게 만들어 준다는 것입니다

async function() {
    const result = await new Promise((resolve, reject) => {
        setTimeout(function() {
            resolve("foo");
        }, 2000);
    });
 
    console.log(result); //foo
 
    const result2 = await axios.get("https://jsonplaceholder.typicode.com/users");
    console.log(result2); // Array[10]
}
 

출처: zzossig.io/posts/javascript/what_is_the_promise/

(가상의 데이터를 받아올 수 있는 좋은 사이트 발견! https://jsonplaceholder.typicode.com/ )

위의 예시처럼 await는 항상 Promise 객체에 붙는다 (axios은 Promise 기반의 HTTP 통신 라이브러리입니다)

쨌뜬 async, await은 Promise의 확장 개념인 것 같습니다! 더욱 깔끔하고 쉽게 사용할 수 있게 해주는듯 합니다

그리고 오류를 잡아내기 위해선 try catch문은 필수입니다 👆