[Javascript] 비동기

Hyoddin·2024년 5월 15일

Javascript

목록 보기

5/8

동기와 비동기

동기

javascript는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만을 수행합니다.
즉, 이전 작업이 완료되어야 다음 작업을 수행할 수 있습니다.
프로그래밍을 하면서 일반적으로 각 함수와 코드들이 위에서 아래로 차례로 동작하는 방식인 코드 순차 실행을 동기(Synchronous)라고 부릅니다.

특징

직렬적으로 작업을 수행합니다.
간단하고 직관적입니다.
작업이 오래 걸리거나 응답이 늦어지는 경우, 전체적인 성능과 사용자 경험에 영향을 줄 수 있습니다.
ex) 서버에 데이터를 요청하고 응답을 받아야 하는 직업이 있다면, 응답이 올 때까지 다른 작업을 하지 못하고 대기해야 합니다.

비동기

등장 배경

javascript로 여러 작업을 동시에 처리하기 위해 비동기(Asynchronous)라는 개념을 도입합니다.
특정 작업의 완료를 기다리지 않고 다른 작업을 동시에 수행할 수 있습니다.

특징

1️⃣ 병렬적 작업 처리

2️⃣ 비동기 처리의 유용성

웹 애플리케이션에서 데이터베이스 쿼리를 수행하는 작업을 동기적, 비동기적으로 수행한다고 가정합니다.
동기적으로 수행하면, 데이터베이스에서 응답이 올 때까지 기다리며 다른 요청은 처리하지 못해, 대규모 트래픽이 발생할 경우 웹 애플리케이션 성능이 저하됩니다.
비동기적으로 수행하면, 데이터베이스에서 응답이 올 때까지 기다리는 동안에도 다른 요청을 처리할 수 있습니다.
즉, 자원을 효율적으로 사용할 수 있습니다.

병렬 처리 원리

자바스크립트를 실행하는 call stack은 싱글 스레드입니다.
하지만, 서버에게 리소스를 요청하거나 파일 입출력 혹은 타이머 대기 작업을 실행하는 Web APIs는 멀티 스레드입니다.
즉, 브라우저라는 소프트웨어가 멀티 스레드이기 때문에 동시 처리가 가능한 것입니다.

Example

// 1️⃣
setTimeout(() => {
	console.log('5초 대기 완료')
}, 3000);

// 2️⃣
Task1();
Task2();
Task3();

1️⃣ setTimeout() : 비동기 함수
setTimeout 함수 코드가 Web APIs 중 타이머 처리를 담당하는 Timer API에 넘어가 처리합니다.

2️⃣ main Call Stack 처리
1️⃣이 Timer API에서 처리되는 동안, 메인 Call stack에서는 Task1, Task2, Task3 를 처리합니다.

비동기 처리의 문제점

이전 요청 작업의 결과가 반드시 필요한 경우

function getDB() {
    let data;
    // 1️⃣
    setTimeout(() => {
        data = 100;
    }, 3000);

    return data;
}

function main() {
    let value = getDB();
    value *= 2;
    console.log('value의 값 : ', value);
}
main();