비동기 처리의 이해

동기적처리와 비동기적 처리의 차이점

• 동기적 : 작업이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다.
• 비동기적 : 코드를 실행하게 될 때 흐름이 멈추지 않는다. 동시에 여러가지 작업을 처리 할 수 있고, 기다리는 과정에서 예로 다른 함수를 호출할 수 있다.
  

---

동기적 예시

function work(){
	//
	const  start = Date.now();
	for(let i = 0; i < 1000000000; i++){
	
	}
	const end = Date.now();
	console.log(end - start + 'ms');
}

work();
console.log('다음 작업');

• Date.now() : JS내장함수 - 현재날짜를 숫자형태로 표시
• work함수가 호출되고 실행되고 있는 동안은 코드의 흐름이 여기서 멈춰 있다가 끝나고 난 다음 '다음 작업' 실행

비동기적 예시

• 하고자 하는 작업이 백그라운드에서 실행이 되기 때문에 기존의 코드 흐름을 막지 않고 동시에 다른 작업 진행

function work(){
	setTimeout(()=>{
		const start = Date.now();
		for(let i = 0; i < 100000000; i++){
		
		}
		const end = Date.now();
		console.log(end - start + 'ms');
	}, 0) //0ms 후 호출해 주겠다.(실제로는 4ms후 실행-브라우저가 정한 최소 값이기 때문)
}

console.log('작업 시작');
work();
console.log('다음 작업');

---

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C