-
자바스크립트 비동기 프로그래밍 패턴JS & TS 2024. 5. 28. 17:27728x90
자바스크립트는 비동기 작업을 처리하기 위해 다양한 프로그래밍 패턴을 제공합니다.
비동기 프로그래밍은 특히 네트워크 요청, 파일 입출력, 타이머 등 시간이 오래 걸리는 작업을 효율적으로 처리하는 데 유용합니다.
이번 글에서는 자바스크립트의 주요 비동기 프로그래밍 패턴인 콜백, 프로미스, async/await, 그리고 RxJS에 대해서도 간단하게 소개하겠습니다.
1. 콜백 (Callback)
콜백은 가장 기본적인 비동기 프로그래밍 패턴입니다.
함수가 실행된 후 호출될 함수를 매개변수로 전달하여 비동기 작업이 완료된 후 실행됩니다.
function fetchData(callback) { setTimeout(() => { callback('데이터를 가져왔습니다'); }, 1000); } fetchData((message) => { console.log(message); });
이 패턴은 단순하지만, 중첩된 콜백이 많아지면 콜백 지옥(callback hell)이라는 가독성 문제를 일으킬 수 있습니다.
2. 프로미스 (Promise)
프로미스는 콜백 지옥 문제를 해결하기 위해 등장한 패턴입니다.
프로미스 객체는 비동기 작업의 완료 또는 실패를 나타내는 값으로,. then과. catch 메서드를 사용하여 처리합니다.
function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('데이터를 가져왔습니다'); }, 1000); }); } fetchData() .then((message) => { console.log(message); }) .catch((error) => { console.error(error); });
프로미스는 가독성을 개선하고, 체이닝을 통해 비동기 작업을 순차적으로 처리할 수 있습니다.
3. async/await
async/await는 프로미스를 더욱 간편하게 사용할 수 있도록 도와주는 문법입니다.
async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 처리될 때까지 기다립니다.
async function fetchData() { return new Promise((resolve) => { setTimeout(() => { resolve('데이터를 가져왔습니다'); }, 1000); }); } async function getData() { try { const message = await fetchData(); console.log(message); } catch (error) { console.error(error); } } getData();
이 패턴은 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 뛰어납니다.
4. RxJS (Reactive Extensions for JavaScript)
RxJS는 반응형 프로그래밍 라이브러리로, 비동기 데이터 스트림을 처리하는 데 사용됩니다.
RxJS의 주요 개념은 옵저버블(Observable)과 옵저버(Observer)입니다.
const { of } = rxjs; const { delay } = rxjs.operators; const data$ = of('데이터를 가져왔습니다').pipe(delay(1000)); data$.subscribe((message) => { console.log(message); });
RxJS는 복잡한 비동기 작업을 선언적으로 처리할 수 있도록 도와줍니다.
자바스크립트의 비동기 프로그래밍 패턴은 콜백에서 프로미스, async/await, 그리고 RxJS로 발전해 왔습니다.
각 패턴은 고유의 장단점을 가지고 있으며, 상황에 맞게 적절한 패턴을 선택하는 것이 중요합니다.
이러한 패턴을 잘 이해하고 활용하면, 비동기 작업을 효율적이고 가독성 높게 처리할 수 있습니다.
'JS & TS' 카테고리의 다른 글
구조분해 사용 팁 4가지 (2) 2024.09.14 Javascript ES15(ECMAScript 2024) 문법정리 (0) 2024.08.14 Javascript ES14 문법정리 (0) 2023.12.15 Javascript ES13 문법정리 (0) 2023.12.04 Javascript ES12 문법정리 (0) 2023.12.01