자바스크립트 JSONP를 이용하여 외부 서버와 자바스크립트 파일을 동적으로 불러오는 방법

10 Sep 2023

javascript

지금까지 자바스크립트는 동일 출처 정책(Same Origin Policy) 때문에 외부 서버로부터 자원을 불러올 때 제약을 받았습니다. 그러나 자바스크립트 JSONP(JSON with Padding)를 사용하면 이러한 제약을 우회하고 외부 서버와 자바스크립트 파일을 동적으로 불러올 수 있습니다.

JSONP 작동 방식

JSONP는 동적으로 스크립트 태그를 생성하여 외부 서버로 요청을 보내는 방식입니다. 이 요청은 JSONP 콜백 함수를 포함하여 외부 서버의 응답을 받습니다. 외부 서버는 해당 콜백 함수를 호출하여 필요한 데이터를 전달하게 됩니다. 이를 통해 동일 출처 정책 제약을 우회하고 데이터를 가져올 수 있습니다.

JSONP 사용 예제

// JSONP 요청 함수 정의
function jsonpRequest(url, callback) {
  // 콜백 함수의 이름을 생성합니다.
  const callbackName = `jsonpCallback_${Math.floor(Math.random() * 10000)}`;

  // 콜백 함수를 전역 범위로 만들어 원격 서버에서 접근할 수 있도록 합니다.
  window[callbackName] = function (data) {
    // 콜백 함수 실행 후, 사용자 정의 콜백 함수 호출합니다.
    callback(data);

    // 사용이 완료된 콜백 함수를 제거합니다.
    delete window[callbackName];
  };

  // JSONP 요청을 위한 스크립트 태그를 동적으로 생성합니다.
  const script = document.createElement('script');
  script.src = `${url}?callback=${callbackName}`;
  document.body.appendChild(script);
}

// JSONP 요청 예제
jsonpRequest('https://api.example.com/data', function (data) {
  console.log('데이터:', data);
});

위의 예제에서 jsonpRequest 함수는 JSONP 요청을 보내는 역할을 합니다. 요청 시 외부 서버로부터 받은 데이터를 전달받은 콜백 함수를 호출하여 사용자가 원하는 처리를 수행합니다.

이제 이 예제 코드를 참고하여 자바스크립트 JSONP를 사용하여 외부 서버와 동적으로 자바스크립트 파일을 불러와 웹 애플리케이션을 더 확장 가능하고 유연하게 만들 수 있습니다.