제1회 구름코드챌린지(GCC) 기출 문제
    • 01
      텍스트 코딩 정복
    • 문자열 출력
      사칙연산
      절대값 출력하기
      배열에서의 최소값 구하기
      구구단 출력
      약수 구하기
      부분 문자열
      평균과 평균보다 큰 수
      등차 / 등비 수열
      약수의 합
      유일한 수
      피자 쿠폰
      접미사 배열
      멀티탭 사용
      숫자 찍기
    • 02
      알고리즘 정복
    • 완전수 구하기
      소수 판별
      괄호
      어느 고고학자 이야기
      팰린드롬
      채점하기
      구름컵 사이클 대회
      앞 뒤가 같은 수
      탈출
      섬나라 왕
    • 03
      웹 서비스 만들기
    • 자바스크립트 DOM 제어
      XHR이용하여 Ajax 구현
      PHP서버로 json 응답
    • 04
      GUI 앱 만들기
    • Swing으로 카운터 만들기
      AWT로 메모 입력기 만들기
    • 05
      블록 프로그래밍 정복
    • 탱크 이동하기
      탱크 방향전환
      탱크 여러번 방향전환1
      탱크 여러번 방향전환2
      최적의 길을 찾아가기
    • 06
      블록으로 알고리즘 정복
    • 대포발사
      방향전환
      이동한뒤 대포발사
      십자모양의 길
      복잡한 길 이동하기
    • 07
      로보코드 대전 (블럭)
    • 가만히 있는 적 격파하기
      움직이는 적 격파하기
      공격하는 적 격파하기
      대결1
      대결2
      제한시간 안에 적 격파하기
      2개 로봇 동시에 격파하기
      2개 로봇 동시에 격파하기2
      벽타는 로봇 격파하기
      3개 로봇 동시에 격파하기
    • 08
      로보코드 대전 (코드)
    • 몸풀기
      심화함수
      최대속도, 최대회전각도 바꾸기
      대결1
      대결2
    • 09
      보너스 알고리즘/웹서비스
    • 구름 레이싱
      생화학 무기
      부라노섬
      배열 나누기
      스마트폰 테스트
      Javascript로 jsonp 구현하기
      php로 간단한 RESTful API 만들기
    • 10
      보너스 로보코드 정복
    • 3라운드 다승제 1
      3라운드 다승제 2
      3라운드 다승제 3
      4라운드 점수제 1
      4라운드 점수제 2
      4라운드 점수제 3
    Javascript로 jsonp 구현하기
    learn
    undefined undefined
    Javascript로 jsonp 구현하기
    Practice
    도메인? 생활코딩을 통해 알아봅시다!

    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)이 온다고 가정한다.

    Q&A