JavaScript 기초: 비동기 처리와 프로미스

JavaScript 기초: 비동기 처리와 프로미스

이번 포스팅에서는 JavaScript의 비동기 처리와 프로미스(Promise)에 대해 알아보겠습니다. 비동기 처리는 긴 작업(예: 서버 요청)을 실행하는 동안 다른 작업을 차단하지 않도록 하는 방식입니다.

1. 비동기 처리란?

비동기 처리는 긴 작업(예: 파일 읽기, 서버 요청 등)이 완료될 때까지 기다리지 않고, 다음 작업을 계속 실행합니다. JavaScript는 비동기 처리를 지원하기 위해 콜백, 프로미스, 그리고 async/await를 제공합니다.

2. 프로미스(Promise)

2.1 프로미스 기본

프로미스는 비동기 작업이 완료되었을 때 결과를 나타내는 객체입니다. 프로미스는 다음 중 하나의 상태를 가질 수 있습니다:

• 대기 중(Pending): 작업이 아직 완료되지 않은 상태
• 성공(Fulfilled): 작업이 성공적으로 완료된 상태
• 실패(Rejected): 작업이 실패한 상태

// 프로미스 생성 예제
const promise = new Promise((resolve, reject) => {
    let success = true; // 작업 성공 여부
    if (success) {
        resolve("작업 성공!");
    } else {
        reject("작업 실패!");
    }
});

promise
    .then(result => {
        console.log(result); // "작업 성공!"
    })
    .catch(error => {
        console.error(error); // "작업 실패!"
    });
    

2.2 fetch와 프로미스

fetch는 네트워크 요청을 보내기 위해 사용되며, 프로미스를 반환합니다.

fetch("https://api.example.com/data")
    .then(response => response.json()) // 응답을 JSON으로 변환
    .then(data => {
        console.log(data); // 변환된 데이터 출력
    })
    .catch(error => {
        console.error("오류 발생:", error);
    });
    

3. 실습 예제

실습 과제

1. 2초 후에 "비동기 작업 완료!"를 출력하는 프로미스를 생성하고, 이를 실행하는 코드를 작성하세요.

정답 확인 👇

// 실습 1: 2초 후 메시지 출력
const delayedPromise = new Promise((resolve) => {
    setTimeout(() => {
        resolve("비동기 작업 완료!");
    }, 2000);
});

delayedPromise.then(message => {
    console.log(message); // "비동기 작업 완료!"
});

            

이번 포스팅에서는 비동기 처리와 프로미스에 대해 알아보았습니다. 다음에는 async/await를 활용한 비동기 처리에 대해 알아보겠습니다!