프리캐싱, Pre-Caching이란?

https://www.freecodecamp.org/news/a-detailed-guide-to-pre-caching/

 

위에서 보다시피 웹앱에서 DB 접근 전에 메모리에 올려놓는 것을 캐싱이라고 하는 것을 알 것이다.

 

하지만 Pre-Caching은 그보다 더 성능을 높일 수 있는 방안이다.

조금 다른 방식이라고 생각하면 된다. 알아보자

 

---

 

캐싱보다 pre(앞선) 것이 무엇일까?

캐싱은 요청된 것에 대해서 미리 메모리에 갖고 있다는 측면이지만

Pre 캐싱은 요청하기 전 미리 유저를 예측하여 미리 메모리를 갖고 있는 것이다.

즉, 사후처리가 캐싱, 사전처리가 프리 캐싱이다.

 

프리 캐싱은 2가지 측면이 있는데

예를 들어보자

Client-Side의 예는

사용자가 미리 자주 방문하는 사이트에 대해 캐싱하고 있다는 것이 되겠고

Server-Side 의 예는

사용자가 다운로드 받을만한 것들을 캐싱하고 있다는 것이 되겠다.

 

---

 

프리 캐싱 플로우를 살펴보자

1. 서버는 사용자가 자주 접근하는 데이터 또는 자원에 대해서 파악하고 있어야 한다.

-> 즉, 유저의 플로우, 니즈를 잘 파악하고 있어야 한다.

★★★★★★

최근에는 이 데이터나 자원을 파악하는데 많은 연구가 이뤄지고 있다.

일반적인 분석부터 ML까지 여러가지 측면에서 사용자가 무엇을 원하는 지 파악하는 것이 중요해졌다.

실제로 프리 캐싱은 대용량 트래픽에 대해서 너무 유용하게 작용하고 있으며 UX를 만족시키는 가장 좋은 방법이다.

또한 On-Premise가 아니라면 대용량 데이터를 다룰 때 있어서 비용 절감도 꾀할 수 있어서 좋은 방법이다.

 

2. 어떠한 캐싱 시스템을 이용해서 프리 캐싱할 것인지 정한다.

-> 유저에게 캐싱을 시킬 것인지, 다중 서버에 분산시켜서 캐싱을 시킬 것인지와 같은 방법

3. 캐싱하는 방법, 캐싱할 데이터에 대해 파악했으면 이제 캐싱을 한다.

4. 캐싱은 완료되었고 실제로 데이터를 캐싱함으로써

유저가 얼마나 다운로드 빨랐고 효율적인 네트워크 I/O를 했는지 측정해서 프리 캐싱이 실제로 성과가 있었는지 체크한다.

 

 

---

 

역시 프리 캐싱은 좋은 것이구나

즉, 미리 갖고 있으니 더 성능이 좋은 것이다.

??? 아니 근데 반대로 말하면.. 잘못 가져오면.. 더 성능 안좋아지는 거 아닌가??

 

맞다.. 프리캐싱이 항상 쓰일 순 없다.

프리캐싱은 Server 측면에서 사용자가 무엇을 원하는 지 알 때 쓸 수 있는 것이다.

항상 염두해두자

 

Node.js의 예를 보면서 프리 캐싱 느낌을 알아보자

 

https://progressivecoder.com/in-memory-caching-nodejs/

const express = require('express');
const nodecache = require('node-cache');
require('isomorphic-fetch');

//Setting up Express
const app = express();

//Creating the node-cache instance -> 캐싱함 -> 즉, 프로세스의 메모리에 적재
const cache = new nodecache({stdTTL: 10})

//We are using the fake API available at <https://jsonplaceholder.typicode.com/>
const baseURL = '<https://jsonplaceholder.typicode.com/posts/>';

//Pre-caching Popular Posts -> 가장 인기있는 게시글에 대한 프리캐싱 작업
[1, 2, 3].map(async (id) => {
    const fakeAPIURL = baseURL + id
    const data = await fetch(fakeAPIURL).then((response) => response.json());
    cache.set(id, data);
    console.log(`Post Id ${id} cached`);
})

//API Endpoint to demonstrate caching
app.get('/posts/:id', async (req, res) => {
    const id = req.params.id;
    //캐시 체크
    if (cache.has(id)) {
        console.log('Fetching data from the Node Cache');
        res.send(cache.get(id));
    }
    else {
        const fakeAPIURL = baseURL + id
        const data = await fetch(fakeAPIURL).then((response) => response.json());

        cache.set(req.params.id, data);
        console.log('Fetching Data from the API');
        res.send(data);
    }
})

//Starting the server
app.listen(3000, () => {
    console.log('The server is listening on port 3000')
})

 

 

---

 

위의 예에서도 봤다시피 사실 Server-side에서 더욱 유용한 프리캐싱이다.

 

특히 CDN과 같이 쓰이는 전략이다.

CDN이 각 Edge에 미리 프리 캐싱을 하는 것과 같은 원리다.

Origin을 통해서 받는 것보다 훨씬 빠르게 받을 수 있다.

유튜브 영상도 그렇다. 사실 US 데이터센터에 다 올라갈텐데.. 어떻게 빨리 받지??는 우리나라에 Edge를 사용하기 때문이다.

U+ 라그랬나? 아무튼 그렇다.

 

또한 Proxy를 이용해서도 많이 사용한다.

 

이런 프록시를 통해서 직접 Web Application에 접근하지 않고도 첫 번째 프록시에서 모든 것을 가져가는 것이다.

이것 또한 CDN이랑 비슷한 원리지만 CDN이 Static한 파일을 위해 주로 쓴다는 측면에서 조금 다르다.

이러한 프록시는 여기서 Origin의 처리를 대신해준다고 생각하면 된다.

 

 

참고링크

https://www.freecodecamp.org/news/a-detailed-guide-to-pre-caching/