이번 글에서는 JSONP(JSON with Padding)와 데이터 교환 형식에 대해 알아보겠습니다.

JSONP란 무엇인가?

JSONP는 JSON 데이터를 안전하게 교환하기 위한 방법 중 하나입니다. 일반적으로 브라우저에서 보안 정책으로 인해 다른 도메인에서 데이터를 가져오는 것이 제한되지만, JSONP는 이 제한을 우회하는 방법으로 사용됩니다.

JSONP의 동작 방식

1. 클라이언트가 서버에 요청을 보냅니다.
2. 서버는 요청된 데이터를 JSONP 형식으로 래핑한 후, callback 함수와 함께 응답합니다.
3. 클라이언트는 응답된 스크립트를 실행하면서 callback 함수를 호출하여 데이터를 처리합니다.

이러한 방식으로, JSONP는 다른 도메인에서 데이터를 안전하게 가져와서 처리할 수 있도록 합니다.

JSONP 예제 코드

function handleData(data) {
  // 데이터 처리 로직
}

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

위의 예제는 “http://example.com/data”에서 데이터를 가져와서 handleData 함수를 통해 처리하는 JSONP 요청 예제입니다.

마치며

JSONP는 브라우저에서 다른 도메인에서 데이터를 안전하게 가져오는 방법으로 유용하게 활용되고 있습니다. 하지만 보안상의 이슈로 인해 최근에는 CORS(Cross-Origin Resource Sharing)와 같은 더 안전한 방법들이 더 많이 사용되고 있습니다.

참고: MDN Web Docs - JSONP