[TIL]0904_비동기호출에 대해

오늘의 TIL을 작성하기 이전에..

오늘은 비동기호출에 관해 다시 공부하여 블로깅을 하기로했다. 저번에 진행한 scope/closer의 다음 차례이다. 한 챕터씩 나아가는건 언제나 즐거운 일이다. 주어진 일주일 동안 나는 자기관리는 물론이고, 며칠에 걸쳐서 이해가 되지 않았던 부분들도 다시 공부하면서 비교적 당황하지않고 기수에 탑승하고자 노력하고있다. 이전처럼, 또 다시 허둥대지않고 천천히, 하지만 이어나가는 것이다. 내가 날 돌보지 않으면, 내가 나를 가르치지않으면 누가 나를 교육시킬것인가. 막히는 문제들이 있더라도 내 자신을 포기하지 않는 연습을 하는것을 이번 일주일동안 하고있다. 결과가, 좋았으면 좋겠다. 4주후든, 20주 후든. 🤔

비동기 호출(Asynchronous call)

• 다른함수의 전달인자로 넘겨주는 함수를 말함.
• 인자를 넘겨받는 함수는 콜백함수의 필요성을 느낄시 실행(synchronously)하며, 아니면 나중에 실행(asynchronously)도 가능하다.

  ex) 동기적으로 함수를 실행하는 경우.

  function B(){
  	console.log('called at the back!!');
  
  }
  function A(callback){
  	callback(); //callback === B 
  }
  
  A(B);

---

callback in action : 반복 실행하는 함수(iterator)

ex)

[1,2,3].map(function(element, index){

	return element * element;
})

---

callback in action : 이벤트에 따른 함수(event handler)

ex)

document.querySelector('#btn').addEventListener('click',function(e){

	console.log('button clicked!');
})

function handleClick(){
	console.log('sfssf');
}

document.querySelector('#btn').onclick = handleClick;   //o
document.querySelector('#btn').onclick = function(){	//o
	handleClick();

}
document.querySelector('#btn').onclick = handleClick();   //x. handleClick()의 실행결과는 undefined이기 때문에, 즉 리턴값이 없기때문에 함수실행을 연결하면 x!!! 
//함수자체를 연결해야함.위처럼.

---

blocking vs non-blocking

전화 vs 문자 로 설명 시..

• 하던일을 멈추고 받아야함.(blocking) vs 확인 후,나중에 답장가능(non-blocking)
• 요청에 대한 결과가 동시에 일어남(synchronous) vs 요청에대한 결과가 동시에 안 일어남(asynchronous)

커피주문으로 알아보는 동기 vs 비동기

커피주문이 동기적으로 작동시..

1. 손님1이 아메리카노 주문
2. 접수받은 직원이 아메리카노 내림
3. 직원이 손님1에게 아메리카노 전달.
4. 손님2가 카페라떼를 주문. < 손님2는 손님1의 아메리카노가 다 만들어질때까지, 주문도 못하고 대기열에 있어야함.
5. 접수받은 직원이 아메리카노 내림
6. 직원이 손님2에게 아메리카노 전달.

커피주문이 비동기적으로 작동시..

1. 손님1이 아메리카노 주문
   1. 접수받은 직원이 아메리카노 내림
   2. 완성되면 직원이 손님1을 부름. < callback
   3. 직원이 손님1에게 아메리카노 전달.

2. 손님2가 카페라떼를 주문.
   1. 접수받은 직원이 카페라떼 내림
   2. 완성되면 직원이 손님2를 부름. < callback
   3. 직원이 손님2에게 아메리카노 전달.

ex) 비동기적 커피주문 예제. //갑자기 같은 예제 여러번보니 이해됨..!
  
let customers = [
{
name: 'Steve',
request: '카페라떼'
},{
name: 'John',
request: '아메리카노'
}
];

function waitAsync(callback, ms){
	setTimeout(callback, ms); //특정시간(ms 인자)이후에 callback함수(drink)가 실행되게끔 하는 브라우저 내장기능.
}
function drink(person, coffee){ //waitAsync()가 실행된뒤 실행될 함수의 내용(즉, 콜백) 
	console.log(person+"는"+coffee+"를 마십니다.");
}

function orderCoffeeSync(coffee, callback(= drink)){ //사전에 쓸 함수를 먼저 작성, 후에 drink 즉 콜백작성하고,
//이를 4000ms후에 출력할것이기 때문에 waitAsync()함수를 작성하여, 
//콜백, ms인자를 주어 최종적으로 호출되게 함.
	console.log(coffee+"가 접수되었습니다.");
	waitAsync(function(){
		callback(menu);
	},4000);
}

//call asychronously
customers.forEach(fuction(customers){
	orderCoffeeSync(customers.request, function(coffee){
	drink(customers.name, coffee);
	});
});

---

-비동기의 주요사례

• DOM 엘리먼트의 이벤트핸들러
  • 마우스 , 키보드 입력 (click, keydown 등) //DOM 세션 참고
  • 페이지 로딩(DOMCOntentLoaded 등) //DOM 런코 Note 참고
• 타이머
  • 타이머 API(setTimeout 등) //Timer API 세션 참고
  • 애니메이션 API(requestAnimationFrame) //직접 찾아보기
• 서버에 자원요청 및 응답
  • fetch API //서버에 요청하기 세션
  • AJAX(XHR) //직접 찾아보기

---

• 타이머 API

  • setTimeout(callback, millisecond): 일정시간 후에 함수를 실행

    · arguments : 실행할 callback함수, callback함수 실행 전 기다려야 할 시간(ms)
    · return value : 임의의 타이머 ID

    예제01)
    setTimeout(function(){
    	console.log('1초후 실행');
    },1000);  //>  임의의 타이머ID : 123 출력.
    
     예제02)
    setTimeout(function(){
       console.log(2);
    },1000);
    console.log(3); // 3이 먼저 찍히고, 1000ms이후에 2가 찍힘.
    
    예제03)
    console.log(1);
    setTimeout(function(){
       console.log(2);
    },1000);
    setTimeout(function(){
       console.log(3);
    },0)
    console.log(4); //setTimeout()으로 기다려야할시간을 지정하지않은 것들이 바로 먼저 출력되고,
     //그 후에 0초후에 실행되는 함수실행, 그리고 1초후에 실행되는 함수가 실행되는것을 볼수있다.``` 

---

• setInterval(callback, millisecond) : 일정시간의 간격을 가지고 함수를 반복적으로 실행.
  · arguments : 실행할 callback함수, 반복적으로 함수를 실행시키기위한 시간간격(ms)
  · return value : 임의의 타이머ID

  예제04)
  setInteval(function(){
  	console.log('1초'마다' 실행');
  },1000); //345 >임의의 타이머ID  ```

---

• clearInterval(timerId) : 반복 실행중인 타이머 종료
  · arguments : 타이머ID
  · return value: 없음.

  예제05)
  let timer = setInterval(function(){
  	console.log('1초마다 실행');
  },1000);
  clearInteval(timer); //위의 timer가 더이상 반복실행되지 않음.
  
   예제06) setInterval과 clearInterval의 응용
  let count =0;
  let timer = setInterval(function(){
     console.log('1초마다 실행');
     count++;
   if(count === 5){
     console.log('5초가 지나면 중지합니다..continue?');
     clearInterval(timer);
   }
  },1000);
  console.log(timer); //타이머ID는 임의로 122가 출력됐음.
  //결과는 (1)먼저 5초 후 종료가되고, (2)후에 콘솔로그가 찍힌것을 확인할수있었음..