[CS]동기(Synchronous) & 비동기(Asynchronous)

✅ 동기 방식(Synchronous)

• 요청과 응답이 동시에 일어난다.
• 추구하는 목적이 동일하다.
• 하나의 작업이 끝나야 다음 작업을 수행할 수 있다.
• 노드간의 작업 처리 단위(트랜잭션)을 동시에 맞춘다.

  ex) 은행. 계좌이체를 할 때 A계좌에서 돈이 빠져나가고 B계좌로 입금되는 작업이 동시에 이루어져야 한다.

✔ 동기 방식의 장단점

• 장점: 설계가 간단하고 직관적이다.
• 단점: 작업이 끝날 때까지 다른 작업은 계속 대기해야 한다.

✔ 예시

• 사용자의 입력을 받는 함수 등 일반적으로 사용되는 함수는 대부분 동기식이다.

✅ 비동기 방식(Asynchronous)

• 요청에 대한 응답이 동시에 일어나지 않는다.
• 추구하는 목적이 다를 수 있다.
• 요청 결과와 상관 없이 다음 작업을 수행할 수 있다.
• 노드간의 작업 처리 단위(트랜잭션)을 동시에 맞추지 않아도 된다.

  ex) 페이지 접속 시 특정 데이터에 대한 응답이 없더라도 나머지 데이터는 그에 영향을 받지 않는다. 이미지 하나를 불러오지 못한다고 페이지 자체가 열리지 않는 상황을 방지한다.

✔ 비동기 방식의 장단점

• 단점
  * 동기 방식보다 복잡하다.
• 장점
  * 작업의 병렬처리가 가능해서 효율적이다.

✔ 예시

1. Ajax

• JS 라이브러리 중 하나.
• 비동기식으로 서버에 데이터를 요청해 전체 페이지를 새로고침하지 않아도 필요한 부분만 가져올 수 있다.
• 화면의 전환 없이 요청과 응답이 이뤄진다.
• 페이지 이동이 없는 통신으로 인해 보안상의 문제가 생길 수 있다.
• 연속으로 데이터 요청 시 서버 부하가 발생할 수 있다.
• 다른 도메인과는 통신이 불가능하다(Cross-Domain문제).

2. setTimeout()

• 지정한 시간만큼 기다렸다가 실행하는 JS 함수.

• 아래 코드의 출력 순서는 2, 1이 아닌 1, 2이 된다.

  setTimeout(boo, 3000);
  
  function boo(){
     console.log("2");
  }
  console.log("1");
  
  >>> 1
  >>> 2

✔ 콜백(callback) 함수?

• 비동기 방식에서 어떤 작업이 완료됐을 때 수행되는 함수다.
• 비동기 방식에서는 함수를 호출한 쪽에서 직접 수행결과를 처리하지 않고 콜백 함수를 통해 처리한다(위 코드에서 boo()함수가 setTimeout()함수의 콜백(callback)함수다).
• 단, 콜백 지옥에 빠지지 않게 주의해야한다.

---

[참고 사이트]

동기 ( synchronous ) vs 비동기 ( asynchronous )
비동기 통신과 AJAX