도메인? 생활코딩을 통해 알아봅시다!

• 생활코딩 도메인 강의 - https://opentutorials.org/course/228/1450

XHR (XMLHttpRequest) 객체를 이용하면 웹 브라우저에서 자바스크립트를 이용하여 비동기로 서버와 통신할 수 있습니다. 

하지만, 대부분의 웹 브라우저에서는 동일출처원칙(SOP, Same Origin Policy)이라는 보안상 이유로 XHR을 이용해서는 다른 도메인과의(Cross Domain) 통신을 할 수 없습니다.

이러한 한계를 극복하고 다른 도메인과의 통신을 하기 위한 일종의 방법으로 JSONP(Json with Padding)라는 방법이 있습니다. jsonp 방식은 HTML에서 <script> 태그는 동일출처원칙에 포함되지 않는다는 점을 이용한 통신 방법입니다. 그리고 널리 쓰이는 자바스크립트 라이브러리인 jQuery에는 jsonp 통신을 할 수 있는 함수가 구현되어 있습니다.

이 문제에서는, 자바스크립트를 이용하여 jQuery에 있는 jsonp를 지원하는 함수인 $.getJSON 함수와 유사한 함수를 구현하는 것이 목표입니다.

오른쪽 상단의 실행 버튼을 누르면 오른쪽 하단에 URL이 나타납니다.

기본으로 제공되는 템플릿 코드는, jsonp 요청을 처리할 수 있는 간단한 서버가 프로그래밍 되어 있습니다.

그리고 템플릿 코드의 index.html 파일에는 jsonp 요청을 보내는 부분만 제외하고는 대부분이 완성되어 있습니다. index.html 페이지에 있는 "jsonp 요청" 버튼을 누르면 각각 지정된 서버 url로 첫번째 인자와 두번째 인자를 포함한 요청을 보내고, 응답 값을 회색 메시지 바에 나타나게 되어 있습니다.

버튼을 누르면 정상적으로 서버와 통신을 할 수 있도록 index.html 에 하단의 getJSON함수를 구현해보세요.

정답 코드에서 "jsonp 요청" 버튼을 눌렀을때 화면입니다.

함수 구현에는 다음과 같은 요구사항이 있습니다.

1. jQuery 라이브러리를 사용하지 말 것. 사용 시 오답처리 한다.

2. 해당 getJSON 함수는, jsonp 방식으로 서버와 통신하며, 두개의 인자를 넘긴다. 첫번째 인자의 이름은 'q' 이며, 데이터를 넘긴다. 두번째 인자의 이름은 'callback'이며, 콜백함수 이름을 넘긴다.

3. 보내는 인자는 URI 인코딩을 하지 않아도 되는 값(기본 영어 알파뱃 및 숫자)만 보낸다고 가정한다. 

4. 서버의 응답 값은 콜백함수를 통하여 전달한다. 또한 응답 값은 항상 자바스크립트 객체 형식(JSON)을 지키는 문자열(string)이 온다고 가정한다.