비동기 프로그래밍이 뭔가요?

비동기, 콜백 함수... 자바스크립트를 프로그래밍할 때 특히 많이 듣는 언어죠?

비동기 프로그램이란 무엇이고 스레드와 어떤 연관이 있는지,
그리고 싱글스레드인 자바스크립트가 어째서 비동기와 밀접한 관계인지

각종 예시와 코드들을 통해 주요 개념들을 알아가봅니다. 🤓


🔗 일반적인 비동기 프로그래밍 개념

  • 비동기 프로그래밍에 대한 MDN의 설명입니다.



🎬 영상 주요 포인트

🍜 동기와 비동기의 개념

... 주목할 건, 이 코드들이 '순서대로' 실행된다는거에요. 동기적으로 동작한다는 걸 가장 쉽게 이해하려면 코드가 반드시 작성된 순서 그대로 실행된다고 생각하면 돼요. ... 비동기 역시 쉽게 생각하자면 꼭 한 줄 한 줄 순서대로 실행되는 건 아닌 코드인거에요. 동기는 동일한 기찻길에 놓인 열차들이에요. 때문에 앞의 열차가 꾸물거리거나 멈춰 있으면 뒤의 열차가 나아갈 수가 없죠. 비동기 방식은, 필요에 따라서 이동이 느리거나 자주 서는 열차를 다른 선로에 배치하는거에요. 이렇게 하면 뒤의 열차가 막히지 않겠죠.

🚂 자바스크립트의 비동기

자바스크립트가 도는 환경에는 이 엔진 뿐 아니라 Web API란 것이 함께 동작해요. 여기에서는 타이머를 사용하는 작업을 하거나 AJAX로 http 요청을 보내거나 파일에서 데이터를 읽어오는 등 시간을 소요하는 작업들을 수행하죠. 이 중 하나에 해당하는 태스크가 선로 진입부로 들어오면 컴퓨터는 이 열차를 자바스크립트용 특급 선로가 아닌 브라우저나 Node.js에서 운영하는 비동기 작업용 선로에 올려놓아요. 이 선로는 한 번에 여럿이 만들어질 수 있죠. 이 열차들은 보통 '콜백' 열차칸을 뒤에 달고 있어요. 시간이 걸리는 이동을 다 마친 열차들은 비동기 처리 톨게이트에 도착한 순서대로 Task Queue라는 하나의 선로에 '콜백' 칸을 올려보내요. 이 콜백 칸들은 태스크 큐 선로를 따라 자바스크립트 특급 선로로 돌아오게 돼죠. 이곳에는 물레방아처럼 계속 돌아가는 한 장치가 비동기 작업이나, 클릭 등의 사용자 입력으로부터 태스크 큐를 타고 들어오는 콜백 칸들을 기다리고 있어요. 콜백 칸들이 도착하는대로 특급 선로에 올려서 이 콜백 함수들이 자바스크립트에서 실행되도록 하는 이 장치를 '이벤트 루프'라고 해요.

⭐️ 영상에서 코드 예제와 함께 살펴보세요!


🍿 더 자세한 내용은 영상에서 보실 수 있습니다.





관련 태그의 다른 영상들

비동기 프로그래밍이 뭔가요?
동기와 비동기의 개념, 자바스크립트에서의 비동기를 알아봅니다.
# 동기
# async
# 스레드
# 콜백
# 이벤트 루프
프로세스, 스레드가 뭔가요?
컴퓨터의 멀티태스킹은 당연하지 않(았)다? 프로세스와 스레드를 알아봅니다.
# 프로세스
# 스레드
# 멀티태스킹
...
🌏 Why not change the world?