열두 번째 문제: 비동기 작업 시뮬레이션 및 콜백 함수 이해

요구사항

비동기 함수 정의:
- processData라는 함수를 정의합니다.
- 이 함수는 두 개의 인수를 받습니다:
  1. data (처리할 임의의 데이터 문자열)
  2. callback (데이터 처리가 완료된 후 실행될 함수)
비동기 작업 시뮬레이션:
- processData 함수 내에서 setTimeout 타이머 함수를 사용합니다.
- 타이머는 2초 (2000ms) 후 작동하도록 설정합니다. (비동기 작업이 오래 걸리는 상황을 시뮬레이션)
데이터 처리 및 콜백 실행:
- 2초가 지난 후, 콜백 함수를 실행하기 전에 data 문자열 뒤에 "- 처리 완료됨"이라는 텍스트를 붙여 새로운 결과 문자열을 만듭니다.
- 이 결과 문자열을 callback 함수의 인수로 전달하며 호출합니다.
사용 및 출력:
- handleResult라는 별도의 콜백 함수를 정의합니다. 이 함수는 인수를 받아 콘솔에 출력하는 역할만 합니다.
- processData 함수를 호출할 때, 임의의 문자열 데이터와 handleResult 함수를 인수로 전달하여 실행합니다.

<!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 processData(data, callback) {
            setTimeout(() => {
                const result = data + "- 처리 완료됨";

                callback(result);
            }, 2000)
        }

        function handleResult (processdData) {
            console.log("콜백 함수 실행됨 : " + processdData);
            console.log("-> 비동기 처리가 끝난 후 실행됩니다.");
        }

        console.log("작업 시작....");

        processData("입력된 오리지널 데이터", handleResult);
        console.log("메인 코드 끝. (2초 후 콜백이 실행됨)");
    </script>
</body>
</html>

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

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

연습 문제 1: 간단한 To-Do 리스트 구현 (0)	2025.11.05
열세 번째 문제: Promise를 사용한 비동기 체이닝 (JS 개념 심화 2) (0)	2025.10.31
열한 번째 문제: 배열 및 함수를 활용한 장바구니 계산기 (0)	2025.10.27
열 번째 문제: To-Do List 앱 만들기 (0)	2025.10.27
아홉 번째 문제: Light/Dark 모드 토글 버튼 만들기 (0)	2025.10.27

요구사항

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

티스토리툴바