1. 비동기 처리란?
비동기적이라는 것이 무엇일까요?
말이 조금 어렵지만 쉽게 말하면, 한번에 하나의 작업만 가능하다는 것입니다.
이걸 좀 더 컴퓨터 공학적으로 말하면, 자바 스크립트는 싱글 쓰레드 언어다 라고 말 할 수 있습니다.
그런데 자바스크립트로 만들어진 다양한 기능들을 사용하면, 분명 복잡하고 느린 작업인데 빠르게 처리하는 것처럼 보입니다.
심지어는 동시에 처리하는 것 처럼 보입니다!
이 빠른 속도의 비밀은 바로 비동기 처리에 있습니다.
2. 비동기 처리의 사용 예시
비동기 처리를 사용하지 않는다면, 자바스크립트는 하나하나 순차적으로 처리 합니다.
예를 들어 비동기 처리를 하지 않는다면, 대용량 파일을 다운 받을 때, 이 대용량 파일 하나를 다운 받는동안에는 프로그램은 그대로 멈춰 버리고 말 것입니다.
그때, 느린 작업은 잠시 미뤄두고, 다른 작업을 먼저 처리 한 후, 작업이 끝났을 때, 받아서 처리하는 구조를 사용하는게 시간적으로 훨씬 이득이라는 것 입니다.
이 처리를 바로 비동기 처리라고 합니다.
3. 비동기 처리의 3가지 방식
(1) 콜백 함수
콜백 함수는 다음과 같이 생겼으며, 파일을 다운 받는 예시를 보여 줍니다. if, throw 를 사용해서 에러 유무를 체크 해주고는 data 를 받아 옵니다. 다만, 콜백 함수는 여러가지 문제점이 있어 잘 쓰이지 않습니다. 대표적으로는 콜백의 수가 늘어질 수 록, 코드가 매우 복잡해 진다는 것입니다. 오른쪽에 들어간 예시는 처럼 콜백이 많아 질수록 계속해서 들여쓰기가 되는 현상이 발새아여 배우 복잡합니다. 그래서 이런 코드를 콜백 지옥이라고 부릅니다.
(2) Promise
콜백 보다 깔끔하게 비동기 작업을 할수 있습니다. 대표적으로 저 .then 메서드를 이용해서 비동기 처리를 해 주시면 되고, 에러는 .catch 를 사용해 주시면 됩니다.
(3) async/await
이 문법 최신 문법이자 가장 많이 쓰입니다. promise를 더 직관적으로 쓰기위한 문법으로 보기에는 동기 코드 처럼 보이지만, 내부적으로는 비동기 자업으로 진행 됩니다. 함수 앞에 async 를 꼭 붙여주고, 그 함수 안에서 await를 사용 하시면 됩니다.
4. 결론
자바스크립트는 싱글스레드 언어지만, 비동기 처리를 사용하면, 더 효율적으로 작동 할수 있습니다. 이 비동기 처리는 프론트, 백 가리지 않고 서버와의 통신을 더 효율적으로 하기 위해 자주 사용 됩니다. 서버와의 통신이 필요한 다양한 곳에서 필수적으로 사용되기에 꼭 알아 두면 좋을 것 같습니다.