JavaScript - 문제 미리보기
문제 776
medium
JSONP의 특징에 대한 설명으로 올바른 것은?
정답: B
JSONP(JSON with Padding)의 핵심 개념과 동작 원리를 이해하는 문제입니다.
JSONP의 등장 배경:
• Cross-Domain Policy: 웹 브라우저의 보안 정책으로 다른 도메인으로의 AJAX 요청 제한
• 문제 상황: `XMLHttpRequest`로는 다른 도메인의 데이터를 가져올 수 없음
JSONP의 해결 방법:
```html
<!-- 일반적인 script 태그는 cross-domain 제한이 없음 -->
<script src="https://other-domain.com/api/data.js"></script>
```
JSONP 동작 과정:
1. 클라이언트: `<script>` 태그 동적 생성
2. 서버: JSON 데이터를 함수 호출 형태로 반환
3. 결과: 함수가 실행되어 데이터 처리
서버 응답 예시:
```php
// 일반 JSON (JSONP 아님)
{"name":"John", "age":30}
// JSONP 방식
myFunc({"name":"John", "age":30});
```
각 옵션 분석:
1. XMLHttpRequest 사용 ❌ - JSONP는 `<script>` 태그 사용
2. `<script>` 태그로 cross-domain 해결 ✅ - JSONP의 핵심
3. JSON 데이터 직접 반환 ❌ - 함수 호출 형태로 반환
4. 동기 통신 ❌ - 비동기적으로 동작
JSONP의 등장 배경:
• Cross-Domain Policy: 웹 브라우저의 보안 정책으로 다른 도메인으로의 AJAX 요청 제한
• 문제 상황: `XMLHttpRequest`로는 다른 도메인의 데이터를 가져올 수 없음
JSONP의 해결 방법:
```html
<!-- 일반적인 script 태그는 cross-domain 제한이 없음 -->
<script src="https://other-domain.com/api/data.js"></script>
```
JSONP 동작 과정:
1. 클라이언트: `<script>` 태그 동적 생성
2. 서버: JSON 데이터를 함수 호출 형태로 반환
3. 결과: 함수가 실행되어 데이터 처리
서버 응답 예시:
```php
// 일반 JSON (JSONP 아님)
{"name":"John", "age":30}
// JSONP 방식
myFunc({"name":"John", "age":30});
```
각 옵션 분석:
1. XMLHttpRequest 사용 ❌ - JSONP는 `<script>` 태그 사용
2. `<script>` 태그로 cross-domain 해결 ✅ - JSONP의 핵심
3. JSON 데이터 직접 반환 ❌ - 함수 호출 형태로 반환
4. 동기 통신 ❌ - 비동기적으로 동작
💡 학습 팁
이 문제를 포함한 JavaScript 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.