JSON vs JSONP

우연치 않게 모회사에 기회가 되서 면접을 보게 되었는데 면접 질문 중에 "ajax를 사용하면 문제가 있다. 그 문제는 무엇인가?"라는 질문을 받았었습니다.

 

면접관 A님 : Ajax를 사용하면 문제가 있는데, 어떤 문제가 있나요?

 

나 : 동일 서버가 아닌 타 서버에 http 통신할 때 크로스 도메인이 발생합니다.

 

면접관 A님 : 그럼 이를 해결하려면 어떻게 해야하나요?

 

나 : 서버에서...

 

면접관 A님 : 크로스 도메인이 일어나면 서버에 가기 전에 에러가 발생하는데 어떻게 서버에서 하죠??

 

나 : 잘 모르겠습니다.

 

면접관 A님 : json과 jsonp가 뭔지 아시나요?

 

나 : .... 잘 모르겠습니다.

 

 

핑계를 대자면, Front-End와 Back-End를 같이 올리는 형태(?)인 모놀리식 아키텍처 경험이 대다수이다보니 RestTemplate을 떠올리게 되었고, 서버를 생각했었습니다.

그리고 json이라고 하면 자바스크립트 객체 형태의 데이터 포맷이라는 것을 알고 있었지만, jsonp는 구글링을 하다가 간혹스쳐가는 블로그 예제에서 보던 키워드였지 궁금해 하지도 찾아보지 않았었습니다.

 

결과적으로, 이들은 서로 서로 얽힌 개념들이라는 것을 추후에 구글링을 통해 알게 되었고, 개발자로서 많이 부족함을 느꼈던 면접이였음을 다시 깨달았습니다.

 

 

JSON 이란?

 

JavaScript Object Notation(이하 JSON)은 속성-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 사용하는 개방형 표준 포맷입니다. (위키 참고)

 

요즘 HTTP통신을 하게 되면 흔히 쓰는 데이터 포맷(JSON, XML) 중 하나입니다.

 

 

JSONP 이란?

 

JSON with padding(이하 JSONP)은 클라이언트와 다른 도메인에 있는 서버의 데이터를 요청하는데 사용되는 데이터 포맷입니다. (위키 참고)

 

 

Ajax를 이용한 jsonp 요청 방법

 

function getAjax(dataType) {
    console.log(`=============== ${dataType} ================`);
 
    $.ajax({
        url : `http://www.codejs.co.kr/jsonp.json`,
        dataType : dataType,
        jsonpCallback : "myCallback",
        success : function (response) {
            console.log(response);
        },
        error : function (xhr) {
            console.log(xhr);
        }
    });
}

1. json으로 했을 때

 

getAjax('json');

 

2. jsonp으로 했을 때

- jsonpCallback : "myCallback"으로 넣어면 myCallback( json문자열 ) 형태의 데이터를 받을 수 있습니다.

 

getAjax('jsonp');

 

하지만, 결국엔 서버측에서 jsonp에 대한 callback을 맞춰줘야하는 것이 아닌가란 생각도 들고.. 그냥 Spring Framework에서 제공해주는 RestTemplate를 사용하는게 좋지 않을까라는 생각을 해봅니다... (경험 부족이네요..)

 

 

참고

 

- 깃헙소스