[동기, 비동기 1] 데이터 처리 방식 개념 정리

1. 동기와 비동기의 개념

• 데이터를 받은 방식을 의미한다.
• 다양한 방식으로 각자 데이터를 처리하고, 상황에 따라 동기적/비동기적으로 데이터를 처리한다.
  
  

📌 동기 (Synchrounous) : 동시에 일어나는

• 순차적/직렬적으로 태스크를 수행한다.
• 요청을 보냈다면, 응답을 받아야 다음 동작이 이루어진다.
• 순차적으로 실행되므로, 어떤 작업이 수행중이라면 뒤의 작업은 대기한다.
• 블로킹(작업 중단)이 발생한다.

📌 비동기 (Asynchronous) : 동시에 일어나지 않은

• 병렬적으로 태스크를 수행한다.
• 현재 작업의 종료여부와 무관하게 다음 작업을 실행한다.
• 동기 방식과는 달리 완료 순서가 보장되지 않는다.
• 블로킹이 발생하지 않는다.

• 동기 방식은 손님이 주문을 하고 >> 커피가 나올 때 까지 기다려서 >> 커피를 받아야 한다.

• 비동기 방식은 우선 주문을 받고 >> 손님은 커피가 나오는 순서를 신경쓰지 않고 >> 진동벨이 울리면 커피를 받는다.

  • 실제 카페에서는 겉보기에 "주문을 순서대로 처리하는" 동기 방식처럼 보인다.

  • 사실 비동기와 더 닮아있다고 볼 수 있다.

  • 여러명의 바리스타가, 각각 주문을 처리하면서 순서가 달라질 수 있다.

    • 바리스타가 한명이라도, 첫번째 손님이 스무디를, 2,3번째 손님이 커피를 주문했다면 제조가 쉽고 빠른 커피를 먼저 만들면서 순서가 달라질 수 있는 법이다.

---

2. 각 타입별 장단점, 사용해야 하는 경우

• 동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있다.

• 비동기방식은 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있다.

❗️ 사용 예시:

1. 동기적 처리 방식을 사용해야 하는 경우: 돈 송금 예시

1. A의 계좌에서 10,000원이 출금된다.

2. A의 계좌로부터 B의 계좌로 돈이 전달된다.

3. B의 계좌에 돈이 10,000원이 추가된다.

4. A의 계좌에 돈이 이체된 사실이 전달된다.

5. A와 B의 계좌에서 10,000이 차감/증감된다.

   • A의 계좌와 B의 계좌는 서로 요청과 응답 과정이 지나간 후 같은 일을 동시에 진행하였다.
   • 계좌 이체와 같이 순서대로 진행되어야 하는 일의 경우 (전/후 관계가 명확한 경우) 동기식으로 데이터를 처리해야 한다.

2. 비동기적 처리 방식을 사용해야 하는 경우: 시험 채점 예시

1. 학생들이 시험 문제를 푼다

2. 시험을 푼 학생은 각자 시험지를 제출한다.

3. 학생들의 담임은 완료된 시험지부터 채점을 한다.

4. 채점이 완료된 시험지는 각 학생에게 전달된다.

5. 각 학생은 자신의 시험 결과를 확인한다.

   • 학생들과 담임은 둘 다 시험이라는 작업물을 가지고 있지만, 작업물을 처리하는 목적이 서로 다르다.
   • 서로의 목적이 다르기 때문에 작업 처리 시간이 일치하지 않아도 된다.
   • 작업 처리 시간이 일치하지 않고 목적이 동일하지 않은 경우, 비동기식으로 데이터를 처리해야 한다.
     • 이때 학생이 시험지를 돌려 받을 때까지 대기한다면 학생의 상태를 block (블록) 상태라고 할 수 있고, 대기하지 않고 본인의 다른 할 일을 하고 있다면 nonblock (논블록) 상태라고 할 수 있다.

❗️ 블록과 논블록

• Block
  • 호출된 함수가 자신이 할 일을 모두 마칠 때까지 제어권을 계속 가지고서 호출한 함수에게 바로 return하지 않으면 블럭이다.
• Non-Block
  • 호출된 함수가 자신이 할 일을 마치지 않았더라도 바로 제어권을 바로 return하여 호출한 함수가 다른 일을 진행할 수 있도록 하면 넌블럭이다.

그림 예시:

❗️ 자바스크립트는 동기일까 비동기일까?

• 자바스크립트는 동기 방식으로 코드를 해석하고, 기본적으로 코드를 순차적으로 처리한다.

• 하지만 비동기적으로 동작을 실행시킬 수 있는데, 자바스크립트의 런타임 환경이 기본적으로 여러 작업이 동시에 실행될 수 있게 구성이 되어있기 때문이다.

이벤트 루프

• 자바스크립트의 동작 방식 중 "이벤트 루프 (loop)" 이라는 것이 있다.

• 자바스크립트는 동기적으로 작업을 수행하지만, 이벤트 루프 덕분에 비동기 작업을 수행할 수 있다.

  • 코드가 실행될 때 따로 진행될 수 있는 작업은 실행 명령을 담아 이벤트 루프로 보내진다.
  • 이벤트 루프에서 따로 동작해야할 작업이 실행되고, 남은 작업들이 다시 순서대로 실행되면서 비동기적으로 코드가 실행되게 되는 것이다.
  • 비동기 작업을 만들 때 콜백함수를 함께 지정하는데, 이벤트 루프에서 작업이 완료될 시, 콜백함수를 가지고 후속 작업을 진행한다.

console.log("Hello");
// 1. 순차적으로 실행되기 때문에 콘솔에 가장 먼저 출력된다.

setTimeout(() => {
  console.log("James");
}, 1000);
// 2. 따로 작업이 가능하기 때문에 이벤트 루프로 전달되고, 이벤트 루프에서 작업이 실행된다.
// 4. 1초 후에 콜백 함수가 실행되기 때문에 이벤트 루프에서 이 작업이 끝날 때 "James"가 콘솔에 출력된다.

console.log("World");
// 3. 위의 명령이 "따로" 실행되기 때문에 순서가 이쪽으로 넘어와서 콘솔에 "World"가 출력된다.

---

자바스크립트의 엔진이 어떻게 돌아가는지, 또 어떻게 구성이 되어 있는지를 알아야 왜 기본적으로 동기적 처리를 하는 자바스크립트가 비동기적으로 코드를 실행시킬 수 있는지 이해할 수 있다.

일단 가볍게 이벤트 루프까지 설명이 되었고, 앞으로 추가적으로 필요한 내용을 정리해야겠다.

자바스크립트만 공부했지만 다른 언어들도 이렇게 복잡할지 심히 걱정된다...🫠

자료 출처:

• 오토봇팩토리
• G0 devlog
• @leehyunho2001