콜백 지옥 해결법 - Promise 와 async/await

 

 

 

콜백 지옥(Callback Hell)은 비동기 JavaScript 코드를 작성할 때 자주 발생하는 문제다

이는 여러 중첩된 콜백 함수가 가독성을 떨어뜨리고 코드 유지 관리를 어렵게 만든다

 

JavaScript에는 이 문제를 해결하는 두 가지 기능, Promise와 async/await가 있다

이들을 활용하면 코드를 훨씬 깔끔하게 유지할 수 있다

 

Promise를 사용한 비동기 통신

Promise는 비동기 작업을 위한 대표적인 해결책으로, 콜백 대신 사용할 수 있다

Promise는 비동기 작업의 성공(resolve) 또는 실패(reject)를 처리하는 객체다

예시: 파일 읽기 작업

콜백 방식

fs.readFile('file1.txt', 'utf8', function(err, data) {
    if (err) {
        console.error(err);
    } else {
        console.log(data);
    }
});

 

Promise 방식

const fsPromises = require('fs').promises;

fsPromises.readFile('file1.txt', 'utf8')
    .then(data => console.log(data))
    .catch(err => console.error(err));

Promise 방식에서 .then()은 비동기 작업이 성공했을 때 실행될 코드를, .catch()는 오류가 발생했을 때 실행될 코드를 정의한다

이를 통해 콜백 지옥을 피할 수 있으며, 코드의 가독성이 크게 향상된다

 

async/await를 사용한 비동기 통신

async/await는 Promise를 더욱 쉽게 사용할 수 있게 해주는 ES2017(ES8)의 기능이다

async 함수는 항상 Promise를 반환하며, await 키워드는 Promise가 해결될 때까지 함수의 실행을 일시 중지시킨다

예시: 여러 파일 순차적으로 읽기

async/await 방식:

const fsPromises = require('fs').promises;

async function readFilesSequentially() {
    try {
        const data1 = await fsPromises.readFile('file1.txt', 'utf8');
        console.log(data1);
        const data2 = await fsPromises.readFile('file2.txt', 'utf8');
        console.log(data2);
        // 추가 파일 처리 가능
    } catch (err) {
        console.error(err);
    }
}

readFilesSequentially();

async/await를 사용하면 비동기 코드를 동기 코드처럼 읽고 쓸 수 있다

이는 코드의 가독성을 크게 향상시키며, 복잡한 비동기 로직을 더 쉽게 구현할 수 있게 한다

 

결론

콜백 지옥은 Promise와 async/await를 사용함으로써 해결할 수 있다

Promise는 비동기 작업을 위한 강력한 추상화를 제공하며,

async/await는 Promise 기반 코드를 더욱 간결하고 읽기 쉽게 만들어 준다.

이러한 기술을 활용하면 복잡한 비동기 로직도 깔끔하고 효율적으로 관리할 수 있다