애드블럭 종료 후 보실 수 있습니다.

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 비동기 프로그래밍 패턴
    JS & TS 2024. 5. 28. 17:27
    728x90
    반응형

    자바스크립트는 비동기 작업을 처리하기 위해 다양한 프로그래밍 패턴을 제공합니다.

    비동기 프로그래밍은 특히 네트워크 요청, 파일 입출력, 타이머 등 시간이 오래 걸리는 작업을 효율적으로 처리하는 데 유용합니다.

    이번 글에서는 자바스크립트의 주요 비동기 프로그래밍 패턴인 콜백, 프로미스, 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

    댓글

Designed by Tistory.