[javascript] 캐싱 기법과 성능 향상

05 Dec 2023

javascript

캐싱은 소프트웨어 시스템에서 성능을 향상시키는 데에 매우 중요한 역할을 합니다. 캐싱은 이전에 계산한 값을 저장하거나 미리 가져와서 재사용함으로써 반복적인 작업을 효율적으로 처리합니다. 특히 웹 개발에서 캐싱은 웹 페이지의 로딩 시간을 줄이고 서버에 대한 부하를 감소시키는 데에 매우 유용합니다. 이번 포스트에서는 다양한 캐싱 기법과 그것들이 어떻게 성능을 향상시키는지에 대해 알아보겠습니다.

1. 페이지 캐싱

페이지 캐싱은 웹 페이지 전체를 캐싱하는 기법입니다. 이는 동적인 페이지에서 정적인 요소들을 캐싱함으로써 웹 페이지 로딩 시간을 크게 단축시킵니다. 예를 들어, 웹 페이지의 헤더나 푸터는 거의 변경되지 않는 요소들이므로 이러한 요소들을 캐싱하여 매번 서버에 요청하는 대신 캐싱된 데이터를 사용할 수 있습니다.

const cache = {};

function getPageElements(pageUrl) {
  if (cache.hasOwnProperty(pageUrl)) {
    console.log("Retrieving from cache...");
    return cache[pageUrl];
  } else {
    console.log("Fetching page from server...");
    const pageData = fetchPageFromServer(pageUrl);
    cache[pageUrl] = pageData;
    return pageData;
  }
}

const header = getPageElements("/header");
const footer = getPageElements("/footer");

위의 예시 코드에서 getPageElements 함수는 페이지의 URL을 파라미터로 받아와서 해당 페이지의 요소들을 반환합니다. 먼저 cache 객체에 해당 URL의 데이터가 있는지 확인하고, 있을 경우 캐시된 데이터를 반환하고, 없을 경우 서버로부터 데이터를 가져와서 캐싱한 후에 반환합니다.

2. 데이터베이스 캐싱

데이터베이스 캐싱은 데이터베이스에서 자주 사용되는 데이터를 메모리에 캐싱하여 데이터베이스 액세스의 부하를 줄이는 기법입니다. 데이터베이스 캐싱은 웹 애플리케이션에서 자주 사용되는 데이터나 복잡한 쿼리 결과를 캐싱하여 응답 시간을 줄입니다.

const cache = {};

function getUser(userId) {
  if (cache.hasOwnProperty(userId)) {
    console.log("Retrieving from cache...");
    return cache[userId];
  } else {
    console.log("Fetching user from database...");
    const userData = fetchUserFromDatabase(userId);
    cache[userId] = userData;
    return userData;
  }
}

const user1 = getUser(1);
const user2 = getUser(2);

위의 예시 코드에서 getUser 함수는 사용자의 ID를 파라미터로 받아와서 해당 사용자의 데이터를 반환합니다. cache 객체에 해당 사용자의 데이터가 있는지 확인하고, 있을 경우 캐시된 데이터를 반환하고, 없을 경우 데이터베이스에서 데이터를 가져와서 캐싱한 후에 반환합니다.

3. CDN (Content Delivery Network)

CDN은 전 세계에 분산된 서버 네트워크로 구성된 캐싱 시스템입니다. CDN은 웹 페이지의 정적인 자원들을 분산된 서버들에 저장하고, 사용자가 웹 페이지에 접속할 때 가까운 서버에서 해당 자원을 제공함으로써 웹 페이지의 로딩 속도를 향상시킵니다. CDN은 이미지, 스타일시트, 자바스크립트 파일 등의 정적인 자원들을 캐싱하여 서버 부하를 감소시키는 데에 매우 유용합니다.

<link rel="stylesheet" href="https://cdn.example.com/styles.css">
<script src="https://cdn.example.com/script.js"></script>
<img src="https://cdn.example.com/image.jpg" alt="Image">

위의 예시 코드에서 CSS 파일, 자바스크립트 파일, 이미지 파일이 CDN을 통해 제공되고 있습니다. 이렇게 웹 페이지의 정적인 자원들을 CDN을 이용하여 제공함으로써 사용자는 가까운 서버에서 자원을 빠르게 가져올 수 있습니다.

결론

캐싱 기법은 소프트웨어 시스템의 성능을 향상시키는 강력한 도구입니다. 웹 개발에서 페이지 캐싱, 데이터베이스 캐싱, 그리고 CDN을 이용한 캐싱은 웹 페이지의 로딩 시간을 단축시키고 서버의 부하를 감소시키는 데에 효과적입니다. 캐싱 기법을 올바르게 사용함으로써 사용자에게 빠른 응답 속도와 원활한 사용 경험을 제공할 수 있습니다.

1. 페이지 캐싱

2. 데이터베이스 캐싱

3. CDN (Content Delivery Network)

결론

참고 자료