나의 React 여정: 12일차

콜백과 프라미스 연습

오늘 저는 JavaScript 비동기 프로그래밍의 기본 개념인 콜백과 약속에 대한 이해를 심화하기 위한 도전에 나섰습니다. 진행 상황은 다음과 같습니다.

챌린지 1: 콜백 - 이벤트 등록 시뮬레이션

시나리오:
다음과 같은 이벤트 등록 시스템을 시뮬레이션했습니다.

• 사용자가 이벤트에 등록하려고 합니다.
• 시스템에서 사용 가능한 슬롯이 있는지 확인합니다.
• 성공 또는 실패는 콜백을 통해 전달됩니다.

코드 구현

// Event Data
const event = {
    name: "React Masterclass",
    maxSlots: 5,
    currentRegistration: 3,
};

// Registration Function
function registerForEvent(event, user, successCallback, errorCallback) {
    console.log(`Registration of ${user} in progress...`);
    setTimeout(() => {
        if (event.currentRegistration < event.maxSlots) {
            event.currentRegistration++;
            successCallback(`Congratulations, ${user}. You have been registered for ${event.name}`);
        } else {
            errorCallback(`Sorry ${user}. The event space ${event.name} is fully booked`);
        }
    }, 2000); // Simulating 2-second delay
}

// Callbacks
function onSuccess(message) {
    console.log("Success:", message);
}

function onError(error) {
    console.log("Error:", error);
}

// Simulate Registration
registerForEvent(event, "Damilare", onSuccess, onError);

출력:

• 자리가 있는 경우: 성공: 축하합니다, Damilare. React에 등록되었습니다 마스터클래스.
• 슬롯이 꽉 찬 경우: 오류: 죄송해요 다밀라레. 이벤트 공간 리액트 마스터클래스는 예약이 꽉 찼습니다.

반성:
이 과제에서는 콜백이 지연 처리 및 결과 관리와 같은 비동기 작업을 처리하는 방법을 강조했습니다.

챌린지 2: 약속 - 지연된 환영 메시지

시나리오:
Promise를 사용하여 지정된 지연 후 환영 메시지를 반환하는 함수를 만듭니다.

코드 구현

// Promise Function
function delayedWelcomeMessage(message, delay) {
    return new Promise((resolve, reject) => {
        if (delay <= 0) {
            reject("Delay must be greater than 0 milliseconds");
        } else {
            setTimeout(() => {
                resolve(message);
            }, delay);
        }
    });
}

// Valid Delay
delayedWelcomeMessage("Welcome to the world of promises", 3000)
  .then((message) => console.log("SUCCESS:", message))
  .catch((error) => console.error("ERROR:", error));

// Invalid Delay
delayedWelcomeMessage("This will fail.", 0)
  .then((message) => console.log("SUCCESS:", message))
  .catch((error) => console.error("ERROR:", error));

출력:

• 유효한 지연의 경우:
  3초 후:
  성공: 약속의 세계에 오신 것을 환영합니다

• 잘못된 지연(예: 0)의 경우:
  오류: 지연은 0밀리초보다 커야 합니다

반성:
이 연습에서는 특히 여러 단계를 처리할 때 Promise가 콜백보다 가독성을 향상시키고 비동기 흐름을 더 잘 관리하는 방법을 강화했습니다.

테이크아웃:
콜백: 간단한 비동기 작업을 관리하는 데 유용하지만 중첩으로 인해 지저분해질 수 있습니다(콜백 지옥).
약속: 비동기 작업 처리에 대한 더 명확하고 확장 가능한 접근 방식을 제공합니다.
이러한 과제를 실제 시나리오(예: 이벤트 등록)와 결합하여 개념을 더욱 관련성이 높고 재미있게 연습할 수 있게 되었습니다.

기대됩니다!

위 내용은 나의 React 여정: 12일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!