[jQuery] JSONP와 동기 및 비동기 통신의 차이

22 Dec 2023

jQuery

웹 애플리케이션을 개발할 때, 서버에서 데이터를 가져와야 하는 경우가 많습니다. 이러한 데이터를 가져오기 위해서 서버와의 통신이 필요한데, 이때 JSONP와 동기적 통신과 비동기적 통신의 차이점에 대해 알아보겠습니다.

동기적 통신(Synchronous Communication)

동기적 통신은 요청한 작업이 완료될 때까지 대기하는 방식입니다. 다시 말해, 요청을 보낸 후에 응답이 올 때까지 대기하며, 응답을 받고 나서야 다음 작업을 수행할 수 있습니다. 아주 간단한 예제를 통해 살펴보겠습니다.

console.log("시작");
$.ajax({
  url: '/data',
  method: 'GET',
  async: false,
  success: function(response) {
    console.log("응답 받음");
    console.log(response);
  }
});
console.log("끝");

위의 코드에서 async: false를 통해 동기 통신을 수행하고 있습니다. 이때 “시작”이 먼저 출력되고, 서버에서 데이터를 받아온 후에 “응답 받음”과 데이터가 출력됩니다.

비동기적 통신(Asynchronous Communication)

비동기적 통신은 요청한 작업이 완료되지 않더라도 대기하지 않고 다른 작업을 수행할 수 있는 방식입니다. 요청을 보낸 후에 응답이 올 때까지 다른 작업을 수행하다가, 응답이 도착하면 그에 맞는 처리를 하는 방식입니다. 비동기 통신의 예를 살펴보겠습니다.

console.log("시작");
$.ajax({
  url: '/data',
  method: 'GET',
  success: function(response) {
    console.log("응답 받음");
    console.log(response);
  }
});
console.log("끝");

이 경우에는 “시작”과 “끝”이 먼저 출력되고, 그 후에 “응답 받음”과 데이터가 출력됩니다.

JSONP(JSON with Padding)

JSONP는 Cross-Origin Resource Sharing(CORS) 정책에 의해 제약을 받는 상황에서 JSON 데이터를 사용할 수 있도록 하는 방법 중 하나입니다. 주로 서로 다른 도메인에서 데이터를 가져와야 하는 경우에 사용됩니다.

JSONP는 일반적으로 script 태그를 이용해 데이터를 가져오며, 이때는 비동기적 통신 방식을 사용합니다.

console.log("시작");
var script = document.createElement('script');
script.src = 'http://example.com/data?callback=processData';
document.body.appendChild(script);

function processData(data) {
  console.log("응답 받음");
  console.log(data);
}
console.log("끝");

위의 코드에서는 서버에서 ‘http://example.com/data’로부터 JSON 데이터를 가져와 processData 함수를 호출하여 응답을 처리합니다.

결론

동기적 통신은 요청한 작업이 완료될 때까지 대기하는 반면, 비동기적 통신은 요청한 작업이 완료되지 않더라도 대기하지 않고 다른 작업을 수행합니다. JSONP는 일반적으로 비동기적 통신을 사용하며, 서로 다른 도메인 간 데이터 통신을 가능하게 합니다.

참고 문헌: