동기와 비동기의 차이

장현웅·2024년 1월 15일

이 두 용어는 작업의 실행 및 완료에 대한 제어 흐름을 다르게 다루는 방식을 나타냅니다.

동기 (Synchronous)

  1. 실행의 순차적 흐름
    동기 작업은 코드의 실행 흐름과 함께 진행됩니다. 한 작업이 시작되면 해당 작업이 완료될 때까지 다음 작업이 시작되지 않습니다.

  2. 예시 - 파이썬 함수 호출

def example1():
	print("start")
    print("work 1")
    print("work 2")
    print("end")

example1()

비동기 (Asynchronous)

  1. 동시에 여러 작업 처리
    비동기 작업은 여러 작업을 동시에 처리할 수 있습니다. 한 작업의 완료를 기다리지 않고 다른 작업을 시작할 수 있습니다.

  2. 예시 1 - 이벤트 루프

document.getElementById('Button').addEventListener('click', function() {
    console.log('Button Clicked');
});

이벤트 리스너는 버튼이 클릭되면 실행됩니다. 그러나 addEventListener는 버튼의 클릭을 감지하고 이벤트 핸들러를 등록하는 동안에도 코드의 나머지 부분이 계속 실행됩니다. 이벤트 핸들러는 비동기적으로 실행되어, 이벤트가 발생할 때까지 기다리지 않고 다른 코드와 병행하여 실행됩니다.

  1. 예시 2 - 콜백 함수
console.log('start');
setTimeout(function() {
    console.log('run callback');
}, 1000);
console.log('end');

setTimeout은 비동기적으로 동작하며, 1초 후에 등록된 콜백 함수를 실행합니다. 그러나 setTimeout 이후의 코드는 1초를 기다리지 않고 즉시 실행됩니다. 따라서 콜백 함수는 비동기적으로 실행됩니다.

  1. 예시 3 - 프로미스 또는 퓨처
fetch('https://yummyyagi.com/story/1')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

fetch 함수는 네트워크 요청을 시작하고, 데이터를 받아오기 전에 다음 코드가 실행됩니다. .then()은 프로미스의 완료를 기다리고, 그 후에 비동기적으로 데이터를 처리합니다.

동기 VS 비동기 비교

동기와 비동기를 비유를 들어 설명하면,

동기:

비유: 일회용 카메라
설명: 한 번에 하나의 사진만 찍을 수 있습니다. 사진을 찍을 때까지 기다려야 하며, 다음 사진을 찍으려면 이전 사진이 완료될 때까지 기다려야 합니다.

비동기:

비유: 다중 렌즈 카메라
설명: 여러 개의 렌즈가 병렬로 동작하여 여러 사진을 동시에 찍을 수 있습니다. 한 렌즈에서 사진을 찍을 때까지 다른 렌즈에서는 독립적으로 작업을 수행할 수 있습니다. 이렇게 하면 여러 작업이 동시에 이뤄질 수 있습니다.

이전에 참여했던 프로젝트에서는 대표적으로 Celery라는 분산 작업 큐를 위한 분산 시스템을 구현하는 라이브러리를 사용하여 이메일 인증과 비밀번호 찾기 기능을 구현했습니다.

  • 분산 작업 큐에 대한 질문이 이어질 경우
    분산 작업 큐는 작업을 비동기적으로 처리하기 위한 분산 시스템의 일종으로 이메일 발송, 데이터 처리, 이미지 변환 등의 처리해야할 작업을 큐라는 대기 공간에 추가하여, 브로커라는 중개자를 통해 작업 소비자가 큐에서 작업을 가져와 처리합니다.

0개의 댓글