[jQuery] JSONP를 이용한 데이터 필터링
이번 포스트에서는 jQuery 라이브러리를 사용하여 JSONP(JSON with Padding)를 이용해 외부 도메인으로부터 데이터를 가져와 필터링 하는 방법을 살펴보겠습니다.
목차
- JSONP란?
- 외부 데이터 가져오기
- 데이터 필터링
1. JSONP란?
JSONP는 브라우저의 Cross-Origin 자원 공유(CORS) 정책을 우회하기 위해 만들어진 방법입니다. JSONP 요청은 script 태그를 사용하여 외부 도메인으로부터 JSON 데이터를 가져올 수 있습니다.
2. 외부 데이터 가져오기
먼저, getJSON 메서드를 사용하여 외부 도메인의 데이터를 가져오겠습니다. 아래는 간단한 예제 코드입니다.
$.getJSON('https://example.com/data.json?callback=?', function(data) {
// 데이터를 처리하는 로직
});
여기서 URL 끝의 callback=?는 jQuery에 JSONP 요청이라는 것을 알리는 역할을 합니다.
3. 데이터 필터링
가져온 데이터를 필터링하여 원하는 정보만을 추출할 수 있습니다. 아래는 예제 코드입니다.
$.getJSON('https://example.com/data.json?callback=?', function(data) {
// 데이터 필터링
var filteredData = data.filter(function(item) {
return item.category === 'Tech';
});
// 필터링된 데이터를 처리하는 로직
});
결론
jQuery의 JSONP 기능을 이용하면 외부 도메인으로부터 데이터를 가져와 필터링하는 작업을 간편하게 수행할 수 있습니다. JSONP를 활용하여 다양한 데이터를 쉽게 다룰 수 있으며, 이를 통해 웹 애플리케이션의 기능을 확장할 수 있습니다.