개요

JSONP(Javascript Object Notation with Padding)는 웹 개발에서 주로 사용되는 기술 중 하나로, 동일 출처 정책(Same-Origin Policy)에 제한받지 않고 다른 도메인의 자원을 요청하는 방법입니다. 이를 이용하면 외부 서버의 자바스크립트 파일을 동적으로 불러와서 사용할 수 있습니다. 이번 포스트에서는 JSONP를 사용하여 외부 서버와 자바스크립트 파일을 동적으로 불러오는 방법에 대해 알아보겠습니다.

JSONP의 동작 원리

JSONP는 스크립트 태그를 이용하여 외부 서버의 자바스크립트 파일을 가져오는 방식입니다. 일반적으로 AJAX(XMLHttpRequest)를 이용해 외부 서버의 데이터를 가져오는 경우, 동일 출처 정책으로 인해 요청이 허용되지 않습니다. 하지만 JSONP는 스크립트 태그를 사용하므로 동일 출처 정책을 우회할 수 있습니다.

JSONP는 서버 측에서 콜백 함수를 이용하여 응답 데이터를 전달하는 방식입니다. 클라이언트는 동적으로 생성한 스크립트 태그를 추가하고, 콜백 함수 이름을 매개변수로 URL에 포함시켜 요청을 보냅니다. 서버는 이 콜백 함수를 사용하여 응답 데이터를 감싸서 반환하게 됩니다. 클라이언트는 스크립트 파일을 다운로드하면서 동시에 응답 데이터를 콜백 함수로 전달받아 처리할 수 있습니다.

예시 코드

다음은 간단한 예시 코드입니다. 외부 서버에서 현재 시간을 JSON 형식으로 전달하고, 이를 클라이언트에서 받아와 출력하는 예제입니다.

// 클라이언트 부분
function handleResponse(data) {
  console.log('현재 시간:', data);
}

function loadScript(url) {
  var script = document.createElement('script');
  script.src = url;
  document.head.appendChild(script);
}

// 외부 서버에서 현재 시간을 JSON 형식으로 제공하는 URL
var url = 'http://example.com/time?callback=handleResponse';

// JSONP 요청
loadScript(url);

// 서버 부분 (http://example.com/time)
var currentTime = new Date().toLocaleTimeString();
var callback = req.query.callback; // 콜백 함수 이름을 파라미터로 받음
var response = callback + '(' + JSON.stringify(currentTime) + ');';

res.send(response);

위 코드를 실행하면 클라이언트에서 JSONP 요청을 보내고, 서버에서 요청에 대한 응답을 생성하여 클라이언트로 전달합니다. 클라이언트는 이 응답을 콜백 함수로 전달받아서 원하는 동작을 수행할 수 있습니다.

결론

JSONP를 이용하여 외부 서버와 자바스크립트 파일을 동적으로 불러오는 방법에 대해 알아보았습니다. JSONP는 동일 출처 정책을 우회하는 방식이므로 외부 서버의 데이터를 획득하는 데 유용하게 사용될 수 있습니다. 하지만 보안상의 이유로 사용시 주의해야 하며, 요청과 응답을 신뢰할 수 있는 서버와 통신하는 경우에만 사용하는 것이 좋습니다.