[코딩만화] 비동기 프로그래밍이 뭔가요?
Vložit
- čas přidán 30. 08. 2019
- #비동기 #프로미스 #이벤트루프
비동기, 콜백 함수... 자바스크립트를 프로그래밍할 때 특히 많이 듣는 언어죠?
비동기 프로그램이란 무엇이고 스레드와 어떤 연관이 있는지,
그리고 싱글스레드인 자바스크립트가 어째서 비동기와 밀접한 관계인지
각종 예시와 코드들을 통해 주요 개념들을 알아가봅니다. 🤓
= = =
🏠 얄코사이트: www.yalco.kr
🛒 개발자스티커 구매: smartstore.naver.com/honeykers
🎥 가장 쉬운 Git 튜토리얼: • [고정댓글필독] 가장 쉬운 Git 강좌 ...
🎥 포인터 쉽게 알아보기: • 포인터가 뭐고 왜 쓰는건가요?
🎥 객체지향에 대해 알아보기: • 객체지향 프로그래밍이 뭔가요?
🎥 객체지향 디자인 패턴: • 객체지향 디자인패턴 1
🎥 함수형 프로그래밍이란?: • 함수형 프로그래밍이 뭔가요?
🎥 쿠키 vs 세션 vs 캐시: • 쿠키, 세션, 캐시가 뭔가요?
🎥 프로세스와 스레드: • 프로세스는 뭐고 스레드는 뭔가요?
🎥 비동기 프로그래밍: • [코딩만화] 비동기 프로그래밍이 뭔가요?
🎥 REST API 알아보기: • [구버전 - 고정댓글 필독] REST A...
🎥 GraphQL 알아보기: • [고정댓글 필독] GraphQL이 뭔가요?
===
🎬 영상 주요 포인트
🍜 동기와 비동기의 개념
...
주목할 건, 이 코드들이 '순서대로' 실행된다는거에요.
동기적으로 동작한다는 걸 가장 쉽게 이해하려면
코드가 반드시 작성된 순서 그대로 실행된다고 생각하면 돼요.
...
비동기 역시 쉽게 생각하자면
꼭 한 줄 한 줄 순서대로 실행되는 건 아닌 코드인거에요.
동기는 동일한 기찻길에 놓인 열차들이에요.
때문에 앞의 열차가 꾸물거리거나 멈춰 있으면
뒤의 열차가 나아갈 수가 없죠.
비동기 방식은, 필요에 따라서
이동이 느리거나 자주 서는 열차를
다른 선로에 배치하는거에요.
이렇게 하면 뒤의 열차가 막히지 않겠죠.
🚂 자바스크립트의 비동기
자바스크립트가 도는 환경에는 이 엔진 뿐 아니라
Web API란 것이 함께 동작해요.
여기에서는 타이머를 사용하는 작업을 하거나
AJAX로 http 요청을 보내거나
파일에서 데이터를 읽어오는 등
시간을 소요하는 작업들을 수행하죠.
이 중 하나에 해당하는 태스크가 선로 진입부로 들어오면
컴퓨터는 이 열차를 자바스크립트용 특급 선로가 아닌
브라우저나 Node.js에서 운영하는
비동기 작업용 선로에 올려놓아요.
이 선로는 한 번에 여럿이 만들어질 수 있죠.
이 열차들은 보통 '콜백' 열차칸을 뒤에 달고 있어요.
시간이 걸리는 이동을 다 마친 열차들은
비동기 처리 톨게이트에 도착한 순서대로
Task Queue라는 하나의 선로에
'콜백' 칸을 올려보내요.
이 콜백 칸들은 태스크 큐 선로를 따라
자바스크립트 특급 선로로 돌아오게 돼죠.
이곳에는 물레방아처럼 계속 돌아가는 한 장치가
비동기 작업이나, 클릭 등의 사용자 입력으로부터
태스크 큐를 타고 들어오는 콜백 칸들을 기다리고 있어요.
콜백 칸들이 도착하는대로 특급 선로에 올려서
이 콜백 함수들이 자바스크립트에서 실행되도록 하는
이 장치를 '이벤트 루프'라고 해요.
===
🎵 엔딩송 : 권민호, 김한영 - Let's Dance
🎼 자료출처 : gongu.copyright.or.kr
🎼 Music promoted by DayDreamSound : • Video - Věda a technologie
![[코딩만화] 웹 공격과 방어 (보안, 파라미터 변조, XSS, SQL 인젝션, 비밀번호 암호화)](/img/n.gif)
이세상 설명이 아니다 ㅋㅋㅋㅋㅋㅋㅋ
와 진짜 너무 고퀄이에요!! 비동기, 콜백지옥, 프로미스, async, await까지 너무 재미있고 깔끔한 설명이였습니다. 최고에요!👍👍
ㅠㅜ 조코딩님 감사합니다!!
와! 조코딩님이다! 조코딩인은 예제를 잘만드시고 얄코님은 함수이름을 잘지으셔요!
이사람의 메인 잡은 뭘까..? 개발자? 교육자? 연기자? 필름 디렉터? 아니면 모델? 외모만 봐선 마지막이 확실한데
헛 ㅜㅜ 감사합니다!!
얄팍한 코딩 사전은 내용이 얄팍하다는 의미가 아니라
우리가 그동안 알고 있다는 지식이
얄팍하다는 것을 반성하라는 의미였다.
비동기 & 특급열차 진짜 설명 미쳤네요.....
감사합니다!!
정말 대단하시네요,
비동기 세계관도 그렇고 특급열차 설명까지.. 영상만드는데 엄청 정성을 쏟으신 게 느껴집니다. 감사해요 앞으로 좋은 영상 많이 만들어주세요 ❣️
ㅋㅋㅋㅋㅋ 왠지 이런 유머코드 너무좋다
ㅠㅜ 좋아해주셔서 감사해요!!
정말 대단하십니다 해외 다른 설명을 다 들어봐도 이것보다 뛰어난 설명은 없었네요 잘 듣고 갑니다~
이런 지식들을 즐겁게 알수있다는것만으로도 너무 감사합니다! 공부도 되고 취미로도 느껴져서 항상 챙겨보겠습니다!
정말 대단하시네요,, 실무자들도 때때로 헷갈릴 수 있는 개념을 이렇게 한 번에..
설명 정말 잘 하시는 것 같아요. 매번 영상 볼 때 마다 감탄하면서 봅니다.
너무 센스있고 쉬운 예시로 설명해주서서 감사합니다~ 이해가 쏙쏙되네요!
감사합니다!!!
이렇게 깔끔한 비동기 설명을 본 적이 없습니다... 감동 ㅠㅠ
감사합니다!!
대단하다 정말.. 콜백 헬 예시에 감탄하고 갑니다
와 진짜 설명 너무 잘하신다; 진짜 말도 안됨. 설명의 신임 그냥 이분은 ..
요새 얄팍코님 라디오 듣다가 여기까지 왔는데 내용이 잘 이해가서 너무 좋네요
진짜 최고예요 :) 설명도 그렇지만 영상제작자로서도 너무 능력이 출중하신것 같습니다! 늘 감사합니다 ^^
감사합니다!!! ㅠ
궁금한 걸 어찌알고 콕 집어주는 족집게력과
형을 향한 분노의 메서드 연기에 감동받고 갑니다
ㅠ 감사합니다!!
특급열차 설명은 정말 이해가 잘되네요, 감사합니다~
아니 지나가다가 보는데 설명 미쳤네ㅋㅋㄱㄱㄱㅋㄱ채널 흥하실거에요!
감사합니다!!!
진짜 너무 감격,,, 이렇게 재밌게 표현해주시다니 ㅠㅠ ㅠ 너무 감사해요
귀에 쏙쏙박히고 영상퀄리티도 넘좋아요~~~
감사합니다 ㅠㅜ
와 진짜 설명 비유 좋아요 ㅋㅋ 맨날 비동기 듣기만하고 무슨소린지 잘 몰랐는데 한방에 이해가네요 감사해요~~
감사합니다!
파이썬 비동기 보다가 왔습니다. 설명 너무 간결하고 쉽네요. 파이썬 asyncio 자료가 너무 없어 이벤트루프 설명을 찾으려다 자바에 대해 아는게 없어 거부감이 있었는데 이거 못봤으면 큰일날 뻔 했네요. 감사합니다.
설명 완벽. 비유 완벽. 효과음 완벽.
오늘 처음 봤는데 바로 구독했어요 ... 제가 여태까지 몰라뵀을까요 ... 맙소사 이해가 너무 잘되요 .. 대단하십니다 ㅠ
어렵게만 느꼈던 개념을 쉽고 재밌게 설명해 주셔서 감사합니다!
이번편 너무 재밌네욬ㅋㅋ
재밌게 봐주셔서 감사해요!!!
설명 너무 좋네요
영상자료가 특히 정말정말 좋은듯
감사합니다!!
와... 복잡했던 머리가 시원해지는 느낌이에요. 감사해요 !!!!!
아는것을 쉽세 설명하는 능력은 대단한 슈퍼파워입니다 😊 미코 너무 웃겨요~
와 너무 감사합니다. 정주행중인데 콘텐츠 많이 제작해주세요 !!
감사합니다!!
저도 열심히 비동기 작업할께요~~ 얄코님 새영상 올라오기 전에 이전 영상들 정독하고 있을께요 ㅋㅋ
얄코님은 코린이의 빛과 소금이자 태양이십니다
감동입니다
와 얄코는 천재👍
설명 감사합니다 도움이 많이 되었어요! 앞으로도 좋은 내용 많이 부탁드립니다!
감사합니다!!!
우와 설명 좋네요!! 이해하기 매우 좋습니다!!
와 설명 진짜 너무 잘하세요 감사합니다!!
정성에 무릎을 탁 치고 갑니다
감사합니다!!
마지막 도랏ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
너무나 유익해요 ~ 영상만들어주셔서 감사합니다!
정말 도움이 많이 되었습니다! 감사합니다!
뭘 읽어도 이해가 안됬는데 당신은 도덕책... 좋아요 씨게 박고 갑니다.
감사합니다!
최고의 설명입니다 진짜!!!
감사합니다!!!
감사합니다 ㅠㅠ 얄코샘 짱
설명 정말 좋아요!감사합니다!
비유가 예술이네요 ㅎㅎ 설명 잘 들었습니다
앜ㅋㅋㅋㅋㅋㅋㅋㅋㅋ애니메이션 진짜 도랏ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ최고에요!!!
ㅎㅎ 감사합니다!!
진짜 이해 잘되게 설명하시네요..ㅎㅎ async await 잘 배우고 갑니다
감사합니다!
얄팍님 곧 ebs 진출하실거같아요 ㅋㅋㅋ
와 퀄리티가 진짜 장난아닙니다!!!!!!!
감사합니다!
사랑합니다 ㅋㅋㅋㅋㅋ 진짜설명 최고네요
감사합니다!!
정말 이해가 되네요 잘 봤어요 감사합니다 !!!
감사합니다!
존경합니다... 공부하면서 괴로웠던 부분이었는데 전세계 1짱임에 분명합니다.
ㅠㅠ 감사합니다!!
엄청난 비유력과 실제 코드와의 비교로 개념적으로나 실질적(?)으로나 이해가 완벽하게 되었네요! 감사합니다 :)
감사합니다!!
후.. 어려운 설명이었는데 덕분에 수월하게 이해가 되었어요!
감사합니다!!
너무 고퀄입니다. 선생님!!
감사합니다!
비 동기라닠ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ아니 매번 생각지도 못하다가 뿜네욬ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ개발자님 휴가다녀와서 피부 약간 그을린것도 졸귘ㅋㅋㅋㅋㅋㅋㅋ
와 설명 쏙쏙 들어와요!!
정말 훌륭하십니다 선생님
감사합니다!!
이걸 보면서 저의 생활패턴에 대해서 반성하게 되네요 ㅎㅎ;; 비동기적으로 살고자 노력해야겠습니다 ㅠㅠ
어~~~~~ 웨잇! ㅎㅎㅎ 최고입니다!
미쳤다. 설명 너무 좋아요 진짜 큰도움 받고갑니다
감사합니다!!
내용 좋네요~ 감사합니다.
감사합니다!
빵터졌어요😂
빠른 흐름을 위해서 말 사이 쉬는 구간을 다 짤라주셨는데 너무 빨라서 ㅋㅋㅋ 이해하는게 말을 못따라가요
속도를 조금 천천히 해서 들으시면 조금 나을거에요 😀
미쳤...다..... 구독자 100만 찍으실거 같아요..
정말감사합니다! 유머가 점점 느시는것같아요 ㅎ
ㅠㅜ 감사합니다!!
ㅋㅋㅋㅋㅋㅋ 비 동기 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 좋은 영상 감사합니다~!!
감사합니다!!
너무 재밌어서 광고까지 다 보고 갑니다 ㅋㅋ
감사합니다!!
감사합니다 !
최고에요😂😂👍🏼
감사합니다!
역시 이번 영상도 꿀잼이에영 ㅎㅎ 감사합니당!! 다음엔 혹시 const, let, var 의 차이에 대해서 설명해주실 수 있나요?? var를 안 쓰고 let만 쓰고 있는데. 차이가 뭔지 잘 모르겠어용 ㅠㅠ
의견주셔서 감사합니다! 언제 스코프를 다루려고 계획중인데 그때 함께 설명드릴게요!!!
ㅋㅋㅋㅋㅋ재밌게 보고갑니다~
ㅎㅎ 감사해요~!!
알~ 겠써요!!
와 대박 유투브 찾았어😂😂😂
비동기 콜백으로 누가 공부좀 대신해서 내머로넘겨주면 좋을텐데..
ㅠㅜ 어느정도는 제가 처리해서 영상으로 리턴해드릴게요!!
@@yalco-coding 사랑해요
저두요
사랑합니다... 죄송하지만 더 열일해주세요ㅎㅎ
사랑합니다♡
와 진짜 이해 안되었는데 이거 보고 이해 했어요 !!!!!!!!!!!!!!!!!!!!!!
이거 미쳤네요... 리액트에서 aysnc가 뭔지 몰랐는데, 아니 데이터 할 때 저게 뭔 지 몰랐는데 비동기처리를 위한 거였네요. 예전 코드 다시 보면 새로울 듯
비동기 이해가 글로보니까 잘 안되던데 영상으로 보니까 이해되네요 감사합니다
감사합니다!!
오늘도 잘보고 갑니다!!
비동기를 비의 동기로 설명할 줄이야...
감사합니다!!
ㅜㅜ 진짜 ㅋㅋㅋㅋㅋ 하 비 동기...너무 진짜 웃겨요
웹개발 입문한지 3달째... 아직도 뇌구조가 블로킹시퀀스에서 벗어나지 못했었는데.... 고맙습니다. 선생님 ㅠ ㅠ
도움되어드려서 기쁩니다! 감사합니다~~
비둘기인지 뭔지 암튼 잘배웠습니다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ진짜 잘만들었다ㅋㅋㅋㅋ
뭐야 너무 재밌어 ㅜㅡ
와 미친 async await 가 그런 용도 있군요. 파이썬 3.8이후로 많이 강조되는 기능인데도 불구하고 이해가 안되서 갑갑했는데 덕분에 이해했어요ㅠㅠ
감사합니다!!
마지막에 현웃했네요 ㅋㅋㅋㅋㅋㅋㅋ
와... 설명이 ㄷㄷ하네요!
성우 같아요. 재밌어요.. 감사합니다.
어디가셨는지 알고 놀랐네요.. 영상 항상 잘보고 있습니다!
감사합니다!!!
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 재밌고 이해 잘되네요 잘보고갑ㄴ디ㅏ
재미있게 봐주셔서 감사합니다!
고맙습니다
감사합니다!
와 설명 잘하시네요ㄷㄷ
0:50 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
천재이시다
헉 ㅠㅜ 감사합니다
ㅋㅋㅋ 진짜 이걸 왜 이제봄? ㅋㅋㅋㅋ 구독해야 ㅋㅋㅋ
미쳤다 너무 쉽게 이해되고 귀에 쏙쏙 들어옵니다. 그리고 지루하지 않아요.영상 하나만 본다는게 연속적으로 보게 되고 좋아요만 누르고 있어요.👍
감사합니다!!!
와 존경합니다
감사합니다
감사합니다!!