이 블로그 포스트에서는 JSONP(JavaScript Object Notation with Padding)를 사용하여 외부 도메인으로부터 데이터를 가져오는 방법을 알아보겠습니다.

JSONP란 무엇인가?

JSONP는 웹 애플리케이션에서 외부 도메인으로부터 데이터를 가져오는데 사용되는 편리한 방법입니다. 보안 정책으로 인해 브라우저에서는 다른 도메인으로부터의 AJAX 요청을 제한하는데, 이것을 우회할 수 있는 방법 중 하나가 JSONP입니다.

JSONP 요청과 응답 예시

JSONP 요청

다음은 jQuery를 사용하여 JSONP 요청을 보내는 예시입니다.

$.ajax({
  url: 'http://external-domain.com/api/data',
  dataType: 'jsonp',
  success: function(data) {
    // 성공적으로 데이터를 받아왔을 때 실행할 코드
  },
  error: function(xhr, status, error) {
    // 오류가 발생했을 때 실행할 코드
  }
});

JSONP 응답

외부 도메인에서는 요청을 받고, 다음과 같은 형태로 JSONP 응답을 반환합니다.

callbackFunction({
  key1: 'value1',
  key2: 'value2'
});

위에서 callbackFunction은 요청을 보낸 클라이언트 측에서 정의한 콜백 함수 이름입니다.

결론

이렇게 JSONP를 사용하면 외부 도메인으로부터 데이터를 가져와서 웹 애플리케이션에 사용할 수 있습니다. 다만 보안에 취약하다는 단점이 있으므로 대안을 고려해야 합니다.

참고 문헌:

• jQuery 공식 문서