소개

이번 포스트에서는 JSONP(JSON with Padding)를 활용하여 외부 서버의 데이터를 가져와 웹 애플리케이션을 구축하는 방법에 대해 알아보겠습니다. JSONP는 서로 다른 도메인 간에 데이터를 공유할 수 있도록 하는 방법 중 하나로, 일반적으로 XMLHttpRequest와 비동기 콜백 함수를 이용한 JSON 요청과는 달리, 도메인 제약을 우회할 수 있습니다. 이를 통해 웹 애플리케이션에서 다른 도메인의 데이터를 요청하고 활용할 수 있게 됩니다.

JSONP란 무엇인가?

JSONP는 JSON 데이터를 로드하고 활용하기 위한 방법 중 하나입니다. 일반적으로 웹 애플리케이션에서는 XMLHttpRequest를 통해 서버로 JSON 데이터를 요청하고 받아옵니다. 그러나 XMLHttpRequest는 도메인 제약으로 인해, 보안 상의 이유로 다른 도메인의 데이터를 요청할 수 없습니다. 그런데, 이때 JSONP를 사용하면 도메인 제약을 우회할 수 있습니다.

JSONP는 일반적으로 <script> 태그를 이용하여 데이터를 가져오는 방식으로, 서버는 JSON 데이터를 콜백 함수와 함께 응답합니다. 이후 웹 애플리케이션에서는 해당 콜백 함수를 이용하여 데이터를 활용할 수 있습니다.

예제

다음은 JSONP를 활용하여 데이터를 가져오는 간단한 예제 코드입니다.

function handleData(data) {
    console.log("Received data:", data);
}

var script = document.createElement('script');
script.src = 'https://example.com/data?callback=handleData';
document.body.appendChild(script);

위 코드에서는 handleData라는 콜백 함수를 정의하고, 이를 이용하여 외부 서버로부터 데이터를 요청하고 응답받습니다.

결론

JSONP를 활용하면 서로 다른 도메인 간에 데이터를 요청하고 응답받을 수 있으므로, 웹 애플리케이션에서 다양한 소스의 데이터를 활용할 수 있습니다. 그러나 보안상의 이유로 XSS(Cross-Site Scripting) 공격에 취약하다는 점에 유의해야 합니다.

더 나아가, 최근에는 CORS(Cross-Origin Resource Sharing)와 같은 더 안전하고 표준화된 방법들이 등장하면서 JSONP 사용을 지양하는 추세가 있으니, 상황에 맞게 적절한 방법을 선택하여 사용해야 합니다.

참고

• https://en.wikipedia.org/wiki/JSONP
• https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy