한 번에 정리하는 자바스크립트 비동기 코드 작성법

이 글은 자바스크립트의 비동기 프로그래밍에 대한 내용을 다루고 있습니다. 자바스크립트는 싱글 스레드 언어로, 동기적으로 실행되는 코드가 긴 경우 전체 흐름이 멈추는 단점이 있습니다. 이를 해결하기 위해 비동기 메서드인 setTimeout과 프로미스를 사용하여 코드 실행을 지연시키지 않으면서 작업을 수행할 수 있습니다. 하지만 프로미스를 잘못 사용할 경우 ‘콜백 지옥’이 발생해 코드 가독성이 저하될 수 있습니다.

이번 글에서는 콜백 지옥의 개념과 해결 방법, 더 깔끔한 비동기 코드 작성을 위한 async/await 활용법을 살펴보고, API 호출과 비동기 처리의 관계도 알아보겠습니다.

콜백 지옥과 프로미스 객체

비동기 작업을 순차적으로 실행해야 할 때, 콜백 함수를 중첩하면 복잡해지고 가독성이 떨어지는 현상을 콜백 지옥이라고 합니다.

1) 콜백 지옥이란?

여러 개의 비동기 함수가 중첩되면 코드가 비효율적으로 변하고 가독성이 떨어집니다.

setTimeout(() => {    console.log("1초 후 실행");    setTimeout(() => {        console.log("2초 후 실행");        setTimeout(() => {            console.log("3초 후 실행");        }, 1000);    }, 1000);}, 1000);

2) 프로미스 객체를 사용한 콜백 지옥 해결

프로미스 객체를 사용하면 콜백을 중첩하지 않고 then() 체이닝으로 비동기 작업을 처리할 수 있습니다.

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));delay(1000).then(() => {    console.log("1초 후 실행");    return delay(1000);}).then(() => {    console.log("2초 후 실행");    return delay(1000);}).then(() => {    console.log("3초 후 실행");});

async와 await

async/await 문법을 사용하면 비동기 코드를 동기처럼 작성할 수 있어 가독성이 매우 향상됩니다.

1) async와 await의 역할

async는 프로미스를 반환하는 함수를 나타내며, await은 비동기 작업이 완료될 때까지 기다리는 역할을 합니다.

2) 사용 방법

async/await를 사용한 예시입니다.

const start = async () => {    let result = await delay(3000);    console.log(result);};start();

3) 에러 핸들링

try/catch 문을 사용하여 에러를 안전하게 처리할 수 있습니다.

const start = async () => {    try {        let result = await delay(3000);        console.log(result);    } catch (error) {        console.log(error);    }};start();

API 호출

API 호출은 클라이언트와 서버 간 통신을 처리하는 비동기 작업으로, fetch 함수를 사용하여 API를 호출합니다.

1) 클라이언트와 서버 통신

클라이언트는 서버에 데이터를 요청하고, 서버는 필요한 정보를 데이터베이스에서 찾아 응답합니다.

2) API 호출과 비동기

fetch 메서드를 사용하여 API를 호출할 수 있으며, async/await을 통해 결과를 간편하게 처리할 수 있습니다.

const getData = async () => {    let response = await fetch('https://jsonplaceholder.typicode.com/users');    let data = await response.json();    console.log(data);};getData();

3) 에러 핸들링

API 호출의 에러는 또한 try/catch를 사용해 쉽게 처리할 수 있습니다.

const getData = async () => {    try {        let response = await fetch('https://jsonplaceholder.typicode.com/users');        let data = await response.json();        console.log(data);    } catch (err) {        console.log(err);    }};getData();

마치며

자바스크립트의 비동기 처리 개념을 살펴보며, 비동기 프로그래밍을 통해 안정적인 애플리케이션을 개발할 수 있음을 알았습니다. API 호출을 통해 다양한 비동기 작업을 연습해보세요.

<참고>

• javascript.info
• {JSON} Placeholder
• 웹 프론트엔드를 위한 자바스크립트 첫 걸음