[Javascript]자바스크립트 Async 완벽 가이드: 비동기 프로그래밍의 모든 것

자바스크립트에서 비동기 프로그래밍은 매우 중요한 개념입니다. 특히, 네트워크 요청, 파일 읽기/쓰기 등 시간이 오래 걸리는 작업을 처리할 때 효율적입니다. 이번 포스팅에서는 자바스크립트에서 Async와 비동기 프로그래밍을 쉽게 이해하고 활용할 수 있도록 도와드리겠습니다.

≣ 목차

• 소개📚
• 기본 개념 및 키워드🌟
• Async/Await 기본 사용법🛠️
• 실제 사용 사례📈
• 에러 처리 방법🔧
• 최적화 및 성능 향상 팁🚀

---

01. 소개📚

자바스크립트는 단일 스레드 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 그런데 네트워크 요청이나 파일 읽기/쓰기 같은 작업은 시간이 오래 걸리기 때문에, 이런 작업을 할 때는 다른 작업을 멈추지 않고 동시에 처리할 수 있도록 비동기 프로그래밍이 필요합니다. Async는 이런 비동기 프로그래밍을 쉽게 할 수 있게 도와줍니다.

---

02. 기본 개념 및 키워드🌟

자바스크립트 비동기 프로그래밍은 동기적인 방식으로 처리하기 어려운 작업을 효율적으로 처리할 수 있게 해 줍니다. 이는 특히 I/O 작업, 네트워크 요청, 타이머 등 시간이 걸리는 작업에서 유용합니다. 자바스크립트의 비동기 프로그래밍을 이해하기 위해 알아야 할 기본 개념 및 키워드는 다음과 같습니다. 콜백 함수는 다른 함수에 인수로 전달되어 특정 작업이 완료된 후 호출되는 함수입니다. 비동기 작업의 결과를 처리하기 위해 사용됩니다.

1. 콜백 함수 (Callback Function)

function fetchData(callback) {
    setTimeout(() => {
        callback('Data loaded');
    }, 1000);
}

fetchData((data) => {
    console.log(data);  // 'Data loaded'
});

2. 프로미스 (Promise)

프로미스는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. .then()과 .catch() 메서드를 사용하여 비동기 작업의 결과를 처리할 수 있습니다.

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Data loaded');
    }, 1000);
});

promise.then((data) => {
    console.log(data);  // 'Data loaded'
}).catch((error) => {
    console.error(error);
});

3. async/await

async 함수는 프로미스를 반환하며, await 키워드는 프로미스가 해결될 때까지 함수 실행을 일시 중지합니다. 이를 통해 비동기 코드를 더 읽기 쉽게 작성할 수 있습니다.

async function fetchData() {
    const data = await new Promise((resolve) => {
        setTimeout(() => {
            resolve('Data loaded');
        }, 1000);
    });
    console.log(data);  // 'Data loaded'
}

fetchData();

4. 이벤트 루프 (Event Loop)

이벤트 루프는 자바스크립트 런타임이 비동기 작업을 관리하고 실행 순서를 제어하는 메커니즘입니다. 이벤트 루프는 콜 스택(Call Stack), 힙(Heap), 태스크 큐(Task Queue) 등의 구성 요소를 사용하여 비동기 작업을 처리합니다.

주요 구성 요소

1. 콜 스택 (Call Stack)

• 함수 호출이 쌓이는 곳입니다.
• 자바스크립트 엔진은 콜 스택의 맨 위에 있는 함수부터 실행합니다.
• 함수가 실행을 마치면 스택에서 제거됩니다.

2. 힙 (Heap)

• 동적으로 생성된 객체들이 저장되는 메모리 영역입니다.

3. 태스크 큐 (Task Queue)

• 비동기 작업의 콜백 함수가 대기하는 큐입니다.
• 타이머, 네트워크 요청, 이벤트 리스너 등 비동기 작업이 완료되면 해당 콜백이 태스크 큐에 추가됩니다.

4. 마이크로태스크 큐 (Microtask Queue)

• 프로미스의 .then() 콜백과 같은 마이크로태스크들이 대기하는 큐입니다.
• 태스크 큐보다 우선순위가 높습니다.

이벤트 루프의 동작 방식

이벤트 루프는 다음과 같은 단계를 반복하면서 동작합니다:

1. 콜 스택의 작업 실행

• 콜 스택이 비어 있지 않은 동안 스택의 맨 위에 있는 작업을 실행합니다.
• 함수 호출이 완료되면 콜 스택에서 제거됩니다.

2. 마이크로태스크 처리

• 콜 스택이 비어 있을 때 마이크로태스크 큐의 모든 작업을 처리합니다.
• 이때 각 마이크로태스크는 순서대로 실행되며, 마이크로태스크 큐가 비어 있을 때까지 반복됩니다.

3. 태스크 큐 처리

• 콜 스택과 마이크로태스크 큐가 비어 있으면 태스크 큐의 작업을 하나씩 콜 스택으로 이동시켜 실행합니다.

예시

아래는 이벤트 루프의 동작 방식을 보여주는 간단한 예시입니다.

console.log('Start');

setTimeout(() => {
    console.log('Timeout 1');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise 1');
});

setTimeout(() => {
    console.log('Timeout 2');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise 2');
});

console.log('End');

위 코드를 실행하면 다음과 같은 순서로 출력됩니다.

Start
End
Promise 1
Promise 2
Timeout 1
Timeout 2

이유

1. 콜 스택: console.log('Start')와 console.log('End')가 콜 스택에서 바로 실행됩니다.
2. 마이크로태스크 큐: Promise.resolve().then()의 콜백이 마이크로태스크 큐에 추가됩니다.
3. 태스크 큐: setTimeout의 콜백이 태스크 큐에 추가됩니다.
4. 콜 스택이 비어있을 때 마이크로태스크 큐의 Promise 콜백들이 실행됩니다.
5. 이후 태스크 큐의 setTimeout 콜백들이 실행됩니다.

이와 같이 이벤트 루프는 비동기 작업을 관리하고 순차적으로 실행하여 자바스크립트의 동시성을 구현합니다.

5. 마이크로태스크와 매크로태스크 (Microtasks and Macrotasks)

비동기 작업은 마이크로태스크 큐 또는 매크로태스크 큐에 들어갑니다. Promise의. then()은 마이크로태스크로 처리되며, setTimeout과 같은 타이머 함수는 매크로태스크로 처리됩니다.

console.log('Start');

setTimeout(() => {
    console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise');
});

console.log('End');

위 코드의 출력은 Start, End, Promise, Timeout 순으로 나타납니다. 이는 마이크로태스크가 매크로태스크보다 먼저 실행되기 때문입니다.

---

03. Async/Await 기본 사용법🛠️

Async/Await는 Promise 기반의 비동기 코드를 더 간단하고 직관적으로 작성할 수 있게 해 줍니다. 기본 문법은 다음과 같습니다.

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

• async: 함수 앞에 붙여서 이 함수가 비동기 함수를 나타내도록 합니다.
• await: Promise가 해결될 때까지 함수의 실행을 일시 중지합니다.

---

04. 실제 사용 사례📈

비동기 프로그래밍은 주로 API 호출이나 파일 읽기/쓰기 작업에 사용됩니다. 예를 들어, API 호출을 통해 데이터를 가져오는 코드를 보겠습니다.

async function getUserData() {
    try {
        let response = await fetch('https://api.example.com/user');
        let user = await response.json();
        console.log(user);
    } catch (error) {
        console.error('Failed to fetch user data:', error);
    }
}

이 코드에서 fetch 함수는 네트워크 요청을 보내고, await 키워드를 사용하여 응답이 올 때까지 기다립니다.

---

05. 에러 처리 방법🔧

Async/Await를 사용할 때는 try/catch 블록을 사용하여 에러를 처리할 수 있습니다. 예를 들어

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

이렇게 하면 fetch 또는 response.json()에서 에러가 발생했을 때 catch 블록에서 에러를 처리할 수 있습니다.

---

06. 최적화 및 성능 향상 팁🚀

자바스크립트에서 비동기 함수를 최적화하고 성능을 향상시키기 위한 여러 가지 방법이 있습니다. 이들 방법을 통해 비동기 작업의 효율성을 높이고, 애플리케이션의 전반적인 성능을 개선할 수 있습니다. 비동기 작업을 병렬로 실행하면 성능을 크게 향상할 수 있습니다. 예를 들어, Promise.all을 사용하여 여러 비동기 작업을 동시에 실행하고, 모든 작업이 완료될 때까지 기다릴 수 있습니다.

1. 병렬 처리

비동기 작업을 병렬로 실행하면 성능을 크게 향상시킬 수 있습니다. 예를 들어, Promise.all을 사용하여 여러 비동기 작업을 동시에 실행하고, 모든 작업이 완료될 때까지 기다릴 수 있습니다.

async function fetchAllData(urls) {
    const promises = urls.map(url => fetch(url).then(response => response.json()));
    const results = await Promise.all(promises);
    return results;
}

2. 레이지 로딩 (Lazy Loading)

필요한 시점에 데이터를 비동기적으로 로딩하는 레이지 로딩을 통해 초기 로딩 시간을 줄일 수 있습니다. 이를 통해 불필요한 데이터를 미리 로드하지 않음으로써 성능을 최적화할 수 있습니다.

function lazyLoadData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Data loaded');
        }, 1000);
    });
}

// 사용자가 특정 동작을 수행했을 때 데이터 로드
document.getElementById('loadButton').addEventListener('click', async () => {
    const data = await lazyLoadData();
    console.log(data);
});

3. 쓰로틀링 및 디바운싱 (Throttling and Debouncing)

자주 호출되는 비동기 작업 (예: 스크롤 이벤트, 입력 필드의 변경 이벤트)을 최적화하기 위해 쓰로틀링과 디바운싱 기법을 사용할 수 있습니다.

• 쓰로틀링 (Throttling): 일정 시간 간격으로만 함수를 실행합니다.
• 디바운싱 (Debouncing): 일정 시간 동안 이벤트가 발생하지 않을 때 함수를 실행합니다.

// 디바운스 함수
function debounce(func, delay) {
    let timeoutId;
    return (...args) => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func(...args);
        }, delay);
    };
}

// 쓰로틀 함수
function throttle(func, delay) {
    let lastCall = 0;
    return (...args) => {
        const now = new Date().getTime();
        if (now - lastCall < delay) {
            return;
        }
        lastCall = now;
        func(...args);
    };
}

// 예시: 스크롤 이벤트에 쓰로틀 적용
window.addEventListener('scroll', throttle(() => {
    console.log('Scrolled');
}, 200));

// 예시: 입력 필드에 디바운스 적용
document.getElementById('inputField').addEventListener('input', debounce((event) => {
    console.log('Input:', event.target.value);
}, 300));

4. 서비스 워커 (Service Worker)

서비스 워커를 사용하여 백그라운드에서 비동기 작업을 처리하고, 네트워크 요청을 캐시 할 수 있습니다. 이를 통해 네트워크 요청의 빈도를 줄이고, 오프라인에서도 앱이 동작할 수 있게 합니다.

// 서비스 워커 등록
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
        console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
        console.error('Service Worker registration failed:', error);
    });
}

5. 효율적인 데이터 페칭 (Efficient Data Fetching)

데이터를 효율적으로 페칭하여 네트워크 요청을 최소화합니다. 예를 들어, 데이터가 자주 변경되지 않는 경우에는 캐싱을 활용하거나, 서버로부터 필요한 데이터만 페칭 합니다.

// 데이터 캐싱 예시
let cache = {};

async function fetchDataWithCache(url) {
    if (cache[url]) {
        return cache[url];
    }
    const response = await fetch(url);
    const data = await response.json();
    cache[url] = data;
    return data;
}

6. 웹 워커 (Web Worker)

웹 워커를 사용하여 메인 스레드와 별개로 무거운 작업을 비동기적으로 처리할 수 있습니다. 이를 통해 메인 스레드가 블로킹되지 않고, UI가 부드럽게 동작합니다.

// 웹 워커 파일 (worker.js)
self.addEventListener('message', event => {
    const result = performHeavyComputation(event.data);
    self.postMessage(result);
});

// 메인 스크립트
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.addEventListener('message', event => {
    console.log('Result from worker:', event.data);
});