자바스크립트 JSONP (JSON With Padding)의 개념과 사용 방법

10 Sep 2023

javascript

JSONP (JSON With Padding)은 웹 개발에서 교차 도메인 요청을 보다 쉽게 처리하기 위해 사용되는 기술입니다. 일반적으로 웹 애플리케이션은 같은 도메인에서만 AJAX 요청을 보낼 수 있지만, 다른 도메인에서 데이터를 가져와야 하는 경우에는 보안 제약으로 인해 요청이 차단될 수 있습니다. 이때 JSONP는 도메인 간 데이터 전송을 가능하게 해줍니다.

JSONP 개념

JSONP는 웹 페이지에서 다른 도메인의 데이터를 로드하기 위해 사용되는 스크립팅 기술입니다. 일반적으로 클라이언트 측에서 서버로 데이터를 요청할 때 JSONP를 사용하면, 서버는 JSONP 콜백 함수로 래핑된 JSON 데이터를 응답합니다. 이때 웹 페이지는 해당 콜백 함수를 사용하여 데이터를 처리하고 화면에 표시합니다.

JSONP는 서버 응답을 JavaScript 코드로 처리하므로, 브라우저에서는 도메인 간 제약을 적용하지 않습니다. 따라서 다른 도메인의 데이터도 로드할 수 있게 됩니다.

JSONP 사용 방법

JSONP를 사용하기 위해서는 다음과 같은 단계가 필요합니다.

서버에서 JSONP를 지원하는 API 엔드포인트를 만듭니다. 이는 요청을 받아 JSON 데이터를 콜백 함수로 래핑하여 응답하는 역할을 합니다.
클라이언트에서 JSONP 요청을 보냅니다. 이때 요청 URL에는 JSONP 콜백 함수 이름을 포함해야 합니다.
서버는 JSON 데이터를 해당 콜백 함수로 래핑하여 응답합니다.
클라이언트에서는 해당 콜백 함수를 정의하여 응답 데이터를 처리하고 화면에 표시합니다.

아래는 JSONP 사용 예제입니다.

// JSONP 요청 함수
function jsonpRequest(url, callback) {
  // JSONP 콜백 함수 이름 생성
  const callbackName = 'jsonp_callback_' + Math.floor(Math.random() * 100000);

  // 요청 URL에 콜백 함수 이름 추가
  const script = document.createElement('script');
  script.src = url + '&callback=' + callbackName;

  // 콜백 함수 처리
  window[callbackName] = function(data) {
    // 응답 데이터 처리
    callback(data);

    // 콜백 함수 제거
    delete window[callbackName];
    document.body.removeChild(script);
  };

  // 요청 시작
  document.body.appendChild(script);
}

// JSONP 요청 보내기
jsonpRequest('https://example.com/api/data?parameter=value', function(data) {
  // 응답 데이터 처리
  console.log(data);
});

위 예제에서는 jsonpRequest 함수를 사용하여 JSONP 요청을 보내고 응답 데이터를 처리하고 있습니다. 요청 URL에는 콜백 함수 이름을 추가하여 서버에서 응답을 받을 때 해당 콜백 함수로 응답 데이터를 전달합니다. 클라이언트에서는 콜백 함수를 정의하여 응답 데이터를 처리하고 사용할 수 있습니다.

JSONP는 웹 개발에서 다른 도메인의 데이터를 로드하는 간편하면서도 유용한 방법입니다. 하지만 보안에 취약할 수 있으므로 주의하여 사용해야 합니다.