Multi Developer SuHo

자바스크립트 Callback hell and Promise(콜백헬 그리고 프로미스) 본문

JavaScript

자바스크립트 Callback hell and Promise(콜백헬 그리고 프로미스)

Dreaming Developer Student 2024. 1. 24. 14:14
SMALL

안녕하세요~ 오늘 알아볼 내용은 자바스크립트 Callback  hell  그리고 Promise 입니다.  우선 콜백(Callback)에 대해 살펴보겠습니다.  
 글을 쓰기 앞서 모든  내용과 소스들은 다음과 같은 강의 플랫폼에서 응용하여  작성하였습니다.
출처: https://inf.run/xNcEg

 

[지금 무료] [코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스 강의 - 인

이 강의 하나만으로 인기 Javascript 프레임워크들과 Typescript를 배울 수 있는 기본을 다질 수 있습니다., 자바스크립트 문법 마스터,9시간 만에 무료로 할 수 있어요! ✨ 자바스크립트 문법,한 강의

www.inflearn.com


콜백(Callback)
이란? -  함수가 다른 함수의 인자로 사용되는 경우,  콜백 함수는 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수를 말합니다. 즉 , 특정 작업이 끝나고 다시 호출하는 함수를 말합니다.   

콜백이 많이 중첩되면 코드를 읽기 어려운 콜백 지옥(Callback Hell)이 생길 수 있습니다.    이를 해결하기 위한 방법으로 프로미스(Promise) 같은 방법으로 해결합니다. 다음은 프로미스(Promise)에 대해 알아보겠습니다. 

프로미스(Promise)란 ?  -  프로미스는 자바스크립트에서 비동기 처리를 좀 더 편리하게 할 수 있도록 ES6에 도입된 기능

 

전체 소스코드 를 보면서 주석으로 처리된 설명들을 참고하시면 되겠습니다.

/**
 * Callback(콜백)
 * 특정 작업이 끝나고서 다시 불리는 함수
 * 무언가 입력을 해주고서 나중에 실행되는 함수
 * 
 */
function Continue(){
    setTimeout(() =>{ //setTimeOut() 함수에 있는 첫 번째 함수가 Callback 함수를 의미 
       console.log('End')
    }, 5000); 
}

Continue(); // 5초뒤 'End'를 출력

// Callback Hell
function Continue2(){
    setTimeout(
        () => {
            console.log('1번 콜백 End');
            
            setTimeout(() => {
                console.log('2번 콜백 End');
                
                setTimeout(() =>{
                    console.log('3번 콜백 End');
                }, 5000);
            }, 5000);
        }, 5000); // 5초를 기다림
}
// 3개의 SetTimeOut()을 5초마다 실행을 할수가 있다.
Continue2();

/**
 * Promise(프로미스)
 * promise를 반환하는 함수를 만들 수 있다.
 * 여러개의 promise를 연결할 수 있다.
 */
const timeoutPromise = new Promise((resolve, reject) =>{  //promise 안에 들어가는 Callback 함수에는 두 개의 매개변수를 받는다
    // 1. Resolve , 2. Reject
     setTimeout(() => {
        resolve('실행완료')
     }, 5000);
});

timeoutPromise.then((res) => { // 하나의 매개변수를 받는데, 여기서 매개변수는 Resovle 함수에서 넣어준 값이다.
console.log(res);
}); 

// TimeoutPromise는 Promise라는 객체, 이 객체에는 then이라는 값이 있다.
// then -> 그러고 난 다음
// then() 메서드는 언제 실행? -> Resovle가 실행이 되고나서 실행
// 순서 -> SetTimeout() 하고서 5초를 기다린 다음 '실행완료'라는 값을 Resovle를 했으니 then() 메서드를 5초 뒤에 첫 번째 매개변수에다가 '실행완료'라는 값을 넣은 뒤에 콜백 함수가 실행
// resolve 함수를 실행하는 순간 반환받은 promise 객체에서 then을 붙이면 끝나는 시점,  resolve 함수가 실행되는 시점에 반환값을 받을 수 있다.
// resolve - resolve 안에 argument(실제 값)를 넣어주면 then() 함수가 실행될 때 첫 번째 매개변수에 argument 값이 들어가게 된다.0
// reject -  에러가 났을 때

// resolve를 실행하면 then()을 실행시킬 수 있고, reject를 실행하면 catch()를 실행시킬 수 있다.
// finally()는 callback 함수에 argument를 받지 않고, catch 가 호출되거나 then이 호출되든 무조건 실행된다.

const getPromise = (three) => new Promise((resolve, reject) => {
    setTimeout(() => {

        reject('Error');
    }, three * 1000 ); 
}); // 함수가 promise를 반환

getPromise(3) // 3초 기다리는 함수
.then((res) =>{
    console.log('------first then --------');
    console.log(res);
})
.catch((res) => {
    console.log('---- first catch -------');
    console.log(res);
})
.finally(() => { 
    console.log('------- finally ---------');
});


// promise는 비동기로 실행이 되기 때문에 then()으로 계속 함수를 이어가지고 붙이면 순서대로 실행됨.
// 여러개의 promise를 동시에 실행 시킬 수 있다.
// 만약 promise들이 서로 의존하고 있지 않다면은 동시에 실행을 시킬 수 있다.









Promise(프로미스) 에 대한 소스코드 입니다.

/**
 * Promise(프로미스)
 * promise를 반환하는 함수를 만들 수 있다.
 * 여러개의 promise를 연결할 수 있다.
 */
const timeoutPromise = new Promise((resolve, reject) =>{  //promise 안에 들어가는 Callback 함수에는 두 개의 매개변수를 받는다
    // 1. Resolve , 2. Reject
     setTimeout(() => {
        resolve('실행완료')
     }, 5000);
});

// timeoutPromise.then((res) => { // 하나의 매개변수를 받는데, 여기서 매개변수는 Resovle 함수에서 넣어준 값이다.
// console.log(res);
// }); 

// TimeoutPromise는 Promise라는 객체, 이 객체에는 then이라는 값이 있다.
// then -> 그러고 난 다음
// then() 메서드는 언제 실행? -> Resovle가 실행이 되고나서 실행
// 순서 -> SetTimeout() 하고서 5초를 기다린 다음 '실행완료'라는 값을 Resovle를 했으니 then() 메서드를 5초 뒤에 첫 번째 매개변수에다가 '실행완료'라는 값을 넣은 뒤에 콜백 함수가 실행
// resolve 함수를 실행하는 순간 반환받은 promise 객체에서 then을 붙이면 끝나는 시점,  resolve 함수가 실행되는 시점에 반환값을 받을 수 있다.

const getPromise = (three) => new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('실행완료');
    }, three * 1000 ); 
}); // 함수가 promise를 반환

getPromise(3) // 3초 기다리는 함수
.then((res) =>{
    console.log('------first then --------');
    console.log(res);

    return getPromise(3); // 만약 3초를 기다렸다가 promise를 실행을 하고 싶을 때 -> return 하고서 원하는 promise를 반환하면 된다.
}).then((res) => {
    console.log('------- Second then ---------');
    console.log(res);
    
    return getPromise(2);
    
}).then((res) => {
    console.log('------- third then ---------');
    console.log(res);
    
    return getPromise(2);
    
});

 





LIST