DOM 조작을 통한 동적 JSONP 구현의 핵심 패턴입니다. 동적 Script 태그 생성 과정: 1단계: 요소 생성 ```javascript let s = document.createElement("script"); // 태그 생성 ``` 2단계: 속성 설정 ```javascript s.src = "demo_jsonp.php?callback=myDisplayFunction"; // ``` 3단계: DOM에 추가 ```javascript document.body.appendChild(s); // HTML 문서의 body에 script 태그 삽입 ``` 전체 동작 흐름: 1. 버튼 클릭 → `clickButton()` 실행 2. Script 태그 동적 생성 및 DOM 추가 3. 브라우저가 `demo_jsonp.php?callback=myDisplayFunction` 요청 4. 서버가 `myDisplayFunction({...})` 형태로 응답 5. 함수가 자동 실행되어 데이터 처리 서버 응답 예시: ```php // PHP 파일 (demo_jsonp.php) $callback = $_GET['callback']; // "myDisplayFunction" $data = '{"name":"John", "age":30}'; echo $callback . "(" . $data . ");"; // 결과: myDisplayFunction({"name":"John", "age":30}); ``` 다른 옵션들이 틀린 이유: • `createNode`, `makeElement`, `newElement`: 존재하지 않는 메서드 • `href`: 링크용 속성, script에는 `src` 사용 • `addChild`, `insertChild`, `appendNode`: 존재하지 않는 메서드 현대적 대안: ```javascript // Fetch API with CORS fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)); ``` JSONP는 과거 cross-domain 문제 해결을 위한 방법이었지만, 현재는 CORS(Cross-Origin Resource Sharing)가 더 안전하고 표준적인 해결책입니다.