[네트워크] 동기, 비동기, Blooking, Non-Blooking

동기 (Synchronous)

• 정의: 작업이 순차적으로 실행되며, 하나의 작업이 완료될 때까지 다음 작업이 기다립니다.
• 예시:
  • 자바스크립트의 alert() 함수는 실행되는 동안 다른 작업을 막음
  • 서버에서 데이터를 받아올 때 응답이 오기 전까지 화면이 멈추는 경우

장점

• 직관적: 코드가 순차적으로 실행되기 때문에 이해하기 쉽고 디버깅이 용이
• 예측 가능성: 실행 순서를 예측하기가 쉽고, 특정 시점에서 상태를 파악하기가 간단함

단점

• 속도 저하: 하나의 작업이 오래 걸리면 전체 프로세스가 멈추고 기다려야 함
• 블로킹 문제: 느린 작업(예: 네트워크 요청)이 있는 경우 사용자 경험이 저하됨

 

비동기 (Asynchronous)

• 정의: 작업을 요청한 후 완료를 기다리지 않고 다음 작업을 계속 수행하며, 나중에 결과가 준비되면 이를 처리합니다.
• 예시:
  • 자바스크립트의 fetch() 함수로 서버에 데이터를 요청하고, 응답이 오기 전에 다른 코드를 실행함.
  • 웹 브라우저에서 버튼을 눌렀을 때 페이지가 멈추지 않고 계속 응답하는 경우.

장점

• 빠른 응답: 느린 작업을 기다리지 않고 다른 작업을 병렬로 수행할 수 있어 성능이 향상됨
• 사용자 경험 개선: 네트워크 지연과 같은 작업이 있어도 UI가 멈추지 않음

단점

• 복잡성: 코드의 실행 순서를 제어하기 어려워 디버깅이 어려울 수 있음
• 콜백 헬: 많은 비동기 작업을 처리하다 보면 코드가 복잡해지기 쉽고, 가독성이 떨어짐 (콜백 지옥)
  • 이를 해결하기 위해 Promise, async/await 같은 문법이 등장했습니다.

언제 동기와 비동기를 선택해야 할까?

• 동기(Synchronous) 방식이 적합한 경우:
  • 작업의 결과가 반드시 순차적으로 필요할 때 (예: 계산 단계가 의존적일 때)
  • 네트워크 요청이 없는 단순한 연산이나 파일 처리
• 비동기(Asynchronous) 방식이 적합한 경우:
  • 네트워크 요청, 파일 입출력 등 느린 작업이 포함된 경우
  • UI/UX 개선이 필요한 경우 (예: 웹사이트의 반응성 유지)
  • 여러 작업을 동시에 처리해 성능을 극대화해야 할 때

 

블로킹(Blocking)

• 정의: 요청한 작업이 끝날 때까지 현재 실행 중인 코드가 멈추고, 해당 작업이 완료된 후에야 다음 작업을 수행함
• 특징: 자원을 요청한 프로세스나 스레드가 대기해야 하며, 다른 작업은 중단된 상태로 대기 시간이 발생함

 

예시

1. 파일 읽기: 파일을 읽는 동안 프로그램의 나머지 코드가 멈춤
2. 네트워크 요청: 서버로부터 응답을 받을 때까지 브라우저가 멈추는 동기 HTTP 요청

const fs = require('fs');
const data = fs.readFileSync('file.txt', 'utf8');  // 파일이 끝까지 읽혀야 다음 코드로 이동
console.log(data);


const request = new XMLHttpRequest();
request.open('GET', 'https://api.example.com', false);  // 동기 방식 (블로킹)
request.send();  // 서버 응답까지 멈춤
console.log(request.responseText);

 

 

장점

• 코드의 직관성: 순차적으로 실행되기 때문에 코드 이해가 쉽다
• 데이터 일관성: 한 작업이 끝난 후에만 다음 작업을 진행하므로 작업 간 데이터 의존성을 쉽게 관리할 수 있다

단점

• 성능 저하: 시간이 오래 걸리는 작업이 있으면 그동안 모든 작업이 대기해야 함
• 사용자 경험 저하: 예를 들어, 브라우저가 서버 응답을 기다리는 동안 멈춘다면 UI가 응답하지 않게 됨

 

논블로킹(Non-blocking)

• 정의: 요청한 작업이 끝나지 않아도 즉시 다음 코드로 이동하며, 작업이 완료되면 나중에 별도로 그 결과를 처리함
• 특징: 작업의 결과가 준비되지 않았더라도 다른 작업을 계속 수행할 수 있어 대기 시간이 발생하지 않음

예시

1. 파일 읽기 - 비동기
2. 네트워크 요청 - 비동기

const fs = require('fs');
fs.readFile('file.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);  // 파일 읽기가 끝난 후에 출력
});
console.log('Reading file...');  // 이 코드가 먼저 실행됨


fetch('https://api.example.com')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
console.log('Request sent');  // 이 코드가 먼저 실행됨

 

장점

• 성능 향상: 여러 작업을 동시에 진행할 수 있어 작업 시간이 줄어듦.
• 좋은 사용자 경험: 네트워크 지연 중에도 프로그램이 멈추지 않아 UI가 부드럽게 작동함.

단점

• 복잡성 증가: 작업의 순서를 제어하거나 결과를 처리하는 로직이 복잡해질 수 있음.
• 콜백 지옥: 논블로킹 처리 중 콜백 함수가 중첩될 경우 코드 가독성이 떨어질 수 있음 (해결책: Promise, async/await).

 

 

동기/비동기 블로킹/논블로킹 차이점 

• 블로킹 vs 논블로킹은 작업 대기 시간과 관련된 개념입니다.
  • 블로킹: 요청한 작업이 끝날 때까지 기다림
  • 논블로킹: 기다리지 않고 다른 작업을 수행
• 동기 vs 비동기는 작업 순서 제어 방식과 관련된 개념입니다.
  • 동기: 작업을 순차적으로 실행
  • 비동기: 작업을 병렬로 처리하며, 결과가 준비될 때 처리

 

동기/비동기 + 블로킹/논블로킹 조합

	동기	비동기
블로킹	순차적으로 실행되며 대기함	(잘 사용되지 않음)
논블로킹	(잘 사용되지 않음)	요청 후 다른 작업을 계속 수행함

 

 

JavaScript 비동기 함수의 진실

JavaScript의 비동기 함수는 대부분 비동기 + 논블로킹(Asynchronous + Non-blocking) 방식으로 동작합니다. 이 특성 덕분에 JavaScript가 I/O 작업(네트워크 요청, 파일 읽기 등)과 같은 시간이 오래 걸리는 작업을 효율적으로 처리하며, 싱글 스레드 환경에서도 높은 성능을 낼 수 있습니다.