웹 개발에서 API를 사용하다 보면 도메인 간 제약으로 인해 XMLHttpRequest를 통한 직접 통신이 제한될 때가 있습니다. 이럴 때 JSONP(JSON with Padding)를 사용하면 이 제약을 우회하여 데이터를 가져올 수 있습니다. JSONP는 script 태그를 사용하여 외부 도메인의 자원을 요청하고, 응답으로 실행될 JavaScript 코드를 받아 옵니다.
JSONP 요청
JSONP를 통해 데이터를 요청하기 위해서는 서버 측에서 요청을 받아들일 수 있는 형태로 응답을 구성해야 합니다. 일반적으로는 쿼리 스트링에 콜백 함수명을 포함한 URL을 요청하고, 서버는 해당 콜백 함수명과 함께 데이터를 응답합니다.
다음은 jQuery를 사용하여 JSONP 요청을 보내는 예제 코드입니다.
$.ajax({
url: 'https://api.example.com/data?callback=handleData',
dataType: 'jsonp',
success: function(response) {
// 처리할 내용
}
});
function handleData(data) {
// 응답 데이터 처리
}
위 예제에서 url 속성에 요청할 API의 URL을, dataType 속성에는 jsonp를 지정하여 JSONP 요청을 보냅니다. 또한 callback 인수를 사용하여 콜백 함수명을 명시합니다. 요청이 성공하면 지정한 콜백 함수가 호출되어 응답 데이터를 받아 처리할 수 있습니다.
JSONP 요청을 보내기 위해서는 서버에서도 적절한 처리를 해주어야 합니다. JSONP 요청을 지원하는 서버의 API를 사용하거나, 서버 측에서 콜백 함수명을 포함한 응답을 생성할 수 있는 방법을 고려해야 합니다.
JSONP는 오래되었고 보안에 취약한 점이 있으므로, 최근에는 CORS(Cross-Origin Resource Sharing)를 사용하는 것이 권장됩니다. 하지만 일부 오래된 API는 JSONP만 지원하는 경우가 있으므로, 필요에 따라 JSONP 사용법을 숙지하는 것도 좋습니다.
JSONP를 사용하는 방법과 주의할 점을 배우고, 실제 상황에 맞게 적절한 방법을 선택하여 데이터를 안전하게 가져와 보세요.