자바스크립트 비동기처리에 대해서 알아보기전에 비동기 포그래밍의 대해서알아야합니다. 웹 애플리케이션의 성능과 ux를 향상시키는 아주중요한 기술인데요. 오늘은 이글을 통해서 자바스크립트의 비동기처리의 개념과 중요성과 주요 기법들을 알아보겠습니다.
비동기처리란?
비동기처리란 코드가 실행되는 동안 다른 작업을 동시에 수행할 수 있게 하는 프로그래밍 방식입니다. 이는 동기처리와는달리, 각 작업이 완료될 때까지 대기하지 않고 다른 작업을 계속해서 진행할 수 있습니다.
동기처리에서는 순차적으로 실행되고, 하나의 작업이 완료될때까지 다음 작업이 대기하지만, 비동기처리에서는 작업이 동시에 실행되어 긴 작업을 요하는 작업들을 할때 사용되며 방해하지 않습니다.
비동기처리의 중요성
비동기처리는 여러면에서 웹 애플리케이션의 성능과 사용자 경험을 향상시키는데요. 아래의 내용을 참고하세요.
- 응답성 개선 : 사용자가 웹 페이지와 상호작용할 때 긴 작업이 완료될 때가지 기다릴 필요가 없이 즉각적인응답성을 제공합니다.
- 성능 최적화: 네트워크 요청이나 파일 읽기와 같은시간이 오래걸리는 작업을 비동기적으로 처리할면, 애플리케이션 전반적인 성능이 향상됩니다.
- 자원 효율성: 비동기 처리는 시스템 자원을 더 효율적으로 사용되고, 서버와 클라이언트모두에서 자원낭비를 줄입니다.
자바스크립트 비동기처리 기법
자바스크립트에서는 다양한 비동기처리 기법을 지원하는데요. 모두를 알수 없으니 가장 대표적인것들을 가져와보았습니다. 대표적인 콜백함수, 프로미스, async/await가 있습니다.
콜백함수
콜백함수는 비동기 작업이 완료된 후 호출되는 함수입니다. 이 함수는 자바스크립트에서 가장기본적인 비동기 방처리방식입니다.
function fetchData(callback) {
setTimeout(() => {
const data = "Hello, World!";
callback(data);
}, 1000);
}
function handleData(data) {
console.log(data);
}
fetchData(handleData);
위의 예제에서 fetchData함수는 1초후에 데이터를 받아서 콜백함수를 호출합니다. handleData함수는 콜백으로 전달되어 데이터를 출력합니다.
프로미스(promise)
프로미스는 비동기 작업의 결과를 나타내는 객체인데요. 프로미스는 세가지의 상태를 가질 수 있습니다. 대기(pending), 이행(Fulfilled), 거부(Rejected)입니다.
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = "Hello, World!";
resolve(data);
}, 1000);
});
}
fetchData()
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
위의 예제에서 fetchData함수는 1초후에 데이터를 반환한느 프로미스를 리턴합니다. then메서드는 프로ㄱ미스가 이행되었을때 호출되고, catch메서드는 프로미스가 거부되었을 때 호출됩니다.
async/await
async/await는 프로미스를 기반으로 한 비동기 코드 작성방법입니다. 이는 비동기 코드를 마치 동기코드처럼 읽기 쉽게 작성할 수 있게도와줍니다.
async function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = "Hello, World!";
resolve(data);
}, 1000);
});
}
async function main() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error(error);
}
}
main();
위 예제는 fetchData함수는 프로미스를 반환한다음에 main함수는 await키워드를사용해서 프로미스가 이행될 때까지 기다립니다. 이는 비동기 코드를 더 직관적으로 작성할 수 있게 합니다.
비동기 처리의 추가 기법들
비동기처리를 더욱 효율적으로 하귀위해서는 자바스크립트의 추가적인 기법들이 필요합니다. 아래의 기법들을 참고하세요.
Event Loop
자바스크립트의 이벤트 루프는 비동기 작업의 핵심인데요. 이벤트 루프는 콜백 큐에서 대기중인 작업을 호출 스택이 비어있을 때 실행합니다. 이는 자바스크립트가 단일 스레드 언어임에도 불구하고 비동기작업을 횽류적으로 처리할 수 있게 합니다.
비동기 이터레이션
비동기 이터레이션은 for await … of 구문을 통해서 비동기 반복 작업을 수행할 수 있습니다.
async function processItems(items) {
for await (const item of items) {
console.log(item);
}
}
const asyncIterable = {
[Symbol.asyncIterator]() {
return {
i: 0,
next() {
if (this.i < 3) {
return Promise.resolve({ value: this.i++, done: false });
}
return Promise.resolve({ value: undefined, done: true });
}
};
}
};
processItems(asyncIterable);
위 예제는 processItem함수는 비동기 이터러블 객체를 처리하고, 각 항목을 출력합니다.
결론
자바스크립의 비동기처리는 웹 애플리케이션의 성능과 사용자 경험을 크게 향상시킵니다. 콜백함수, 프로미스, async/await와 같은 기능을 통해서 비동기 작업을 효과적으로 관리할 수 있습니다. 이런 비동기 기법들을 잘 활용한다면 더나은 웹애플리케이션을 개발할 수 있습니다.
