콜백을 이용해서 비동기 프로그램을 짤 수 있다는 것은 좋지만 한계점이 있다.

여러 비동기 작업을 연속적으로 처리하는 것인데 예를 들어 아래와 같은 상황이다.

// 직원 데이터를 가져온 후 리스폰스를 파싱하고 데이터를 프로세싱 하는 예시
getEmployees((response) => {
  json(response, (data) => {
    groupEmployees(data, (result) => {
      console.log(result);
    });
  });
});

코드가 조금 헷갈리는데 콜백안에 콜백이 들어가서 그렇다. 코드를 해석해보자면 

1. getEmployees 호출:

  • 이 함수는 직원 데이터를 가져오는 비동기 함수이다.
  • 이 함수는 리스폰스를 받기 위해 콜백 함수를 인자로 받는다. 이 콜백 함수는 서버로부터 응답을 받은 후 실행된다.
  • 응답이 성공적으로 오면, 해당 응답을 response로 전달받는다.

2. json(response) 호출:

  • json 함수는 response를 JSON 형식으로 파싱하는 함수이다.
  • 이 함수도 콜백을 받으며, 파싱된 데이터를 data로 전달한다.
  • 즉, response가 JSON으로 변환되어 data에 저장된다.

3. groupEmployees(data) 호출:

  • data는 이제 직원 데이터의 배열이다.
  • groupEmployees 함수는 이 배열을 받아서 그룹화하는 기능을 수행한다. 이 함수도 콜백을 받아 결과를 result로 전달한다.

4. console.log(result):

  • 최종적으로 그룹화된 결과가 result에 저장되고, 이를 콘솔에 출력된다.
더보기
  • request : 웹브라우저가 서버에 요청
  • response : 서버가 보내주는 응답
  • parshing : 어떤 큰 자료에서 원하는 정보만 가공하고 뽑아서 원할 때 불러올 수 있게 하는것
  • parser : 파싱을 수행하는 프로그램
  • json(JavaScript Object Notation) : Javascript 객체 문법으로 데이터를 쉽게 교환 하고 저장하기 위한 텍스트 기반의 데이터 교환 표준, 쉽게 말해 일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식이다.
  • 디버깅(Debugging) : 프로그래밍 과정에서 발생하는 오류나 비정상적인 연산, 즉 버그를 찾아 수정하는 프로세스
  • 테스팅 : 소프트웨어의 품질을 평가하고, 개발 과정에서 발생할 수 있는 오류를 사전에 발견하고 수정하는 과정

콜백 기반 코드는 모든 작업을 함수 안에서 처리하기 때문에 작업을 이어서 하려면 콜백 안에 콜백을 등록해야 한다. 그렇기 때문에 콜백을 중첩해서 사용해야 하고, 이런 현상을 콜백 헬(Callback Hell, 콜백 지옥)이라고 부른다. 코드를 이해하기도 힘들고, 디버깅이나 테스팅 같은 걸 하기도 어렵기 때문이다. (하지만 콜백을 이용해서 비동기 프로그램을 구현하다보면 어쩔 수 없이 발생하는 문제였다.) 이 불편함을 해소하기 위해 Promise라는 것이 2015년에 등장했다.

참고로 모든 상황에 Promise 기반 코드가 더 좋고, 모든 비동기 작업은 Promise로 처리하는 것은 아니다. Promise는 비동기 코드의 결괏값을 활용해야 할 때 특히 유용하고 이런 경우가 아니라면 여전히 콜백을 사용한다.

'코린이 개념잡기 > 비동기 자바스크립트' 카테고리의 다른 글

await 문법  (0) 2024.12.22
Promise  (0) 2024.12.22
비동기 함수  (2) 2024.12.22
비동기 실행의 특징  (0) 2024.12.22
콜백과 비동기 함수  (0) 2024.12.22

+ Recent posts