입출력 기법 ( blocking I/o, Non-blocking i/o)

dahye·2021년 10월 13일

1. 학습 목표

개발자의 기법에 대한 개발 기대점.
용어 차이점 이해 및 설명 삽가능.

2. 프로그래밍 (공통)

2.1. 공통 과정
- 코드를 위에서 아래로 순차적 진행
- 한번에 한가지 사건만 발생.

2. 동기

동기 : 어떤 함수의 결과가 다른 함수가 끝나고 값을 산출할 때까지 대기하는 기법.

3. blocking

3-1. blocking

웹 앱이 브라우저에서 특정 코드를 실행하느라 브라우저에게 제어권을 돌려주지 않으면 브라우저는 마치 정지된 것처럼 보일 수 있습니다.
이러한 현상을 blocking 이라고 부릅니다.
어떤 함수의 결과가 다른 함수에 영향을 받는다면, 그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야합니다.
그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보자면, 전체 프로그앰이 멈춘거 같아보입니다.

3-2. blocking 예시 (single thread)

simple-sync.html

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
let myDate;
for(let i = 0; i < 10000000; i++) {
  let date = new Date();
  myDate = date
}

console.log(myDate);

let pElem = document.createElement('p');
pElem.textContent = 'This is a newly-added paragraph.';
document.body.appendChild(pElem);
});

입력
- 하나의 버튼에 클릭 이벤트리스너를 지정하여 시간이 오래 걸리는 처리를 하도록하였습니다. (날짜를 천만번 계산하고 마지막에 콘솔에 날짜를 출력합니다.)
  그리고 처리가 끝나면 페이지에 간단한 문장을 한 줄 출력합니다. :
출력
- 2-1-출력1 : 콘솔 메세지가 매~우 느림.
  이 예제를 실행할 때 JavaScript 콘솔을 열고 버튼을 클릭하면, 콘솔에 메시지가 출력되기 전 까지 페이지에 문장이 나타나지 않는다는 것을 알 수 있습니다. 코드는 위에서 아래로 순차적으로 실행되며, 아래쪽 코드는 위쪽 코드의 처리가 끝날 때 까지 실행되지 않습니다.
- 2-1-출력2. 버튼 2번클릭시, 출력이 매~우 느림.
  첫 번째 버튼을 클릭한 후 두 번째 버튼을 바로 클릭하면 경고 박스가 나타나지 않는 것을 확인할 수 있습니다. 첫 번째 버튼은 이벤트가 끝나기 전 까지 다음 작동을 막아버립니다.
원인
- 왜 이런 현상이 발생할까요? 답은 자바스크립트는 기본적으로 single threaded이기 때문입니다. 이 시점에서 threads의 개념을 소개할 필요가 있겠군요

3-3. Threads

3-3-1. 단일 프로세스

Thread 는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스 입니다. 각 스레드는 한 번에 하나의 작업만 수행할 수 있습니다.
결과 :

Task A --> Task B --> Task C

3-3-2. 멀티 CPU 코어와 멀티 프로세스 :

앞서 말했듯이, 많은 컴퓨터들이 현재 여러 개의 CPU코어를 가지고 있기 때문에, 한 번에 여러가지 일을 수행할 수 있습니다.
Multiple thread를 지원하는 프로그래밍 언어는 멀티코어 컴퓨터의 CPU를 사용하여 여러 작업을 동시에 처리할 수 있습니다.
효과 : 여러작업을 동시 처리
결과 :

Thread 1: Task A --> Task B
Thread 2: Task C --> Task D