자바스크립트 JSONP는 웹 개발에서 사용되는 기법으로, 크로스 도메인(Cross-Domain) 데이터 요청을 처리하는 방법 중 하나입니다.

JSONP의 개념

크로스 도메인 데이터 요청은 보안 상의 이유로 일반적으로 허용되지 않습니다. 하지만 JSONP는 스크립트 태그를 이용하여 다른 도메인에서 데이터를 요청하고 가져올 수 있는 방법을 제공합니다. 이를 가능하게 하는 핵심 아이디어는 콜백 함수를 이용하는 것입니다.

JSONP 사용 방법

JSONP를 사용하기 위해서는 몇 가지 단계를 따라야 합니다.

1. 서버에서 JSONP 지원 설정

첫 번째로, 데이터를 제공하는 서버에서 JSONP를 지원하도록 설정해야 합니다. 일반적으로는 서버 측에서 요청된 데이터를 JSONP 형식으로 응답하는 API 엔드포인트를 만들어야 합니다. 이 엔드포인트는 쿼리 매개 변수로 콜백 함수 이름을 받아와 해당 함수를 호출하여 데이터를 전달할 것입니다.

2. 클라이언트에서 JSONP 요청

두 번째로, 클라이언트에서 JSONP 요청을 보내야 합니다. 이를 위해서는 <script> 태그를 생성하고, src 속성에 서버의 API 엔드포인트 주소와 함께 콜백 함수 이름을 포함해야 합니다. 이 때 주의해야 할 점은, 콜백 함수 이름은 클라이언트에서 미리 정의해야 한다는 것입니다.

예를 들어, 다음과 같이 클라이언트에서 JSONP 요청을 보낼 수 있습니다.

// 콜백 함수 정의
function handleData(data) {
  console.log(data);
}

// JSONP 요청 생성
var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleData';
document.head.appendChild(script);

3. 서버에서 JSONP 응답 전송

마지막으로, 서버에서는 요청된 데이터를 JSONP 형식으로 응답해야 합니다. 응답은 콜백 함수 호출로 감싸져 있어야 하며, 이를 위해 서버에서는 받아온 데이터를 콜백 함수 이름과 함께 래핑해야 합니다. 클라이언트는 이 응답을 스크립트로 간주하여 실행할 것입니다.

예를 들어, 서버에서는 다음과 같이 JSONP 응답을 생성할 수 있습니다.

var data = { message: 'Hello, JSONP!' };
var callbackName = req.query.callback;

// JSONP 응답 전송
res.send(callbackName + '(' + JSON.stringify(data) + ')');

요약

자바스크립트 JSONP는 크로스 도메인 데이터 요청을 처리하는 유용한 방법 중 하나입니다. 이를 통해 다른 도메인에서 데이터를 가져와 사용할 수 있으며, 클라이언트와 서버 간의 콜백 함수를 통해 데이터를 전달할 수 있습니다. JSONP를 사용하면 웹 개발자들은 다양한 도메인 간의 데이터 통신을 보다 편리하게 처리할 수 있습니다.