728x90

동기와 비동기

지금까지 자바스크립트와 리액트를 공부하면서 동기와 비동기에 대해 정확히 이해하고 사용한 것이 아닌, 필요에 의해 대략적인 이해만 하고 사용하고 있었다. 하지만 비동기적인 처리를 점점 더 많이 해나갈수록 정확히 이해하고 사용해야겠다는 필요성을 느끼게 되어 이번 기회에 정확히 자바스클비트의 동작 원리를 알고 사용해야 겠다고 생각한다.

동기와 비동기에 대해 공부해보니 결국 이 두 가지는 수행 순서에 대한 매커니즘이라는 생각이 들엇으며, 두 가지에 대해 공부를 해보니 blocking, non-blocking과 동기 비동기를 연관지어 이야기하고 있다.

다만 이 두가지의 개념의 관점이 다른 곳에 맞춰진 개념들이지만 묶어서 언급하면 쉽게 이해가 되므로, 동기와 비동기의 추상적인 개념을 블록킹과 논블록킹의 직관적인 개념을 사용하여 언급한다고 생각한다

동기(Synchronous)란 무엇인가?

동기라는 단어는 우리가 일상생활에서 한번씩 마주치는 단어이므로 약간의 이해가 되는 느낌이다. 예를들어 핸드폰과 컴퓨터간의 사진이나 연락처를 공유하고자 할때 동기화 버튼을 누르게 되면 두개의 기기의 파일이 공유되어 동일한 상태로 만드는 것을 경험할 수 있다.

하지만 프로그래밍에서의 동기라는 뜻은 위에서 언급한 동일한 상태로 만드는 것과 다르다고 볼 수 있다.

한글로 동기라는 뜻은 같을 동, 기약할 기로서 같은 기간 또는 주기라는 뜻인데 반해, 영어인 synchronous는 동시에 발생하는 뜻을 가지는 것으로 동시성을 나타낸다고 볼 수 있다.

결국 프로그래밍에서 동기의 듯은 동시에 발생해야하는 조건이라고 볼 수 있다. 자바스크립트에서는 코드를 위에서부터 아래로 순차적으로 실행이 되며, 상위코드가 완료가 되지 않는다면 하위코드 역시 실행이 되지 않는 것과 같다. 즉, 동기는 모든 코드가 순서를 가지고 실행되는 것이라고 생각한다.

동기 - 블록킹(Blocking) 방식

동기를 설명하면 항상 나오는 블록킹은 무엇을 뜻하는 것일까? 우선 블록킹/논블록킹은 직접 제어할 수 없는 대상을 처리하는 방법에 따라 나누는 것으로, 직접 제어할 수 없는 대상으로는 대표적으로 I/O 장치, 멀티쓰레드 동기화가 있다.

블록킹의 경우 직접 제어할 수 없는 대상의 작업이 끝날 때까지 제어권을 넘겨주지 않는 것이다. 작업이 순차적으로 진행되는 것이 보장되고, 블록킹 방식이기 때문에 어떠한 작업이 진행 중일때는 다른 작업을 동시에 진행할 수가 없다는 것을 뜻한다. 일밙거으로 자바스크립트를 사용하면 블록킹 방식으로 진행된다는 것을 알 수 있다.

예를들어 집청소를 진행한다고 했을 때 동기적으로 실행한다고 가정한다면, 동시에 진행할 수 없고 한가지씩 진행되며 이전의 작업이 마무리 되어야 다음 일로 넘어갈 수 있다는 것이다.

빨래가 완료될 때까지 기다리기
설거지 하기
화장실 청소하기

// 동기적으로 집 청소하기

const mySync = {
  laudry: () => {
    console.log("세탁기 돌리기 시작");
    let percentage = 25;

    while(percentage !== 100) {
      console.log(`${percentage}% 완료`)
      }
    },
  dishes: () => console.log("설거지 하기"),
  toilet: () => conosle.log("화장실 청소 하기")
  }
}

const doWorkSync = () => {
  mySync.laudry();
  mySync.dishes();
  mySync.toilet();
}

doWorkSync();

// 동기적인 실행 결과

세탁기 돌리기 시작
25% 완료
50% 완료
75% 완료
100% 완료
설거지 하기
화장실 청소 하기

비동기(Aynchronous)란 무엇인가?

비동기 방식은 현재 작업의 응답과 다음 작업의 요청이 동시에 진행되지 않아도 되는 것으로 응답에 관계없이 바로 다음 동작이 실행되는것을 말한다. 특정 작업을 시작(리퀘스트 보내기)하고 완벽하게 다 처리(리스폰스를 받아서 처리)하기 전에 실행 흐름이 바로 다음 코드로 넘어가고, 나중에 콜백이 실행되는 것을 '비동기 실행'이라 할 수 있다.

비동기 실행은 한번 작업을 시작해두고 그 작업이 완료되기 전이라도 콜백만 등록해두고, 코드의 실행 흐름이 바로 그 다음 코드로 넘어가벼, 추후에 특정 조건이 만족되면 콜백이 실행됨으로써 해당 작업을 완료하는 방식인데, 여기서 주의할 점은 비동기 실행에서는 코드가 꼭 등장하는 순서대로 실행되는 것이 아니므로, 코드를 해석할 때 주의가 필요하다.

그렇다면 비동기실행이라는건 왜 존재할까?
그건 바로 비동기 실행이 동기 실행에 비해, 동일한 작업을 더 빠른 시간내에 처리할 수 있기 때문이다.

비동기 - 논블록킹(Non-Blocking)방식

논블록킹 방식은 직접 제어할 수 없는 대상의 작업처리 여부와 상관없이 작업을 진행할 수 있는 것으로, 상위 프로세스의 작업 완료여부 또한 신경쓰지 않는다.

보통 자바스크립트로 웹 통신을 하려면 비동기 실행으로 진행되는데, 이러한 이유는 웹페이지가 로딩되거나 어떠한 이벤트의 소요시간이 길다면 화면이 나타나지 않거나 의도하지 않은 동작이 일어나므로 비동기 방식을 통해 페이지가 로딩 중이라는 것을 사용자가 알 수 있도록 해야한다.

예를들어 앞에서 본 동기적으로 집 청소하기를 비동기적인 방식으로 집 청소를 하게 된다면, 먼저 세탁기를 돌려놓고 설거지, 화장실 청소를 진행하며, 세탁기가 종료되는 순간 일이 끝나는 구조이다. 동기적이였을 때는 세탁기가 종료되는 시점에 설거지와 화장실 청소를 하는데 반해, 비동기적으로 진행했을 경우 동시에 진행이 되므로 청소 시간이 훨씬 단축되는 것이다.

// 비동기적으로 집 청소하기

const myAsync = {
  laundry: () => {
    new Promise((resolve, reject) => {
      console.log("세탁기 돌리기 시작");
      let percentage = 25;

      const intervalId = setInterval(() => {
        console.log(`${percentage}% 완료`);
        percentage += 25;

        if (percentage === 100) {
          clearinterval(intervalId);
          console.log(`${percentage}% 완료`);
          resolve();
        }
      }, 100);
    }),
  },
  dishes: () => console.log('설거지하기'),
  toilet: () => console.log('화장실 청소 하기')
};

const doWorkAsync = () => {
  meAsync.laundry();
  meAsync.dishes();
  meAsync.toilet();
}

doWorkAsync();

// 비동기적인 실행결과
세탁기 돌리기 시작
설거지 하기
화장실 청소 하기
25% 완료
50% 완료
75% 완료
100% 빨래 완료

// 비동기 코드 동기적으로 수행하기
const doWorkAsync = async () => {
  await meAsync.laundry()
  meAsync.dishes()
  meAsync.toilet()
}

doWorkAsync()