웹 개발을 하다보면 외부 도메인으로부터 데이터를 가져와야 하는 경우가 종종 있습니다. 하지만 동일 출처 정책(same-origin policy) 때문에 브라우저에서는 외부 도메인에서 데이터를 가져오는 것을 허용하지 않는 경우가 많습니다. 이 때 JSONP(JSON with Padding)와 동적으로 스크립트를 삽입하는 기술을 사용할 수 있습니다.

JSONP란?

JSONP는 웹 애플리케이션에서 외부의 API로부터 데이터를 가져오는 방법 중 하나로, JSONP를 이용하면 브라우저에서 외부 도메인의 데이터를 가져올 수 있습니다. 이는 <script> 요소를 사용하여 외부 도메인에 있는 JSON 데이터를 가져올 수 있는데, 이를 위해 웹 서버는 JSON 데이터를 콜백 함수(callback function)와 함께 응답해야 합니다.

JSONP의 동작 방식

1. 클라이언트에서 외부 도메인의 데이터를 가져오기 위한 JSONP 요청을 보냅니다.
2. 서버는 JSON 데이터를 콜백 함수와 함께 응답합니다.
3. 클라이언트는 콜백 함수를 호출하여 데이터를 처리합니다.

동적으로 스크립트 삽입

동적으로 스크립트를 삽입하는 방법은 외부 스크립트를 현재 페이지에 동적으로 삽입하는 것을 의미합니다. 이를 통해 외부 도메인에서 데이터를 가져오는 것이 가능해집니다. 주로 JavaScript를 사용하여 이러한 동작을 수행하며, document.createElement('script')와 같은 메서드를 사용하여 동적으로 스크립트를 생성하고 삽입할 수 있습니다.

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

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

결론

JSONP와 동적으로 스크립트를 삽입하는 기술을 결합하여 외부 도메인에서 데이터를 가져올 수 있으며, 이는 브라우저의 동일 출처 정책을 우회하는 방법 중 하나입니다.

참고 자료

• W3Schools - JSONP
• MDN Web Docs - Dynamic script insertion