면접을 보고왔다. 동기와 비동기에 대하 설명해보란 질문에 마음속으로 '그정도 쯤이야' 라고 생각하고 설명을 했는데.. 하다보니 어 내가 무슨말을하는거지 ??.. 라는 생각이 들면서 주저리주저리.. 아는 개념이기에 쉽게 생각했는데 말로 설명할려니 전혀 정리가 되지않았다. 그래서 다시 정리를 해본다! JS를 기준으로 내식대로 설명해본다.

동기 vs 비동기

자바스크립트 코드가 실행될때 호이스팅후에 위에서 아래 순서대로 실행되게 된다. 순서대로 코드를 실행시키면서 내려갈때

동기는

각 코드의 실행이 모두 완료되어야 다음 코드를 실행 시킨다. 즉, 실행이 오래걸리는 코드가 있다면 그 코드 실행이 완료될때까지 다음 코드를 읽지 않고 기다리고있는 상태가 된다. ➪ Blocking

비동기는

코드를 실행요청을 하고 해당코드를 일종의 대기실로 보낸다(브라우저의 경우 WEB APIs). 그리고 다음 코드가 바로 실행되게되고, 대기실로 보내진 코드실행이 완료되면 task queue에 보내지고 stack이 모두 비게되면 event loop에 의해 task queue의 코드가 stack으로 전달되며, 완료된 비동기 코드를 실행시킨다. 이렇게 실행이 오래 걸리는 코들르 비동기 처리함으로써 코드실행이 멈추는 Blocking 상태를 피할 수 있다.

📌 Event Loop에 대한 내용은 해당영상도움이 많이 됬다.

비동기 코드사용시의 문제 ?

비동기코드를 사용했을때 발생할 수 있는 문제는 바로 비동기코드 실행의 결과가 다음 코드 실행에 필요한 경우이다. 그래서 비동기코드는 콜백함수 형태로 값을 전달시키는 방법을 사용한다. 하지만 이런 과정이 길어지면 흔희말하는 콜백지옥에 빠지게 된다. 끔찍하다.
그래서 나온 방법이 Promise, async/await 사용할 수 있다. 둘다 특정 코드가 실행된 후에 다음 코드를 실행 시킬 수 있도록 하는 방법들이고 목적에 따라 적절한 걸 사용할 수 있다.

결론

📌 동기와 비동기는 코드실행시 실행이 완료되는걸 기다리는지 안기다리는지의 차이이다! 그리고 비동기코드는 모든 코드가 실행된 이후에 비동기코드 실행 완료 순서에따라 실행된다.