동기와 비동기
우선 동기와 비동기를 알기 전 자바스크립트는 동기식 언어이다. 자바스크립트는 단일(싱글) 스레드 방식의 언어로 한 번에 하나의 일만 처리한다. 그렇기 때문에 동기식 방식으로 작업을 처리한다.
그렇다면 만약 하나의 작업이 1시간 걸린다면 다음 작업은 1시간을 기다려야 한다. 이런 불상사를 해결하기 위해서 비동기 방식으로 작업을 처리해야 한다.
동기적(Synchronous)
동기식 방식은 직렬 형태로 작업을 수행하는데, 순차적으로 함수가 호출되고 각 함수의 작업이 끝나기 전 까지는 다음 작업을 실행하지 않는 형태다.
Task1 실행 후 서버에서 데이터를 가져오는 작업을 실행하고 다음 Task2, Task3을 실행한다고 생각해보자. 여기서 동기적인 방식으로 작업을 진행할 경우, Task1 실행 후 서버에서 데이터를 가져올 때 네트워크 지연으로 30초가 걸렸다고 한다면,
30초 동안 Task2와 Task3는 완료될 때까지 기다려야 한다.
비동기적(Asynchronus)
비동기식 방식은 병렬적인 형태로 작업을 수행한다. 동기적 방식은 순차적으로 작업을 처리하면서 모든 작업 하나하나가 완료될 때 다음 작업을 처리했다면 비동기적 방식은 작업이 종료되지 않아도 다음 작업을 실행하는 방식이다.
Task1 작업을 실행하고 서버에 데이터를 호출하면 기다리지 않고 바로 Task2를 실행시킨다. 그리고 서버에서 데이터가 도착하면 콜백 함수가 호출돼 작업을 실행한다. 동기적 방식처럼 블록킹 되지 않아 낭비되는 시간 또한 발생하지 않는다.
간단하게 동기와 비동기의 차이점을 자바스크립트로 구현해봤다.
See the Pen 동기 vs 비동기 by junheeleeme (@junheeleeme) on CodePen.
이렇게 동기와 비동기의 개념을 알아보았다. 서버 통신이나 시간 어느 정도 걸리는 작업의 경우 상황에 맞게 코드를 작성하기 위해서는 동기/비동기 개념을 어느 정도 알아야 할 필요가 있다.
자바스크립트는 싱글 스레드 동기적 언어라고 한다. 다음 주제로 스레드의 개념을 공부해보도록 해야겠다.