[코딩만화] 비동기 프로그래밍이 뭔가요?

#비동기 #프로미스 #이벤트루프

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

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

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

= = =

🏠 얄코사이트: https://www.yalco.kr
🛒 개발자스티커 구매: https://smartstore.naver.com/honeykers

🎥 가장 쉬운 Git 튜토리얼:    • [고정댓글필독] 가장 쉬운 Git 강좌 - (상) 혼자작업편  
🎥 포인터 쉽게 알아보기:    • 포인터가 뭐고 왜 쓰는건가요?  
🎥 객체지향에 대해 알아보기:    • 객체지향 프로그래밍이 뭔가요?  
🎥 객체지향 디자인 패턴:    • 객체지향 디자인패턴 1  
🎥 함수형 프로그래밍이란?:    • 함수형 프로그래밍이 뭔가요?  
🎥 쿠키 vs 세션 vs 캐시:    • 쿠키, 세션, 캐시가 뭔가요?  
🎥 프로세스와 스레드:    • 프로세스는 뭐고 스레드는 뭔가요?  
🎥 비동기 프로그래밍:    • [코딩만화] 비동기 프로그래밍이 뭔가요?  
🎥 REST API 알아보기:    • [구버전 - 고정댓글 필독] REST API가 뭔가요?  
🎥 GraphQL 알아보기:    • [고정댓글 필독] GraphQL이 뭔가요?  

===

🎬 영상 주요 포인트

🍜 동기와 비동기의 개념
...

주목할 건, 이 코드들이 '순서대로' 실행된다는거에요.

동기적으로 동작한다는 걸 가장 쉽게 이해하려면
코드가 반드시 작성된 순서 그대로 실행된다고 생각하면 돼요.
...

비동기 역시 쉽게 생각하자면
꼭 한 줄 한 줄 순서대로 실행되는 건 아닌 코드인거에요.
동기는 동일한 기찻길에 놓인 열차들이에요.

때문에 앞의 열차가 꾸물거리거나 멈춰 있으면
뒤의 열차가 나아갈 수가 없죠.

비동기 방식은, 필요에 따라서
이동이 느리거나 자주 서는 열차를
다른 선로에 배치하는거에요.

이렇게 하면 뒤의 열차가 막히지 않겠죠.

🚂 자바스크립트의 비동기
자바스크립트가 도는 환경에는 이 엔진 뿐 아니라
Web API란 것이 함께 동작해요.

여기에서는 타이머를 사용하는 작업을 하거나
AJAX로 http 요청을 보내거나
파일에서 데이터를 읽어오는 등

시간을 소요하는 작업들을 수행하죠.

이 중 하나에 해당하는 태스크가 선로 진입부로 들어오면

컴퓨터는 이 열차를 자바스크립트용 특급 선로가 아닌
브라우저나 Node.js에서 운영하는
비동기 작업용 선로에 올려놓아요.

이 선로는 한 번에 여럿이 만들어질 수 있죠.

이 열차들은 보통 '콜백' 열차칸을 뒤에 달고 있어요.

시간이 걸리는 이동을 다 마친 열차들은
비동기 처리 톨게이트에 도착한 순서대로

Task Queue라는 하나의 선로에
'콜백' 칸을 올려보내요.

이 콜백 칸들은 태스크 큐 선로를 따라
자바스크립트 특급 선로로 돌아오게 돼죠.

이곳에는 물레방아처럼 계속 돌아가는 한 장치가
비동기 작업이나, 클릭 등의 사용자 입력으로부터
태스크 큐를 타고 들어오는 콜백 칸들을 기다리고 있어요.

콜백 칸들이 도착하는대로 특급 선로에 올려서
이 콜백 함수들이 자바스크립트에서 실행되도록 하는

이 장치를 '이벤트 루프'라고 해요.

===

🎵 엔딩송 : 권민호, 김한영 - Let's Dance
🎼 자료출처 : https://gongu.copyright.or.kr
🎼 Music promoted by DayDreamSound :    • Видео