[jQuery] JSONP와 서버 측 캐싱

22 Dec 2023

jQuery

이번에는 JSONP(JSON with Padding)와 서버 측 캐싱에 대해 알아보겠습니다.

1. JSONP란 무엇인가?

JSONP는 JSON with Padding의 약자로, 동일 출처 정책(Same Origin Policy)과 관련된 웹 브라우저의 보안 제약을 우회하기 위한 방법 중 하나입니다. 일반적으로 JavaScript에서 다른 도메인의 데이터에 접근할 수 없는 제약이 있지만, 스크립트 태그를 이용하여 외부 도메인의 데이터를 가져올 수 있는 기술입니다.

$.ajax({
    url: 'http://external-domain.com/data',
    dataType: 'jsonp',
    success: function(data) {
        // handle data
    }
});

위의 예제에서는 외부 도메인의 데이터에 접근하기 위해 dataType: 'jsonp'를 사용하여 JSONP 요청을 보냅니다.

2. 서버 측 캐싱은 왜 사용하는가?

서버 측 캐시를 사용하면 클라이언트의 요청에 대한 응답을 캐시에 저장하여 동일한 요청에 대해 캐시된 응답을 반환함으로써 서버 부하를 줄이고 응답 시간을 단축할 수 있습니다.

app.get('/data', (req, res) => {
    let data = fetchDataFromDatabase();
    // 캐시된 데이터 반환
    res.setHeader('Cache-Control', 'public, max-age=3600');
    res.json(data);
});

위의 예제에서는 /data 엔드포인트에 대한 요청에 대한 응답을 1시간 동안 캐시하고 있습니다.

3. JSONP와 서버 측 캐싱의 조합

JSONP 요청에 서버 측 캐싱을 적용하면 동일한 요청에 대해 캐시된 데이터를 반환할 수 있으므로, 효율적인 데이터 전송과 처리가 가능합니다.

app.get('/data', (req, res) => {
    let data = fetchDataFromDatabase();
    // 캐시된 데이터 반환
    res.setHeader('Cache-Control', 'public, max-age=3600');
    res.jsonp(data);
});

위의 예제에서는 /data 엔드포인트에 대한 JSONP 요청에 대한 응답을 1시간 동안 캐시하고 있습니다.

마무리

이렇게 JSONP와 서버 측 캐싱을 조합하여 클라이언트-서버 간의 데이터 통신을 효율적으로 관리할 수 있습니다. JSONP와 서버 측 캐싱을 적절히 활용하여 웹 애플리케이션의 성능을 향상시키는데 도움이 될 것입니다.

자세한 내용은 아래 참고 자료를 확인하시기 바랍니다.

참고 자료

본 문서에서는 JSONP와 서버 측 캐싱에 대한 기본적인 내용을 다루었습니다. 보다 자세한 내용은 관련 문서 및 사이트를 참고하시기 바랍니다.