JSONP(JSON with Padding)는 웹 사이트가 다른 도메인에 있는 데이터를 요청할 때 사용하는 사용하는 방법입니다. 일반적으로 동일한 출처 정책(Same Origin Policy)으로 인해 서로 다른 도메인 간의 데이터 요청이 막히지만, JSONP를 사용하면 이 제약을 우회할 수 있습니다.

이 기법은 <script> 태그를 사용하여 데이터를 요청하고, 응답으로 받은 데이터를 자바스크립트 함수 호출로 래핑하는 방식입니다. 따라서 JSONP를 사용하려면 서버 측에서 해당 콜백 함수를 제공해야 합니다.

JSONP 요청 예시

$.ajax({
    url: 'https://example.com/data',
    dataType: 'jsonp',
    success: function(data) {
        // 데이터 처리
    }
});

위 예시에서 dataType을 ‘jsonp’로 설정하면 jQuery는 GET 요청을 해서 응답을 콜백 함수로 래핑하여 처리합니다.

멀티도메인 요청

멀티도메인 요청은 여러 다른 도메인에 대해 JSONP를 사용해 데이터를 요청하는 것을 의미합니다. 일반적으로는 여러 개의 <script> 태그를 동적으로 생성하여 처리하게 됩니다.

아래는 간단한 예시입니다.

function getMultipleData() {
    var url1 = 'https://example1.com/data';
    var url2 = 'https://example2.com/data';

    var script1 = document.createElement('script');
    script1.src = url1;
    document.body.appendChild(script1);

    var script2 = document.createElement('script');
    script2.src = url2;
    document.body.appendChild(script2);
}

멀티도메인 요청을 할 때는 서버 측에서 각 요청에 대해 적절한 콜백 함수를 반환해야 합니다.

이렇게 JSONP와 멀티도메인 요청을 사용하면 다른 도메인 간에도 데이터 요청이 가능해지므로, 웹 개발 시에 다양한 데이터를 활용할 수 있습니다.

참고 자료:

• jQuery 공식 문서
• MDN 웹 문서