[TIL] 비동기와 이벤트처리

Narastro·2021년 8월 5일
0

TIL

목록 보기
12/16
post-thumbnail

비동기 방식이 동기방식과 달리 어떻게 다르게 동작하는지?

나만의 방식으로 간단하게 얘기해보자면, 자바스크립트의 비동기 방식은 프로미스나 프로미스 안의 콜백함수를 테스크 큐에 넣고 콜 스택이 비었을 때 이벤트루퍼가 콜 스택으로 푸쉬해주는 형태로 동작한다.
따라서

setTimeout(()=>console.log('wow'),0);
for (let i=0 ; i<100; i++)
	console.log(i)

를 하여도 for문이 다 돌고 난 뒤에 wow가 출력된다.
자바스크립트 비동기 함수는 setTimeout, setInterval, HTTP요청, 이벤트 핸들러가 있다.
얘네들은 다른 함수와 달리 코드를 줄별로 콜스택에 넣어 처리하는 것이 아니다. 따라서 함수가 리턴된 이후에도 비동기 함수가 리턴될 수 있다.

모듈/객체를 나누는 기준

나의 경우는 어떠한 추상적인 개념을 가진 것들을 객체로 모듈/객체로 나눈다. 또 추가적으로 라이브러리 모듈과 함수들로만 구성된 모듈도 있지만 주로 객체를 기준으로 모듈을 나누는 방식을 선호한다.

비동기 방식으로 구현할 때 어려운 점은 무엇이고, 디버깅을 쉽게 도와주는 다양한 방법?

  • 크롬 카나리 개발자도구에서 자바스크립트 콜백의 콜 스택을 전부! 볼 수 있다.
  • 함수에 이름을 넣기 (windowLoaded!)
window.addEventListener('load', function windowLoaded(){
  // 무엇인가 하기
});

스레드를 생성하는 것과 여러 비동기 방식을 비교해보고, 어떤 제약사항이 있는지?

멀티스레드와 비동기 방식의 차이는 전체 작업 진행 중 스레드가 살아있느냐의 차이라고 볼 수 있다. 특히 IO 작업의 경우 멀티스레드도 큰 효과를 볼 수 없으며 비동기프로그래밍이 필요하다. 또한 이벤트 루프는 요청시 그 작업에 대해 스레드 실행만을 일으키며 해당 스레드가 작업을 마치면 미리 전달 받은 콜백 함수를 실행시키고 이를 클라이언트에게 응답한다고 한다.

끄적끄적

주말에 구조를 싹 갈아엎고 이벤트 처리를 이용했다. 다만 아직 비동기처리가 미숙하다. 계속 보다보면 이해가 될까?! 이번 주에는 정말 많은 것을 배운 것 같다.

profile
Earn this, Earn it.

0개의 댓글