[JavaScript] 동기와 비동기

동기(Synchronouse)

정의

---

• 현재 실행 중인 코드가 끝나야 다음 코드를 실행
  = 현재 실행중인 task가 종료할 때까지, 다음 task가 대기하는 방식

const arr = [];

for (let i = 0; i < 1000; i++) {
  arr.push(i);
}

console.log(arr);

for (let i = 1000; i < 2000; i++) {
  arr.push(i);
}

console.log(arr);

• 순서대로 실행. 아무리 반복문이 1000번, 10000번 돌아도 하나의 for문이 다 끝나야 다음 코드로 넘어간다.

고민할 점

---

• 장점: 동기 처리는 코드를 순서대로 하나씩 실행하기 때문에, 실행 순서가 보장된다.
• 단점: 현재 실행중인 task가 종료될 때까지 다음 task가 실행이 안 된다는게 문제
  = task가 블로킹(blocking) 된다고 말한다.

const arr = [];

for (let i = 0; i < 1000; i++) {
  arr.push(i);
	// 1000번 반복하면서 실행할 더더더더더 복잡한 코드
}

console.log(arr);

for (let i = 1000; i < 2000; i++) {
  arr.push(i);
	// 여기도 진짜~~~ 복잡한 수한 계산식들..
}

console.log(arr);

• for문 내 로직이 매 반복마다 매우 복잡하고 오래걸리는 계산을 하는 경우
• js가 아무리 빨라도 반복수도 많고, 계산이 정말 복잡하면 느릴 수 있습니다!

참고) 전형적인 동기의 blocking 예제

const arr = [];

for (let i = 0; i < 1000; i++) {
  arr.push(i);
	// 1000번 반복하면서 실행할 더더더더더 복잡한 코드
}

**alert("안녕하세요");**  // 확인 누를 때까지 console 코드로 넘어가지 않음
****console.log(arr);

비동기(Asynchronouse)

정의

---

• 현재 실행 중인 코드가 완료되지 않아도, 다음 코드로 넘어감
  = 비동기 task(코드)는 실행하라고 브라우저에 맡겨놓고, 다음 task(코드)로 넘어감

// 화면 그리기 1

axios.get(url)
	.then(response => {
		// api 호출하고 응답받으면 실행
	})

// 화면 그리기 2
// 다른 로직~~

• api 호출하고 언제 응답이 올지는 모르겠음
  1. 화면 그리기 1 하고
  2. api 호출하고
  3. 화면 그리기2 하다가
  4. 응답오면 로직 실행하고
  5. 다시 다른 로직 진행~~

고민할 점

---

• 장점: 현재 실행중인 task가 완료되지 않아도, 다음 task를 실행하기 때문에 블로킹이 발생하지 않는다.
• 단점: task의 실행 순서가 보장되지 않는다.
• 프론트에서 또 어떤 비동기 로직들이 있을까요?

🙋🏻‍♀️ [비동기 처리가 필요한 이유]
자바스크립트 엔진은 한 번에 하나의 task만 실행할 수 있는 Single Thread. Single Thread는 한 번에 하나의 task만 실행할 수 있기 때문에 처리에 시간이 걸리는 task를 실행하는 경우 Blocking(작업 중단)이 발생한다.
Blocking 되면 사용자가 다음 task가 실행될 때까지 기다려야 되겠죠? 🤢

🙆🏻‍♂️ [여기에서 바로 콜백함수가 등장]
비동기를 처리하기 위해 전통적으로 콜백패턴을 사용합니다.

AJAX(Asynchronous JavaScript and XML)

👩🏻‍💼 잠깐 AJAX 얘기하고 갈게요.

• AJAX의 등장은 혜성☄️ 과도 같았다..
• AJAX는 js를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 응답한 데이터를 수신하여 웹페이지를 일부 동적으로 갱신.