김민태의 데브캠프 2기 - Event System 맛보기

자바스크립트에는 여러가지 Event System이 존재한다.

 비동기 예시를 들자면.. 

 

function funcTask1() {
	const asyncTask1 = (data, callback) => { 
    setTimeout(() => { //주로 한번, setInterval: 일정한 간격마다 ..
    	callback(data + "asyncTask1");
        }, 800);
  }
 
 const asyncTask2 = (data, callback) => {
 
 	setTime(() => {
    	const error = { message : "error"};
        callback(data + 'asyncTask2"):
      }, 400);
   }
   
  asyncTask1('data', (data) => {
  	console.log(data);
    asyncTask2('data', (data) => {
    	console.log(data);
    })
 });

위 코드를 실행하면 콜백 지옥에 걸린다 

왜냐하면 

 

다음은 병렬 실행에 대해 알아보자

 

(코드)

 

 

비동기는 일반저긍로 리턴을 키워드로 값을 반환할 수 없다.

비동기는 다음의 상황에서 주로 쓰이는데

    sequence proces(순차)

      A 함수 실행이 완료된 후 B함수가 실행되어야 할 때

   parallel process(병렬)

     A 함수와 B함수의 로직이 서로 영향이 없을 떄

A, B 함수 중 더 빨리 실행된 것으로 어떠한 동작을 할 때 사용

 

promis

  일관된 오류 처리를 할 때

  콜백 함수를 중첩해서 받고 싶지 않은 경우(콜백 지옥 일 때)

  then으로 실행할 코드 또는  catch로 오류 처리 코드 작성 가능

 비동기 작업 흐름의 틀만 제공하며, 여러 비동기 작업을 연결할 때 편리

await

   await이 적용된 함수에 async 명시 해야함

  비동기를 동기처럼 동작

  promise 객체가 리턴되는 지점에 await을 붙임

 

Event System

 call back  - 브라우저에서도 디버거로 볼 수 있음

microtask queue

task queue

 event loop - 브라우저가 요청하는 event 실행 -> task queue에 존재하는 동작 실행 -> microtask queue의 모든 동작 실행 -> rerender

 

타임스탬프 코드 분석 후 "클로저" 개념에 대해 아라보자