[JavaScript] 비동기는 무엇인가

📌 비동기

비동기식 처리 모델(Asynchronous processing model 또는 Non-Blocking processing model)

• 병렬적으로 태스크를 수행한다.
  태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행한다.

예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 태스크를 수행할 때, 서버에 데이터를 요청한 이후 서버로부터 데이터가 응답될 때까지 대기하지 않고(Non-Blocking) 즉시 다음 태스크를 수행한다.
자바스크립트의 대부분의 DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작한다.

동기는?

동기식 처리 모델(Synchronous processing model)

• 직렬적으로 태스크를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다.

• 예를들어 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업 중단)된다.

자바스크립트에서 빈번하게 사용되는 비동기식 처리 모델은 요청을 병렬로 처리하여 다른 요청이 블로킹(blocking, 작업 중단)되지 않는 장점이 있다.

🔊 콜백함수

콜백은 간단히 말하면 함수 안에서 실행하는 또 다른 함수 이다
비동기 처리를 문저없이 하기위해 콜백 함수를 이용한다.

const cooking = (callback) => {
	callback('파스타');
}
const source = (name) => {
	console.log('크림' + name);
}
cooking(source) // '크림파스타'

• 비동기 처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 네스팅(nesting, 중첩)되어 복잡도가 높아지는 콜백 헬(Callback Hell)이 발생하는 단점이 있다.

• 콜백 헬은 가독성을 나쁘게 하며 실수를 유발하는 원인이 된다. 아래는 콜백 헬이 발생하는 전형적인 사례이다.

step1( val => {
  step2(val1, function(val2) {
    step3(val2, function(val3) {
      step4(val3, function(val4) {
        step5(val4, function(val5) {
 
        });
      });
    });
  });
});

이러한 단점을 보안할수 있는 유용한 promise,async-awiat 키워드가 있고 다른 페이지에서 정리해서 올렸으니 참고하자.

정리

• 비동기 작업은 성공 혹은 실패한다.
• 비동기 작업은 요청하는 쪽과 처리하는 쪽이 구분되어있다.
• 동기는 순차적 실행 하지만, 비동기는 순서가 없다.
• 콜백함수의 중첩은 가독성도 안좋고 에러 발생시 찾기도 힘들어 사용하지 않는것이 좋다.
• 비동기도 Promise , async-awiat, fetch 등 으로 순서를 제어할 수 있다.
• 새로고침없이 스무스 하게 서버를 가져온다.