[TIL] Day24 #callback #비동기

[TIL] Day24
[SEB FE] Day24

☑️ Callback Review

➰ Callback: 다른 함수의 전달인자(argument)로 넘겨주는 함수
✋ 필요에 따라 즉시 실행(synchronously) 가능, 나중에(asynchronously) 실행도 가능

📎 Callback in action

1. 반복 실행하는 함수 (iterator)

   // 배열 길이만큼 반복 실행
   [1, 2, 3].map(function(element, index) {
       return element * element;
   });

2. 이벤트에 따른 함수 (event handler)

   document.querySelector('#btn').addEventListener('click', function(e) {
       console.log('button clicked');
   });

   function handleClick() {
       console.log('button clicked');
   };
   // handleClick() 호출시 return 값이 없기 때문에 실행 결과는 'undefined'
   
   document.querySelector('#btn').onclick = handleClick; // ⭕️
   
   document.querySelector('#btn').onclick = function() {
       handleClick();
   } // ⭕️
   
   document.querySelector('#btn').onclick = handleClick.bind(); // ⭕️
   
   // 함수 실행을 연결하는 것이 아님 -> '함수 자체'를 연결해야 함!
   document.querySelector('#btn').onclick = handleClick(); // ❌

---

☑️ 비동기(asynchronous)

➰ 동기적(synchronous): 요청에 대한 결과가 동시에 발생
➰ blocking

➰ 비동기적(asynchronous): 요청에 대한 결과 동시에 발생하지 않음
➰ non-blocking

✋ Node.js는 non-blocking하고 비동기적(asynchronous)으로 작동하는 런타임으로 개발

😐 비동기 함수 실행시 순서가 제맘대로 → 순서 제어를 하고 싶어 → callback
→ But, callback 함수를 많이 쓰면 가독성이 떨어짐 ⇒ callback hell
→ promise 사용

👉 즉, 비동기 함수의 순서를 제어하고 싶을 때 callback을 이용

📎 비동기 함수 전달 패턴

1. callback 패턴

   let request = 'coffee';
   orderCoffeeAsync(request, function(response) {
   	drink(response);
   });

2. 이벤트 등록 패턴

   let request = 'coffee';
   orderCoffeeAsync(request).onready = function(response) {
   	drink(response);
   });

➰ client: 서버로 접속하는 컴퓨터
➰ server: 무언가(서비스, 리소스 등)를 제공하는 컴퓨터

📎 Promise

😐 callback hell 탈출을 위해 사용 → But, Promise도 Promise hell에 갇힐 수 있음

• Promise.prototype.then: Promise를 반환하므로 메서드 체이닝(Chaining) 가능
• Promise.prototype.catch: 에러가 난 경우 실행되는 메서드 (마지막 체이닝에서 실행)

const printString = (string) => {
	// 2번째 파라미터인 reject에 에러가 났을 경우의 콜백 함수을 적어주면 .catch와 같은 역할 수행
	return new Promise((resolve, reject) => {
		setTimeout(
			() => {
				console.log(string)
				resolve()
			},
			Math.floor(Math.random() * 100) + 1
			)
		})
	}

	const printAll = () => {
		printString('A');
		.then(() => {
			return printString('B')
		})
		.then(() => {
			return printString('C');
		})
	}
	printAll()
}

==========

function goToBed() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {resolve(print goToBed)}, 100)
	})
}

📎 async / await

promise hell을 탈출을 위해 사용

const result = async () => {
	const one = await gotoComputer();
	console.log(one)

	const two = await sitAndCode();
	console.log(two)

	const three = await eatLunch();
	console.log(three)
}

result();

✋ await 키워드는 async 키워드를 앞에 붙인 function 안에서만 동작

📎 Timer API

JS 내장 비동기 함수

1. setTimeout(callback, millisecond)

   : 일정 시간 후에 함수 실행
   
   ```jsx
   const timer = setTimeout(function () {
     console.log('1초 후 실행');
   }, 1000);
   
   // 1000 -> 1초
   // 10000 -> 10초
   ```

   ✋ setTimeout의 두번째 전달인자에 값을 넣지 않아도 동작은 하지만, timer의 기능은 제한

2. clearTimeout(timerId)

   : setTimeout 타이머 종료
   
   ```jsx
   clearTimeout(timer);
   ```

   
   

3. setInterval(callback, millisecond)

   : 일정 시간의 간격을 가지고 함수 반복적 실행
   
   ```jsx
   setInterval(function() {
   	conosle.log('3초마다 실행');
   }, 3000);
   ```

   
   

4. clearInterval(timerId)

   clearInterval(timer);