자바스크립트 비동기처리 방식 알아보자

자바스크립트는 싱글 스레드 언어로 한 번에 하나의 작업만을 수행할 수 있습니다. 코드는 보토 위에서 아래로 순차적으로 실행하는데 그것을 동기적 실행이라고 합니다. 그럼 반대로 비동기처리가 무엇인지 알아보겠습니다.

자바스크립트 비동기처리는 무엇일까?

자바스크립트 비동기(asynchronous)처리란 요청을 보낸 후 응답의 수락 여부와는 상관없이 다음 태스크가 동작하는 방식을 말합니다. 이는 병렬적으로 태스크를 수행할 수 있게 해주어 자원을 효율적으로 사용할 수 있습니다. 비동기 요청을 보낼 때는 요청이 완료된 후 처리할 콜백함수를 함께 알려주어 해당 태스크가 완료될때 콜백함수가 호출됩니다.

하지만 비동기 처리를 위해서 콜백 패턴을 사용하면 처리순서를 보장하기위해서 여러개의 콜백함수가 중첩되어 복잡도가 높아지는 콜백 헬(callback hell)이 발생할 수 있습니다. 콜백헬은 코드의 가독성을 나빠지게하며 실수를 유발할 수 있는 원인이됩니다. 아래는 콜백 헬이 발생하는 전형적인 사례입니다.

자바스크립트 동기처리란 무엇인가?

자바스크립트는 기본적으로 싱글 스레드 언어입니다. 이것은 한 번에 하나의 작업만 수행할 수 있다는 의미로, 이전 작업이 완료되어야 다음 작업을 수행할 수 있습니다. 이런 코드실행방식을 동기처리라고합니다.

동기 방식은 단순하고 직관적이지만 작업이 오래 걸리거나 응답이 지연되면 전체적인 성능과 사용자 경험에 영향을 미칠 수 있습니다. 예를 들어서 서버에 데이터를 요청하고 응답을 받아야하는 경우 응답이 올때까지 다른 작업을 하지 못하고 대기해야합니다.

동기 방식의 한계

동기 방식은 간단하고 직관적이지만, 작업이 오래걸리거나 응답이 지연되는경우 전체적인 성능과 사용자 경험에 영향을 줄 수 있습니다. 예를 들어서 서버에 데이터를 요청하고 응답을 기다리는 동안다른 작업을 할 수 없어서 프로그램의 흐름이 멈추거나 지연될 수 있습니다.

동기와 비동기 처리의 개념

자바스크립트는 싱글 스레드 언어이므로 한 번에 하나의 작업만을 수행할 수 있습니다. 동기(Synchronous) 방식은 이전 작업이 완료 되어야 다음 작업을 수행할 수 있는 방식입니다. 코드는 순차적으로 실행되며, 작업이 오래 걸리거나 응답이 지연되면 전체적인 성능과 사용자경험에 영향을 줄 수 있습니다.

자바스크립트 비동기처리 문제

비동기처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러개의 콜백 함수가 중첩되는 콜백 헬(callback Hell)이 발생할 수 있습니다.이는 코드의 가독성을 떨어뜨리고 실수를 유발하느 원인이됩니다.

step1(function(value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        step5(value4, function(value5) {
            // value5를 사용하는 처리
        });
      });
    });
  });
});

콜백 함수

콜백 함수는 다른 함수의 인자로 전달되어서 특정 작업이 완료된 후 호출되는 함수입니다. 비동기 처리에서 콜백함수는 작업의 완료를 기다리지 않고 다음 코드를 실행할 수 있게 해줍니다.

콜백 헬의 문제점

비동기 처리를 위해 콜백 함수를 중첩하여 사용하면 콜백 헬이 발생할 수 있습니다. 콜백 헬은 코드의 가독성을 떨어뜨리고 유지보수를 어렵게 만듭니다.

call1(function (err, data) {
    if (err) {
        return;
    }
    call2(function (err, data) {
        if (err) {
            return;
        }
        call3(function (err, data) {
            if (err) {
                return;
            }
            call4(function (err, data) {
                if (err) {
                    return;
                }
                call5(function (err, data) {
                    //...
                });
            });
        });
    });
});

콜백 헬 해결 방법

콜백 헬을 피하기 위해 콜백 함수를 분리하여 사용하는 방법이 있습니다. 그러나 더 나은 해결책은 Promise나 async/await를 사용하는 것입니다.

Promise를 사용한 해결

Promise를 사용하면 콜백 함수를 체인 형태로 연결할 수 있어 가독성이 높아집니다.

function call1() {
  return new Promise((resolve, reject) => {
    // 작업 수행 후 resolve 호출
  });
}

call1()
  .then(data => call2(data))
  .then(data => call3(data))
  .then(data => call4(data))
  .then(data => call5(data))
  .catch(err => {
    // 에러 처리
  });

async/await를 사용한 해결

async/await를 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성과 유지보수성이 향상됩니다.

async function process() {
  try {
    const data1 = await call1();
    const data2 = await call2(data1);
    const data3 = await call3(data2);
    const data4 = await call4(data3);
    const data5 = await call5(data4);
    // data5를 사용하는 처리
  } catch (err) {
    // 에러 처리
  }
}

결론

자바스크립트에서 비동기 처리를 적절히 화룡한다면 프로그램의 성능을 향상시키며 사용저의 경험을 개선할 수 있습니다. 비동기 처리를 위한 다양한 패턴과 도구를 이해하고 활용하여 더 효율적인 웹 애플리케이션을 개발할 수 있습니다.