열세 번째 문제: Promise를 사용한 비동기 체이닝 (JS 개념 심화 2)

요구사항 및 힌트

Promise 반환 함수 정의:
- delayLog라는 함수를 정의합니다. 이 함수는 message와 delayTime을 인수로 받습니다.
- 이 함수는 즉시 새로운 Promise 객체를 반환해야 합니다. (힌트: return new Promise((resolve, reject) => { ... }))
비동기 작업 및 성공:
- Promise 생성자 내부에서 setTimeout을 사용하여 delayTime 후에 실행되도록 합니다.
- 타이머가 만료되면, Promise를 성공 상태로 만듭니다. (힌트: resolve(message) 호출)
Promise 체이닝:
- delayLog 함수를 두 번 연속으로 호출하고 **.then()**으로 연결하여, 첫 번째 작업이 완료된 후 두 번째 작업이 실행되도록 순서를 보장합니다.
  - 첫 번째: "첫 번째 작업 완료!" 메시지, 1000ms 지연.
  - 두 번째: "두 번째 작업도 완료!" 메시지, 1500ms 지연.
최종 완료:
- 마지막 .then()에서는 "모든 비동기 작업 종료."를 콘솔에 출력합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function delayLog(message,delayTime) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(message);
                }, delayTime);
            })
        }

        console.log("작업 시작.....");
        delayLog("첫 번째 작업 완료!",1000)
            .then((result1) => {
                console.log(result1);
                return delayLog("두번째 작업도 완료!", 1500);
            })
            .then((result2) => {
                console.log(result2);
                console.log("모든 비동기 작업 종료.");
            })
    </script>
</body>
</html>

저작자표시 비영리 동일조건 (새창열림)

'w. Gemini' 카테고리의 다른 글

4xx 비율 상승 및 트래픽 급증 분석 (0)	2025.11.06
연습 문제 1: 간단한 To-Do 리스트 구현 (0)	2025.11.05
열두 번째 문제: 비동기 작업 시뮬레이션 및 콜백 함수 이해 (0)	2025.10.27
열한 번째 문제: 배열 및 함수를 활용한 장바구니 계산기 (0)	2025.10.27
열 번째 문제: To-Do List 앱 만들기 (0)	2025.10.27

요구사항 및 힌트

'w. Gemini' 카테고리의 다른 글

티스토리툴바