한 번에 이해하는 자바스크립트 비동기 프로그래밍

자바스크립트에서 비동기 처리는 API 호출이나 시간이 걸리는 작업 처리에 유용합니다. 비동기 개념을 이해하려면 동기와 비동기의 차이를 알아야 하며, setTimeout, Promise, async/await 등을 통해 활용 방안을 익힐 수 있습니다.

이번 글에서는 비동기의 기초 및 처리 방법에 대해 살펴보겠습니다.

꼭 비동기를 사용해야 할까?

비동기를 사용해야 하는 이유는 동기 처리의 한계 때문입니다. 동기 코드는 작업을 순차적으로 실행하므로 시간이 걸리는 작업이 발생하면 전체 실행이 지연됩니다.

console.log("작업 1 시작");sleep(5000); // 5초 지연console.log("작업 2 시작");console.log("작업 3 시작");

위 코드는 5초 동안 멈추며, 이후 작업들이 순차적으로 실행됩니다. 반면 비동기를 사용하면 다음과 같이 실행 흐름이 달라집니다.

console.log("작업 1 시작");setTimeout(() => {    console.log("작업 2 시작");}, 5000); // 5초 후 실행console.log("작업 3 시작");

위 코드는 "작업 1 시작", "작업 3 시작" 순으로 출력된 후, 5초 후에 "작업 2 시작"이 출력됩니다. 비동기는 시간을 기다리는 동안 다른 작업을 수행할 수 있게 합니다.

비동기 처리를 사용하면 긴 작업으로 인한 코드 실행 중단이 없게 됩니다.

1) 싱글 스레드와 멀티 스레드

자바스크립트는 기본적으로 싱글 스레드로 동작하여 한 번에 하나의 작업만 수행합니다. 멀티 스레드에서는 여러 작업을 동시에 실행할 수 있지만, 웹 브라우저에서 UI를 조작할 때 충돌 가능성을 고려해 싱글 스레드를 유지하고 있습니다.

2) 자바스크립트에서 비동기로 처리해야 하는 이유

시간이 오래 걸리는 작업이 있을 때, 동기적 처리 방식은 작업 완료를 기다려야 하므로 사용자 경험을 저하할 수 있습니다. 비동기적으로 처리하면 흐름을 끊지 않고 작업을 수행할 수 있습니다.

setTimeout

setTimeout 함수는 특정 시간 후에 코드를 실행할 수 있도록 도와주는 기본적인 비동기 처리 방법입니다.

1) 메서드 살펴보기

setTimeout의 문법은 다음과 같습니다.

setTimeout(callback, delayTime);

callback은 지연 후 실행될 함수이며, delayTime은 지연 시간을 밀리초로 지정합니다.

2) 사용 예시

3초 후에 메시지를 출력하는 예제입니다:

console.log("시작");setTimeout(() => {    console.log("3초 후 실행");}, 3000);console.log("종료");

이 예제는 "시작", "종료", 그리고 3초 후에 "3초 후 실행" 메시지를 출력합니다.

프로미스 객체 간단하게 살펴보기

setTimeout과 같은 콜백 비동기 처리 방법은 간단한 작업에서는 유용하지만, 콜백 지옥 문제를 일으킬 수 있습니다. 프로미스 객체는 이러한 문제를 해결하도록 설계되었습니다.

1) 생성 및 사용법

프로미스 객체는 new 키워드로 생성하며, executor 함수를 전달합니다.

const executor = (resolve, reject) => {    //코드};const promise = new Promise(executor);

2) resolve와 reject

executor는 작업의 성공 여부에 따라 resolve 또는 reject를 호출합니다. state와 result 프로퍼티를 통해 작업 결과를 관리합니다.

const executor = (resolve, reject) => {    setTimeout(() => {        resolve('성공');        reject('실패');    }, 3000);};const promise = new Promise(executor);

프로미스 객체는 then() 메서드로 상태에 따라 결과를 처리합니다.

promise.then(    (result) => {        console.log(result);    },    (error) => {        console.log(error);    });

마치며

비동기 프로그래밍은 자바스크립트의 중요한 요소입니다. 비동기를 활용하면 사용자의 경험을 개선할 수 있습니다. 이번 글에서는 setTimeout과 프로미스 객체를 통한 비동기 처리 방법을 다루었으며, 기본적인 이해를 바탕으로 향후 더 깊은 내용을 공부할 수 있습니다.

<참고>

• javascript.info
• 인프런
• [mdn web docs] Introducing asynchronous JavaScript