[JS] 비동기 처리 (Asynchronous)
비동기 처리(Asynchronous)란?
특정 코드의 연산이 끝날 때까지 뒷 부분의 코드의 실행을 멈추는게 아니라, 특정 코드의 연산을 시작하고 바로 뒷 부분의 코드를 시작하는 처리 방식을 뜻한다.
웹에서 비동기 처리가 필요한 이유가 뭘까?
흔히 웹 페이지에서 화면에 데이터가 출력되기 전에 화면 중앙에 로딩바가 출력되는 것을 본 적이 있을 것이다.
이와 같은 상황에서 동기 처리가 된다면, 데이터가 전부 출력되기 전에는 다음 로직을 수행할 수 없기 때문에, 데이터가 전부 출력되지 않더라도 다른 기능들을 사용할 수 있도록 비동기 처리가 필요하다.
JS에서의 비동기 처리
JS에서 비동기 처리를 하는 대표적인 예로는 ajax가 있다.
보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시할 때 ajax 통신을 사용한다.
JQuery에서는 ‘$.get()’ 명령어를 사용하여 ajax 통신을 하게되는데, 위와 같이 tableData라는 변수에 조회한 결과 값을 넣었음에도 console.log() 에 출력되는 값은 ‘undefined’가 출력되는 것을 확인할 수 있다.
‘$.get()’을 사용하여 데이터를 요청할 때, 요청한 값을 불러오기 까지 기다린 후에 다음 코드 (return tableData;)를 실행하는 것이 아니라,
’$.get()’ 으로 요청 > ‘return tableData’ 실행 > ajax 요청 데이터 조회
순으로 코드 진행이 이루어지기 때문에 조회된 값이 tableData에 들어가지 않고 tableData를 출력했을 때는 ‘undefined’로 출력되는 것이다.
위와 같이 특정 로직의 실행이 끝날 때까지 기다리지 않고, 바로 뒤 코드를 먼저 실행하는 것을 비동기 처리라고 한다.
비동기 처리 방식은 잘 활용하게 되면 분명 유용한 기능이지만, 위와 같이 의도하지 않은 상황을 야기하기도 한다.
이 때, 콜백 함수를 사용하여 위와 같은 문제를 해결할 수 있다.
콜백 함수를 사용하게 되면, ajax 비동기 처리가 완료된 후에 콜백 함수를 실행하기 때문에 위와 같이 의도된대로 동작을 수행할 수 있다.
다만, 콜백 함수를 사용할 때 적절히 사용하지 않으면, 흔히 말하는 ‘콜백 지옥’에 빠질 수 있기 때문에 콜백 함수 사용 시에는 주의해야 한다.
‘콜백 지옥’ 이란?
비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때, 발생되는 문제이다.
예를 들어, 데이터를 받아와서 화면에 표시하기까지 인코딩 변환, 사용자 인증 등의 작업이 사전에 처리되어야 하는 경우,
이 과정들을 전부 비동기로 처리해야한다면, 비동기 함수 안에 콜백 함수 안에 콜백 함수 안에 콜백....같은 구조가 발생될 수 있다.
이렇게 되면, 가독성도 떨어지고 로직 변경 시에도 전체 구조를 다시 바꿔야 하는 등의 문제가 발생될 수 있다.
콜백 지옥을 해결하기 위해 각 콜백 함수들을 분리하여 작성하여 해결할 수 있다.
어느정도 해결되기는 했지만 위와 같이 여전히 가독성이 떨어지는 경우에는 promise를 사용하여 해결하는 것이 권장된다.