[JavaScript] 비동기처리 방식이 뭘까?

예진·2023년 7월 21일
JavaScriptstudy

JavaScript

목록 보기
4/6
post-thumbnail

➿비동기처리 방식의 개념


비동기 처리 방식이란?

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성입니다. 동시에 여러가지 작업을 처리할 수 있고 기다리는 과정에서 다른 함수를 호출할수도 있습니다

예시) Ajax Web API 요청, 파일 읽기, 암호화/복호화, 작업 예약 •••

비동기 처리가 필요한 이유

비동기 처리는 응답 대기 시간을 줄이고 웹 애플리케이션의 응답성과 성능을 향상시키며, 네트워크 통신과 이벤트 처리를 효율적으로 다루기 위해 필요합니다.

  1. 응답 대기 시간 감소
    : 비동기 처리를 사용하면 웹 페이지나 앱에서 서버로 데이터를 요청할 때, 요청에 대한 응답을 기다리는 동안 다른 작업을 수행할 수 있습니다. 이렇게 함으로써 응답 대기 시간을 최소화하고 사용자 경험을 향상시킬 수 있습니다.

  2. 웹 애플리케이션의 응답성 향상
    : 동기적으로 작업을 처리하면 한 작업이 끝나기 전까지 다른 작업을 수행할 수 없어서 웹 페이지가 느려지거나 멈추는 현상이 발생할 수 있습니다. 비동기 처리를 사용하면 이러한 문제를 해결하여 웹 애플리케이션의 응답성을 향상시킵니다.

  3. 네트워크 통신
    : 웹 애플리케이션에서 서버로 데이터를 전송하거나 서버로부터 데이터를 받아올 때, 네트워크 요청은 일반적으로 비동기적으로 처리됩니다. 동기적인 처리를 하면 네트워크 요청이 완료될 때까지 애플리케이션이 멈추는 문제가 발생할 수 있습니다.

  4. 비동기적 작업
    : 웹 애플리케이션에서는 시간이 오래 걸리는 작업(예: 파일 다운로드, 데이터 처리 등)을 비동기적으로 처리하는 것이 중요합니다. 동기적으로 처리하면 전체 애플리케이션이 느려질 수 있습니다.

  5. 이벤트 처리
    : 사용자의 입력(클릭, 타이핑 등)이나 타이머와 같은 이벤트를 비동기적으로 처리하는 것이 중요합니다. 이벤트는 예측할 수 없는 시점에 발생할 수 있으므로 비동기 처리를 통해 적시에 대응할 수 있습니다.

  6. 병렬 처리
    : 여러 작업을 동시에 처리하여 성능을 향상시키는 병렬 처리를 구현하기 위해서도 비동기 처리가 필요합니다.

📚자바스크립트의 비동기 처리 3가지

자바스크립트의 비동기 처리로는 Callback Function, Promise, Async & Await가 있습니다.

1. 콜백 함수(Callback Function)

1-(1). 콜백 함수의 정의

콜백함수는 파라미터로 전달받은 함수를 말합니다.
파라미터로 콜백함수를 전달받고 함수 내부에서 필요할 때 콜백함수를 호출할 수 있습니다.


1-(2). 콜백 함수가 필요한 이유

비동기적인 작업을 처리하고, 작업이 완료된 후에 특정 동작을 실행하기 위해 필요합니다. 이를테면, 파일 다운로드, 데이터베이스 조회, 네트워크 요청과 같은 시간이 오래 걸리는 작업들은 콜백 함수를 이용해 비동기적으로 처리하는 것이 좋습니다.

  1. 비동기 처리
    : 콜백 함수를 사용하면 비동기적으로 작업을 수행할 수 있습니다. 이로 인해 웹 애플리케이션의 응답성이 향상되며, 더 많은 작업을 동시에 처리할 수 있습니다.

  2. 응답 대기 시간 최소화
    : 콜백 함수를 사용하여 웹 애플리케이션이 서버로부터 데이터를 요청하고, 데이터가 준비되면 즉시 처리할 수 있습니다. 이로 인해 사용자는 오랫동안 기다리지 않아도 되며, 웹 애플리케이션의 성능이 향상됩니다.

  3. 이벤트 처리
    : 사용자의 입력이나 다른 이벤트에 따라 특정 작업을 실행해야 할 때, 콜백 함수를 등록하여 이벤트가 발생했을 때 적시에 대응할 수 있습니다.

  4. 조건부 처리
    : 콜백 함수를 사용하여 비동기 작업이 완료되었을 때, 성공적으로 완료되었는지 또는 에러가 발생했는지에 따라 다른 동작을 실행할 수 있습니다.

  5. 모듈화와 재사용성
    : 콜백 함수를 사용하여 코드를 모듈화하고, 작업 완료 후에 실행할 동작을 콜백으로 넘겨주면서 코드의 재사용성을 높일 수 있습니다.

1-(3). 콜백 함수 작동 원리

콜백 함수는 비동기 처리에서 사용되며, 다른 함수의 인자로 전달됩니다. 비동기 함수가 작업 완료 시나 이벤트 발생 시 콜백 함수가 실행되고, 그 결과는 이벤트 루프를 통해 콜 스택으로 이동하여 실행됩니다. 이를 통해 비동기 작업을 효율적으로 처리하고 응답성을 개선할 수 있습니다.


1-(4). 콜백 함수 예시

function delayedFunction() {
  console.log("이 함수는 2초 후에 실행됩니다.");
}

console.log("첫 번째 문장");
setTimeout(delayedFunction, 2000); // 2초 후에 delayedFunction 실행
console.log("마지막 문장");

//출력결과
첫 번째 문장
마지막 문장
(2초 후)
이 함수는 2초 후에 실행됩니다.
  • delayedFunction 함수가 setTimeout 함수의 콜백 함수로 사용됩니다. setTimeout 함수는 비동기 함수 입니다.
  • 비동기적으로 동작하는 setTimeout 함수로 인해 delayedFunction 함수는 2초 후에 실행되기 때문에, "첫 번째 문장"과 "마지막 문장" 사이에 시간차가 발생합니다.

1-(5). 콜백 지옥(Callback Hell)

콜백 함수를 익명 함수로 전달하는 과정에서 또 다시 콜백 안에 함수 호출이 반복되어 코드의 들여쓰기 순준이 감당하기 힘들 정도로 깊어지는 현상입니다.

  • 주로 이벤트 처리나 서버 통신과 같은 비동기 작업을 제어하기 위해서 사용되는데 이러한 프로그래밍은 가독성이 떨어지고 코드 수정을 어렵게 합니다.

콜백 지옥 해결 하기위해!
→ Promise, Async/Await

2. Promise

2-(1). Promise의 정의

Promise는 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 객체이다. 또 미래에 완료될 수 있는 작업을 나타내는 객체입니다.


2-(2). Promise의 3가지 상태

프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태(states)입니다. 여기서 말하는 상태란 프로미스의 처리 과정을 의미합니다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖습니다.

  • pending (대기) : 처리가 완료되지 않은 상태

  • fulfilled (이행) : 성공적으로 처리가 완료된 상태

  • rejected (거부) : 처리가 실패로 끝난 상태

2-(3). Promise의 특징

Promise는 3가지의 상태를 가지며,
비동기 작업이 완료되면 결과를 처리하는데 도움을 줍니다.

  1. Promise는 resolve와 reject 두 개의 콜백 함수를 받아 작동합니다. resolve는 성공 상태를 처리할 때 호출되고, reject는 실패 상태를 처리할 때 호출됩니다.

  2. Promise를 사용하면 then 메서드를 통해 성공 콜백과 catch 메서드를 통해 실패 콜백을 등록하여 비동기 작업의 결과를 처리할 수 있습니다.

  3. Promise는 연속적으로 체이닝(Chaining)하여 여러 비동기 작업을 순차적으로 처리할 수 있습니다.

    체이닝(Chaining): JavaScript의 Promise에서 여러 개의 비동기 작업을 순차적으로 연결하는 방법을 의미합니다.


2-(4). Promise의 장점

  1. 비동기 코드의 가독성 향상
    : Promise는 비동기 코드를 보다 가독성 있게 작성할 수 있도록 도와줍니다. Promise 체이닝을 사용하면 여러 개의 비동기 작업을 순차적으로 연결하여 코드를 구성할 수 있습니다.

  2. 에러 처리 용이성
    : Promise는 비동기 작업 중 발생하는 에러를 쉽게 처리할 수 있습니다. .catch()를 이용하여 Promise 체인 내에서 발생한 에러를 캐치하여 적절히 처리할 수 있습니다.

  3. Callback Hell 해결
    : Promise를 사용하면 콜백 지옥(callback hell) 문제를 해결할 수 있습니다. 콜백 함수의 중첩을 최소화하여 코드를 더 간결하고 이해하기 쉽게 작성할 수 있습니다.

  4. 코드의 모듈화 및 재사용성
    : Promise는 비동기 작업을 모듈화하여 코드를 재사용하기 용이하게 만듭니다. 작업이 성공적으로 완료된 후에 다음 작업으로 데이터를 전달하면서 코드를 모듈화할 수 있습니다.

  5. 비동기 작업의 순차적 실행
    : Promise 체이닝을 통해 여러 비동기 작업을 순차적으로 연결하여 실행할 수 있습니다. 이로 인해 비동기 작업의 실행 순서를 보장하고 코드의 흐름을 더 명확하게 제어할 수 있습니다.

  6. 에러 핸들링 통일성
    : Promise는 에러를 전파하여 중앙에서 한 번에 처리할 수 있습니다. 여러 비동기 작업에서 발생한 에러를 중앙에서 한 곳으로 모아 통합적으로 처리할 수 있습니다.

  7. 비동기 작업의 복합 처리
    : Promise.all(), Promise.race()와 같은 메서드를 활용하여 여러 개의 비동기 작업을 복합적으로 처리할 수 있습니다. 여러 작업을 병렬로 실행하거나 가장 먼저 끝난 작업을 찾을 수 있습니다.

즉, Promise는 가독성 향상과 에러 처리 용이성으로 비동기 코드를 더 효율적으로 작성할 수 있습니다. 또한 콜백 지옥 해결과 순차적 실행을 통해 코드의 가독성과 유지보수성이 향상되며, 비동기 작업을 효율적으로 처리할 수 있습니다.


2-(5). Promise 사용 예시

function arriveAtSchool_tobe() {
    return new Promise(function(resolve){
        setTimeout(function() {
            console.log("학교에 도착했습니다.");
            resolve();
        }, 1000);
    });
}

// arriveAtSchool_tobe 함수 호출 및 then 메서드를 사용하여 작업 등록
arriveAtSchool_tobe().then(function() {
    console.log("학교 도착 후 다른 작업을 수행합니다.");
});
//실행 결과 
(1초 후)
학교에 도착했습니다.
학교 도착 후 다른 작업을 수행합니다.
  • arriveAtSchool_tobe 함수는 Promise를 생성하여 반환합니다. 이 Promise는 setTimeout 함수를 사용하여 1초 후에 학교 도착 메시지를 출력한 후에 resolve()를 호출하여 완료됩니다.
  • then 메서드를 사용하여 arriveAtSchool_tobe 함수가 완료된 후에 실행될 작업을 등록합니다.
  • arriveAtSchool_tobe()를 호출하여 학교 도착 메시지를 출력하고 1초 후에 resolve()를 호출하여 Promise가 완료됩니다.
  • 이후, then 메서드로 등록한 함수가 실행되어 "학교 도착 후 다른 작업을 수행합니다."라는 메시지가 출력됩니다.

3. Async & Await

async와 await은 JavaScript에서 비동기 작업을 처리하는 데 사용되는 편리한 문법입니다.


3-(1). Async이란?

async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환합니다.

  • 내부에서 await 키워드를 사용하여 비동기 작업의 결과를 기다릴 수 있습니다.
  • async 함수는 then과 catch를 사용하여 비동기 작업의 성공과 실패를 처리할 수 있습니다.

3-(2). Await이란?

await 키워드는 async 함수 안에서만 사용할 수 있습니다.

  • await 키워드 다음에는 Promise 객체가 오며, 해당 Promise가 완료될 때까지 기다립니다.
  • await 표현식은 비동기 작업의 결과를 반환하므로, 변수에 결과를 할당하거나 다른 작업에 활용할 수 있습니다.

3-(3). Async & Await 사용 예제

async와 await를 사용하여 비동기적으로 숫자를 더하는 코드입니다.

// 비동기 함수
function addNumbersAsync(a, b) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(a + b);
    }, 1000); // 1초 후에 결과를 반환하도록 시뮬레이션
  });
}

// `async` 함수 정의
async function calculateSum() {
  const num1 = 5;
  const num2 = 10;
  
  try {
    // 비동기 함수의 결과를 `await`를 사용하여 받아옴
    const sum = await addNumbersAsync(num1, num2);
    console.log(`두 수의 합: ${sum}`);
  } catch (error) {
    console.error("에러 발생:", error);
  }
}

// `async` 함수 호출
calculateSum();

위 코드에서 addNumbersAsync 함수는 1초 후에 두 숫자의 합을 반환하는 Promise를 생성합니다. calculateSum 함수는 async 함수로, await를 사용하여 addNumbersAsync 함수의 결과를 받아와서 두 숫자의 합을 출력합니다.

(1초 후)
두 수의 합: 15

⭐비동기처리 방식 요약

  • 콜백 함수
    : 비동기 작업이 완료되면 호출되는 함수를 콜백으로 등록하여 처리합니다. 콜백 헬(callback hell) 문제가 발생할 수 있으므로 가독성과 유지보수성이 떨어집니다.

  • Promise
    : 비동기 작업을 더 효율적으로 다루기 위해 ES6에서 도입된 객체입니다. 성공 또는 실패 상태를 가지며, then과 catch를 이용하여 비동기 작업의 결과를 처리합니다.

  • async/await
    : Promise를 기반으로 한 더욱 간편한 비동기 처리 방식입니다. async 함수 내에서 await를 사용하여 비동기 작업의 결과를 기다리고, 동기적인 코드처럼 작성할 수 있습니다.

➡️ 비동기 처리를 사용하여 웹 애플리케이션에서 네트워크 요청, 파일 읽기 등의 비동기 작업을 효율적으로 처리하고, 웹 페이지의 응답성과 사용자 경험을 개선할 수 있습니다.

profile
예진
이전 포스트

[JavaScript] Arrow function

다음 포스트

[JavaScript] Rest Parameter & Spread Operator

0개의 댓글