# 비동기 처리와 콜백 ## 미션 비동기 처리와 콜백, 그 개념과 사용법을 익히시오. ## 개념 ### 동기적 처리 - synchronous 자바스크립트는 동기적 처리가 기본이다. 동기적 처리란, 요청 결과를 확인한 뒤 다음으로 넘어가는 방식이다. <img src="http://drive.google.com/uc?export=view&id=1l6CZ5fEuckHc13pwboZu0wE4C3noLd3S" alt="홍팍-자바스크립트-동기적-처리-방식"> 라면 끓이기를 예로 들자. 라면을 사오고, 물을 끓이고, 라면을 조리하는 3가지 단계로 이를 진행한다 하자. 각각의 수행시간을 4분, 5분, 3분이라 하면, 총 수행 시간을 얼마일까? ``` function ramen() { buy(); // 4 min boil(); // 5 min cook(); // 3 min } ``` 동기적 처리로 수행한다면, 총 12분이 걸린다. 라면을 사오는데 4분, 물이 끓는데 5분, 조리하는데 3분 씩 차례로 걸리기 때문이다. <img src="http://drive.google.com/uc?export=view&id=1l6bCZaMBVBpK6Q8ez8vGZVp0LFNRKegC" alt="홍팍-자바스크립트-동기적-처리-소요시간"> ### 비동기 처리 - asynchronous 라면을 끓이는데 12분이라니, 참을 수 없다. 비동기 처리를 통해 더 빨리 끓여보자. 비동기 처리란, 결과를 기다리지 않고 다음으로 넘어가는 방식이다. <img src="http://drive.google.com/uc?export=view&id=1l7ZoycO7kF6u28f-l_8lRTh0D9n3HE1z" alt="홍팍-자바스크립트-비동기적-처리-방식"> 앞서 라면 끓이기 예를, 비동기 처리하면 다음과 같이 동작한다. 먼저 buy() 함수에게 "라면 좀 사다 줘~" 한 다음, 기다리지 않고 바로 boil() 함수에게 "물 좀 끓여 줘~" 하는거다. 그 다음 바로 또, "라면 조리 좀~" 하고 cook() 함수에게 말한다. 이렇게 각 요청의 결과를 기다리지 않고, 바로바로 다음으로 넘어가는 것. 이를 비동기 처리라 한다. 앞서 동기적 처리에서 12분이던 소요시간이, 비동기 처리로 인해 5분으로 단축되었다. <img src="http://drive.google.com/uc?export=view&id=1l7uP1iry4gXdtSehwfcAi4lBKNAc7kWr" alt="홍팍-자바스크립트-비동기-처리-소요시간"> ### 비동기 처리 시, 주의 점 그런데, 뭔가 이상하다. 라면을 사오면서 물을 끓이는 건 말이 된다. 하지만 라면도 없고 물도 끓지 않는데, 어떻게 조리가 가능하단 말인가? cook() 함수는 이전 두 함수 buy() 와 boil() 의 결과를 기다린 후에 수행되어야만 한다. 이렇게 비동기 처리방식은 순서가 보장되어야 하는 상황을 주의해야 한다. <img src="http://drive.google.com/uc?export=view&id=1l9UqYfNqncNVwqCBKYA0yH19mHDYWJsi" alt="홍팍-자바스크립트-비동기-처리-주의점"> ### 콜백 콜백(callback)을 사용하면, 비동기 처리의 순서를 보장할 수 있다. 여기서 콜백이란, 함수를 파라미터로 받아 다시 호출하는 기법이다. <img src="http://drive.google.com/uc?export=view&id=1lBiwPA15uqyErSkQoakNq0rZHNMGijuD" alt="홍팍-자바스크립트-콜백이란-callback"> 다음 greetings() 함수는 그 예로, doNext를 통해 입력 함수를 콜백한다. ``` function nice() { console.log("Nice to meet you!"); } function greetings(doNext) { console.log("Hello,"); doNext(); // callback => nice(); } greetings(nice); ``` ## 구글링 훈련 🔥 - 자바스크립트 동기 vs 비동기 - 자바스크립트 콜백이란