์๋ฒ ์ปดํฌ๋ํธ์์ React์ ์บ์ ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ํ์ํฉ๋๋ค. ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ ๋ฐ ํ์ฅ์ฑ ํฅ์์ ์ํ ์บ์ฑ ์ ๋ต์ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
React ์บ์ ํจ์ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ: ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ์๋ฒ ์ปดํฌ๋ํธ ์บ์ ์ต์ ํ
React ์๋ฒ ์ปดํฌ๋ํธ(RSC)๋ ์๋ฒ์์ ๋ ๋๋ง ๋ก์ง์ ์ํํ๊ณ ๋ฏธ๋ฆฌ ๋ ๋๋ง๋ HTML์ ํด๋ผ์ด์ธํธ๋ก ์ ์กํ ์ ์๊ฒ ํจ์ผ๋ก์จ ์น ์ ํ๋ฆฌ์ผ์ด์
๊ตฌ์ถ ๋ฐฉ์์ ํ์ ํ์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ์ฑ๋ฅ, SEO ๋ฐ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ํฌ๊ฒ ํฅ์์ํต๋๋ค. ๊ทธ๋ฌ๋ RSC๋ฅผ ํ์ฉํ ๋, ํนํ ๋ค์ํ ๋ฐ์ดํฐ์ ์ฌ์ฉ์ ์ํธ ์์ฉ์ ์ฒ๋ฆฌํ๋ ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์
์์๋ ํจ์จ์ ์ธ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ๊ฐ ์ค์ํด์ง๋๋ค. React์ cache ํจ์๋ ์๋ฒ ์ปดํฌ๋ํธ ๋ด์์ ๋น์ฉ์ด ๋ง์ด ๋๋ ์์
์ ๊ฒฐ๊ณผ๋ฅผ ์บ์ฑํ์ฌ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋์ ์ต์ ํํ๊ณ ์ฑ๋ฅ์ ํฅ์์ํค๋ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค.
React ์บ์ ํจ์ ์ดํดํ๊ธฐ
cache ํจ์๋ React์ ๋ด์ฅ ์ ํธ๋ฆฌํฐ๋ก, ํนํ ์๋ฒ ์ปดํฌ๋ํธ๋ฅผ ์ํด ์ค๊ณ๋์์ต๋๋ค. ์ด ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด ํจ์์ ๊ฒฐ๊ณผ๋ฅผ ๋ฉ๋ชจ์ด์ ์ด์
ํ์ฌ ์ค๋ณต ๊ณ์ฐ์ ๋ฐฉ์งํ๊ณ ์๋ฒ ์ธก ๋ฆฌ์์ค ์๋น๋ฅผ ํฌ๊ฒ ์ค์ผ ์ ์์ต๋๋ค. ๋ณธ์ง์ ์ผ๋ก, ์ด ํจ์๋ ์ง์์ ์ธ ์๋ฒ ์ธก ๋ฉ๋ชจ์ด์ ์ด์
๋๊ตฌ ์ญํ ์ ํฉ๋๋ค. ๋์ผํ ์ธ์๋ก ๊ฐ ํธ์ถ์ ์บ์๋ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ์ฌ ๊ธฐ๋ณธ ํจ์์ ๋ถํ์ํ ์ฌ์คํ์ ๋ฐฉ์งํฉ๋๋ค.
`cache` ์๋ ๋ฐฉ์
cache ํจ์๋ ๋จ์ผ ํจ์๋ฅผ ์ธ์๋ก ๋ฐ์ ํด๋น ํจ์์ ์๋กญ๊ณ ์บ์๋ ๋ฒ์ ์ ๋ฐํํฉ๋๋ค. ์บ์๋ ํจ์๊ฐ ํธ์ถ๋๋ฉด React๋ ์ ๊ณต๋ ์ธ์์ ๋ํ ๊ฒฐ๊ณผ๊ฐ ์ด๋ฏธ ์บ์์ ์๋์ง ํ์ธํฉ๋๋ค. ์กด์ฌํ๋ ๊ฒฝ์ฐ ์บ์๋ ๊ฒฐ๊ณผ๊ฐ ์ฆ์ ๋ฐํ๋ฉ๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ์๋ณธ ํจ์๊ฐ ์คํ๋๊ณ , ๊ฒฐ๊ณผ๊ฐ ์บ์์ ์ ์ฅ๋๋ฉฐ, ๊ฒฐ๊ณผ๊ฐ ๋ฐํ๋ฉ๋๋ค.
`cache` ์ฌ์ฉ์ ์ด์
- ์ฑ๋ฅ ํฅ์: ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ ์ ์บ์ฑํจ์ผ๋ก์จ ์๋ฒ๊ฐ ๋์ผํ ๋ฐ์ดํฐ๋ฅผ ๋ค์ ๊ณ์ฐํ๋ ๋ฐ ์๋นํ๋ ์๊ฐ์ ๋ํญ ์ค์ผ ์ ์์ต๋๋ค.
- ์๋ฒ ๋ถํ ๊ฐ์: ๊ณ์ฐ๋์ด ์ ๋ค๋ ๊ฒ์ ์๋ฒ์ CPU ์ฌ์ฉ๋๊ณผ ๋ฉ๋ชจ๋ฆฌ ์๋น๊ฐ ์ค์ด๋ ๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
- ํ์ฅ์ฑ ํฅ์: ์ต์ ํ๋ ๋ฆฌ์์ค ์ฌ์ฉ์ ํตํด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ ๋ง์ ํธ๋ํฝ๊ณผ ์ฌ์ฉ์๋ฅผ ํจ์จ์ ์ผ๋ก ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
- ๊ฐ์ํ๋ ์ฝ๋:
cacheํจ์๋ ์ฌ์ฉํ๊ธฐ ์ฝ๊ณ ๊ธฐ์กด ์๋ฒ ์ปดํฌ๋ํธ์ ์ํํ๊ฒ ํตํฉ๋ฉ๋๋ค.
์๋ฒ ์ปดํฌ๋ํธ์์ `cache` ๊ตฌํํ๊ธฐ
์ค์ ์์ ๋ฅผ ํตํด React ์๋ฒ ์ปดํฌ๋ํธ์์ cache ํจ์๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
๊ธฐ๋ณธ ์์ : ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฟผ๋ฆฌ ์บ์ฑ
์๋ฒ ์ปดํฌ๋ํธ ๋ด์์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ์ฌ์ฉ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ผ ํ๋ ์๋๋ฆฌ์ค๋ฅผ ์๊ฐํด ๋ณด์ธ์. ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๊ฒ์ ํนํ ๋์ผํ ๋ฐ์ดํฐ๊ฐ ์์ฃผ ์์ฒญ๋ ๊ฒฝ์ฐ ์๋์ ์ผ๋ก ๋น์ฉ์ด ๋ง์ด ๋๋ ์์
์ผ ์ ์์ต๋๋ค. ๋ค์์ ์ด๋ฅผ ์ต์ ํํ๊ธฐ ์ํด cache๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์
๋๋ค.
import { cache } from 'react';
const getUserData = cache(async (userId: string) => {
// ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฟผ๋ฆฌ ์๋ฎฌ๋ ์ด์
(์ค์ ๋ฐ์ดํฐ๋ฒ ์ด์ค ๋ก์ง์ผ๋ก ๋์ฒด)
await new Promise(resolve => setTimeout(resolve, 500)); // ๋คํธ์ํฌ ์ง์ฐ ์๊ฐ ์๋ฎฌ๋ ์ด์
return { id: userId, name: `User ${userId}`, email: `user${userId}@example.com` };
});
async function UserProfile({ userId }: { userId: string }) {
const userData = await getUserData(userId);
return (
User Profile
ID: {userData.id}
Name: {userData.name}
Email: {userData.email}
);
}
export default UserProfile;
์ด ์์ ์์๋ getUserData๊ฐ cache ํจ์๋ก ๋ํ๋ฉ๋๋ค. ํน์ userId๋ก getUserData๊ฐ ์ฒ์ ํธ์ถ๋๋ฉด ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฟผ๋ฆฌ๊ฐ ์คํ๋๊ณ ๊ฒฐ๊ณผ๊ฐ ์บ์์ ์ ์ฅ๋ฉ๋๋ค. ๋์ผํ userId๋ก getUserData๋ฅผ ํ์ ํธ์ถํ๋ฉด ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฟผ๋ฆฌ๋ฅผ ํผํ๊ณ ์บ์๋ ๊ฒฐ๊ณผ๊ฐ ์ง์ ๋ฐํ๋ฉ๋๋ค.
์ธ๋ถ API์์ ๊ฐ์ ธ์จ ๋ฐ์ดํฐ ์บ์ฑ
๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฟผ๋ฆฌ์ ๋ง์ฐฌ๊ฐ์ง๋ก ์ธ๋ถ API์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๊ฒ๋ ๋น์ฉ์ด ๋ง์ด ๋ค ์ ์์ต๋๋ค. API ์๋ต์ ์บ์ฑํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
import { cache } from 'react';
const fetchWeatherData = cache(async (city: string) => {
const apiUrl = `https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}&aqi=no`;
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error(`Failed to fetch weather data for ${city}`);
}
const data = await response.json();
return data;
});
async function WeatherDisplay({ city }: { city: string }) {
try {
const weatherData = await fetchWeatherData(city);
return (
Weather in {city}
Temperature: {weatherData.current.temp_c}ยฐC
Condition: {weatherData.current.condition.text}
);
} catch (error: any) {
return Error: {error.message}
;
}
}
export default WeatherDisplay;
์ด ๊ฒฝ์ฐ fetchWeatherData๊ฐ ์บ์๋ฉ๋๋ค. ํน์ ๋์์ ๋ ์จ ๋ฐ์ดํฐ๊ฐ ์ฒ์ ๊ฐ์ ธ์์ง๋ฉด API ํธ์ถ์ด ์ด๋ฃจ์ด์ง๊ณ ๊ฒฐ๊ณผ๊ฐ ์บ์๋ฉ๋๋ค. ๋์ผํ ๋์๋ฅผ ํ์ ์์ฒญํ๋ฉด ์บ์๋ ๋ฐ์ดํฐ๊ฐ ๋ฐํ๋ฉ๋๋ค. YOUR_API_KEY๋ฅผ ์ค์ API ํค๋ก ๋ฐ๊พธ์ธ์.
๋ณต์กํ ๊ณ์ฐ ์บ์ฑ
cache ํจ์๋ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ์๋ง ๊ตญํ๋์ง ์์ต๋๋ค. ๋ณต์กํ ๊ณ์ฐ์ ๊ฒฐ๊ณผ๋ฅผ ์บ์ฑํ๋ ๋ฐ์๋ ์ฌ์ฉํ ์ ์์ต๋๋ค.
import { cache } from 'react';
const calculateFibonacci = cache((n: number): number => {
if (n <= 1) {
return n;
}
return calculateFibonacci(n - 1) + calculateFibonacci(n - 2);
});
function FibonacciDisplay({ n }: { n: number }) {
const fibonacciNumber = calculateFibonacci(n);
return The {n}th Fibonacci number is: {fibonacciNumber}
;
}
export default FibonacciDisplay;
calculateFibonacci ํจ์๊ฐ ์บ์๋ฉ๋๋ค. ํน์ n์ ๋ํ ํผ๋ณด๋์น ์๊ฐ ์ฒ์ ๊ณ์ฐ๋๋ฉด ๊ณ์ฐ์ด ์ํ๋๊ณ ๊ฒฐ๊ณผ๊ฐ ์บ์๋ฉ๋๋ค. ๋์ผํ n์ ๋ํ ํ์ ํธ์ถ์ ์บ์๋ ๊ฐ์ ๋ฐํํฉ๋๋ค. ์ด๋ ํนํ ๊ณ์ฐ์ด ๋งค์ฐ ๋น์ฉ์ด ๋ง์ด ๋ค ์ ์๋ ๋ ํฐ n ๊ฐ์ ๊ฒฝ์ฐ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํต๋๋ค.
๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ๊ณ ๊ธ ์บ์ฑ ์ ๋ต
cache ํจ์์ ๊ธฐ๋ณธ ์ฌ์ฉ์ ๊ฐ๋จํ์ง๋ง, ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ํ ๋์์ ์ต์ ํํ๋ ค๋ฉด ๋ ๊ณ ๊ธ ์ ๋ต์ด ํ์ํฉ๋๋ค. ์ด๋ฌํ ์์๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
์บ์ ๋ฌดํจํ ๋ฐ ์๊ฐ ๊ธฐ๋ฐ ๋ง๋ฃ
๋ง์ ์๋๋ฆฌ์ค์์ ์บ์๋ ๋ฐ์ดํฐ๋ ํน์ ๊ธฐ๊ฐ ํ์ ์ค๋๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๋ ์จ ๋ฐ์ดํฐ๋ ์์ฃผ ๋ณ๊ฒฝ๋๊ณ ํตํ ํ์จ์ ๋์์์ด ๋ณ๋ํฉ๋๋ค. ์บ์๋ฅผ ๋ฌดํจํํ๊ณ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ธฐ์ ์ผ๋ก ์๋ก ๊ณ ์น๋ ๋ฉ์ปค๋์ฆ์ด ํ์ํฉ๋๋ค. ๋ด์ฅ cache ํจ์๋ ๋ช
์์ ์ธ ๋ง๋ฃ๋ฅผ ์ ๊ณตํ์ง ์์ง๋ง ์์ฒด์ ์ผ๋ก ๊ตฌํํ ์ ์์ต๋๋ค. ํ ๊ฐ์ง ์ ๊ทผ ๋ฐฉ์์ cache์ ํ์ ํฌ ๋ฆฌ๋ธ(TTL) ๋ฉ์ปค๋์ฆ์ ๊ฒฐํฉํ๋ ๊ฒ์
๋๋ค.
import { cache } from 'react';
const cacheWithTTL = (fn: Function, ttl: number) => {
const cacheMap = new Map();
return async (...args: any[]) => {
const key = JSON.stringify(args);
const cached = cacheMap.get(key);
if (cached && Date.now() < cached.expiry) {
return cached.data;
}
const data = await fn(...args);
cacheMap.set(key, { data, expiry: Date.now() + ttl });
return data;
};
};
const fetchWeatherDataWithTTL = cacheWithTTL(async (city: string) => {
const apiUrl = `https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}&aqi=no`;
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error(`Failed to fetch weather data for ${city}`);
}
const data = await response.json();
return data;
}, 60000); // 60์ด TTL
const CachedWeatherDisplay = async ({ city }: { city: string }) => {
try {
const weatherData = await fetchWeatherDataWithTTL(city);
return (
Weather in {city} (Cached)
Temperature: {weatherData.current.temp_c}ยฐC
Condition: {weatherData.current.condition.text}
);
} catch (error: any) {
return Error: {error.message}
;
}
};
export default CachedWeatherDisplay;
์ด ์์ ๋ ์๋ณธ ํจ์๋ฅผ ๋ํํ๊ณ ๋ง๋ฃ ์๊ฐ์ด ์๋ ์บ์ ๋งต์ ๊ด๋ฆฌํ๋ cacheWithTTL ๊ณ ์ฐจ ํจ์๋ฅผ ์ ์ํฉ๋๋ค. ์บ์๋ ํจ์๊ฐ ํธ์ถ๋๋ฉด ๋จผ์ ๋ฐ์ดํฐ๊ฐ ์บ์์ ์๋์ง ๊ทธ๋ฆฌ๊ณ ๋ง๋ฃ๋์ง ์์๋์ง ํ์ธํฉ๋๋ค. ๋ ์กฐ๊ฑด์ด ๋ชจ๋ ์ถฉ์กฑ๋๋ฉด ์บ์๋ ๋ฐ์ดํฐ๊ฐ ๋ฐํ๋ฉ๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ์๋ณธ ํจ์๊ฐ ์คํ๋๊ณ , ๊ฒฐ๊ณผ๊ฐ ๋ง๋ฃ ์๊ฐ๊ณผ ํจ๊ป ์บ์์ ์ ์ฅ๋๋ฉฐ, ๊ฒฐ๊ณผ๊ฐ ๋ฐํ๋ฉ๋๋ค. ๋ฐ์ดํฐ์ ๋ณ๋์ฑ์ ๋ฐ๋ผ ttl ๊ฐ์ ์กฐ์ ํ์ธ์.
์บ์ ํค ๋ฐ ์ธ์ ์ง๋ ฌํ
cache ํจ์๋ ์บ์ ํค๋ฅผ ์์ฑํ๊ธฐ ์ํด ์บ์๋ ํจ์์ ์ ๋ฌ๋ ์ธ์๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ธ์๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ์ง๋ ฌํ๋๊ณ ์บ์ ํค๊ฐ ์บ์ฑ๋๋ ๋ฐ์ดํฐ๋ฅผ ์ ํํ๊ฒ ๋ํ๋ด๋๋ก ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ณต์กํ ๊ฐ์ฒด์ ๊ฒฝ์ฐ ์บ์ ํค๋ฅผ ์์ฑํ๊ธฐ ์ํด JSON.stringify์ ๊ฐ์ ์ผ๊ด๋ ์ง๋ ฌํ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ์ฌ๋ฌ ๋ณต์กํ ์ธ์๋ฅผ ๋ฐ๋ ํจ์์ ๋ํด ์ธ์์ ์์๊ฐ ์บ์ ํค์ ๋ฏธ์น๋ ์ํฅ์ ํญ์ ๊ณ ๋ คํ์ญ์์ค. ์ธ์์ ์์๋ฅผ ๋ณ๊ฒฝํ๋ฉด ์บ์ ๋๋ฝ์ด ๋ฐ์ํ ์ ์์ต๋๋ค.
์ง์ญ๋ณ ์บ์ฑ
๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ฐ์ดํฐ ๊ด๋ จ์ฑ์ ์ข ์ข ์ง์ญ๋ณ๋ก ๋ค๋ฆ ๋๋ค. ์๋ฅผ ๋ค์ด, ์ํ ๊ฐ์ฉ์ฑ, ๊ฐ๊ฒฉ ๋ฐ ๋ฐฐ์ก ์ต์ ์ ์ฌ์ฉ์์ ์์น์ ๋ฐ๋ผ ๋ค๋ฅผ ์ ์์ต๋๋ค. ์ฌ์ฉ์๊ฐ ๊ฐ์ฅ ๊ด๋ จ์ฑ์ด ๋๊ณ ์ต์ ์ ๋ณด๋ฅผ ๋ณผ ์ ์๋๋ก ์ง์ญ๋ณ ์บ์ฑ ์ ๋ต์ ๊ตฌํํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค. ์ด๋ ์บ์ ํค์ ์ผ๋ถ๋ก ์ฌ์ฉ์ ์ง์ญ ๋๋ ์์น๋ฅผ ํฌํจํ์ฌ ๋ฌ์ฑํ ์ ์์ต๋๋ค.
import { cache } from 'react';
const fetchProductData = cache(async (productId: string, region: string) => {
// ์ง์ญ๋ณ API์์ ์ํ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์๋ฎฌ๋ ์ด์
await new Promise(resolve => setTimeout(resolve, 300));
return { id: productId, name: `Product ${productId} (${region})`, price: Math.random() * 100, region };
});
async function ProductDisplay({ productId, region }: { productId: string; region: string }) {
const productData = await fetchProductData(productId, region);
return (
Product Details
ID: {productData.id}
Name: {productData.name}
Price: ${productData.price.toFixed(2)}
Region: {productData.region}
);
}
export default ProductDisplay;
์ด ์์ ์์๋ fetchProductData ํจ์๊ฐ productId์ region ๋ชจ๋๋ฅผ ์ธ์๋ก ๋ฐ์ต๋๋ค. ์บ์ ํค๋ ์ด ๋ ๊ฐ ๋ชจ๋๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์์ฑ๋์ด ์๋ก ๋ค๋ฅธ ์ง์ญ์ด ์๋ก ๋ค๋ฅธ ์บ์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ด๋ ํนํ ์ ์ ์๊ฑฐ๋ ์ ํ๋ฆฌ์ผ์ด์
์ด๋ ์ง์ญ๋ณ๋ก ๋ฐ์ดํฐ๊ฐ ํฌ๊ฒ ๋ค๋ฅธ ๋ชจ๋ ์ ํ๋ฆฌ์ผ์ด์
์ ์ค์ํฉ๋๋ค.
CDN์ ์ฌ์ฉํ ์ฃ์ง ์บ์ฑ
React cache ํจ์๋ ์๋ฒ ์ธก ์บ์ฑ์ ์ต์ ํํ์ง๋ง, ์ฝํ
์ธ ์ ์ก ๋คํธ์ํฌ(CDN)๋ฅผ ์ฃ์ง ์บ์ฑ์ ํ์ฉํ์ฌ ์ฑ๋ฅ์ ๋์ฑ ํฅ์์ํฌ ์ ์์ต๋๋ค. CDN์ ์๋ฒ ์ปดํฌ๋ํธ์ ๋ฏธ๋ฆฌ ๋ ๋๋ง๋ HTML์ ํฌํจํ ์ ํ๋ฆฌ์ผ์ด์
์ ์์
์ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋ ๊ฐ๊น์ด ์๋ฒ์ ์ ์ฅํฉ๋๋ค. ์ด๋ ์ง์ฐ ์๊ฐ์ ์ค์ด๊ณ ์ ํ๋ฆฌ์ผ์ด์
๋ก๋ ์๋๋ฅผ ํฅ์์ํต๋๋ค. CDN์ด ์๋ฒ์ ์๋ต์ ์บ์ํ๋๋ก ๊ตฌ์ฑํ๋ฉด ์๋ณธ ์๋ฒ์ ๋ถํ๋ฅผ ํฌ๊ฒ ์ค์ด๊ณ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ ์ข์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
์บ์ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๋ฐ ๋ถ์
์บ์ฑ ์ ๋ต์ ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํ๊ณ ๋ถ์ํ์ฌ ์ ์ฌ์ ์ธ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ์บ์ ํํธ์จ์ ์ต์ ํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์๋ฒ ์ธก ๋ชจ๋ํฐ๋ง ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์บ์ ํํธ ๋ฐ ๋ฏธ์ค์จ, ์บ์ ํฌ๊ธฐ ๋ฐ ์บ์๋ ํจ์ ์คํ ์๊ฐ์ ์ถ์ ํ์ญ์์ค. ์ด ๋ฐ์ดํฐ๋ฅผ ๋ถ์ํ์ฌ ์บ์ฑ ๊ตฌ์ฑ์ ๋ฏธ์ธ ์กฐ์ ํ๊ณ , TTL ๊ฐ์ ์กฐ์ ํ๋ฉฐ, ์ถ๊ฐ ์ต์ ํ ๊ธฐํ๋ฅผ ์๋ณํ์ญ์์ค. Prometheus ๋ฐ Grafana์ ๊ฐ์ ๋๊ตฌ๋ ์บ์ ์ฑ๋ฅ ๋ฉํธ๋ฆญ์ ์๊ฐํํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
์ผ๋ฐ์ ์ธ ํจ์ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
cache ํจ์๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ด์ง๋ง, ์์์น ๋ชปํ ๋ฌธ์ ๋ฅผ ํผํ๊ธฐ ์ํด ์ผ๋ฐ์ ์ธ ํจ์ ์ ์ธ์งํ๊ณ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
๊ณผ๋ํ ์บ์ฑ
๋ชจ๋ ๊ฒ์ ์บ์ฑํ๋ ๊ฒ์ด ํญ์ ์ข์ ๊ฒ์ ์๋๋๋ค. ๋งค์ฐ ํ๋ฐ์ฑ์ด ๋์ ๋ฐ์ดํฐ๋ ๊ฑฐ์ ์ก์ธ์ค๋์ง ์๋ ๋ฐ์ดํฐ๋ฅผ ์บ์ฑํ๋ฉด ๋ถํ์ํ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์๋นํ์ฌ ์ค์ ๋ก ์ฑ๋ฅ์ด ์ ํ๋ ์ ์์ต๋๋ค. ์บ์ฑํ๋ ๋ฐ์ดํฐ๋ฅผ ์ ์คํ๊ฒ ๊ณ ๋ คํ๊ณ ๊ณ์ฐ ๋๋ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๊ฐ์ ์ธก๋ฉด์์ ์๋นํ ์ด์ ์ ์ ๊ณตํ๋์ง ํ์ธํ์ญ์์ค.
์บ์ ๋ฌดํจํ ๋ฌธ์
์บ์๋ฅผ ์๋ชป ๋ฌดํจํํ๋ฉด ์ค๋๋ ๋ฐ์ดํฐ๊ฐ ์ฌ์ฉ์์๊ฒ ์ ๊ณต๋ ์ ์์ต๋๋ค. ์บ์ ๋ฌดํจํ ๋ก์ง์ด ๊ฐ๋ ฅํ๊ณ ๋ชจ๋ ๊ด๋ จ ๋ฐ์ดํฐ ์ข ์์ฑ์ ๊ณ ๋ คํ๋์ง ํ์ธํ์ญ์์ค. ๋ฐ์ดํฐ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ํ๊ทธ ๊ธฐ๋ฐ ๋ฌดํจํ ๋๋ ์ข ์์ฑ ๊ธฐ๋ฐ ๋ฌดํจํ์ ๊ฐ์ ์บ์ ๋ฌดํจํ ์ ๋ต์ ๊ณ ๋ คํ์ญ์์ค.
๋ฉ๋ชจ๋ฆฌ ๋์
์ฌ๋ฐ๋ฅด๊ฒ ๊ด๋ฆฌํ์ง ์์ผ๋ฉด ์บ์๋ ๋ฐ์ดํฐ๊ฐ ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ ์ถ์ ๋์ด ๋ฉ๋ชจ๋ฆฌ ๋์๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ์บ์ ํฌ๊ธฐ๋ฅผ ์ ํํ๊ณ ๊ฐ์ฅ ๋ ์ฌ์ฉ๋ ํญ๋ชฉ(LRU)์ ์ ๊ฑฐํ๋ ๋ฉ์ปค๋์ฆ์ ๊ตฌํํ์ฌ ๊ณผ๋ํ ๋ฉ๋ชจ๋ฆฌ ์๋น๋ฅผ ๋ฐฉ์งํ์ญ์์ค. ์์ ์ ๊ณต๋ cacheWithTTL ์์ ๋ ์ด ์ํ์ ์ํํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
`cache`์ ๊ฐ๋ณ ๋ฐ์ดํฐ ์ฌ์ฉ
cache ํจ์๋ ์บ์ ํค๋ฅผ ๊ฒฐ์ ํ๊ธฐ ์ํด ์ธ์์ ์ฐธ์กฐ ๋๋ฑ์ฑ์ ์์กดํฉ๋๋ค. ๊ฐ๋ณ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ์ธ์๋ก ์ ๋ฌํ๋ ๊ฒฝ์ฐ ํด๋น ๋ฐ์ดํฐ ๊ตฌ์กฐ์ ๋ํ ๋ณ๊ฒฝ ์ฌํญ์ ์บ์ ํค์ ๋ฐ์๋์ง ์์ ์๊ธฐ์น ์์ ๋์์ด ๋ฐ์ํ ์ ์์ต๋๋ค. ํญ์ ๋ถ๋ณ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๊ฑฐ๋ ๊ฐ๋ณ ๋ฐ์ดํฐ๋ฅผ ์บ์๋ ํจ์์ ์ ๋ฌํ๊ธฐ ์ ์ ๋ณต์ฌ๋ณธ์ ๋ง๋์ญ์์ค.
์บ์ฑ ์ ๋ต ํ ์คํธ
์บ์ฑ ์ ๋ต์ด ์์๋๋ก ์๋ํ๋์ง ์ฒ ์ ํ ํ ์คํธํ์ญ์์ค. ์บ์๋ ํจ์๊ฐ ์ฌ๋ฐ๋ฅธ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๊ณ ์บ์๊ฐ ์ ์ ํ๊ฒ ๋ฌดํจํ๋๋์ง ํ์ธํ๊ธฐ ์ํด ๋จ์ ํ ์คํธ๋ฅผ ์์ฑํ์ญ์์ค. ํตํฉ ํ ์คํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ค์ ์๋๋ฆฌ์ค๋ฅผ ์๋ฎฌ๋ ์ด์ ํ๊ณ ์บ์ฑ์ ์ฑ๋ฅ ์ํฅ์ ์ธก์ ํ์ญ์์ค.
๊ฒฐ๋ก
React cache ํจ์๋ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ๋ฅผ ์ต์ ํํ๊ณ ์ ์ญ ์ ํ๋ฆฌ์ผ์ด์
์์ ์๋ฒ ์ปดํฌ๋ํธ์ ์ฑ๋ฅ์ ํฅ์์ํค๋ ๊ท์คํ ๋๊ตฌ์
๋๋ค. cache๊ฐ ์๋ํ๋ ๋ฐฉ์์ ์ดํดํ๊ณ , ๊ณ ๊ธ ์บ์ฑ ์ ๋ต์ ๊ตฌํํ๋ฉฐ, ์ผ๋ฐ์ ์ธ ํจ์ ์ ํผํจ์ผ๋ก์จ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์ํํ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ ํ์ฅ ๊ฐ๋ฅํ๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋๋ฉฐ ํจ์จ์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ์ ํ๋ฆฌ์ผ์ด์
์ ํน์ ์๊ตฌ ์ฌํญ์ ์ ์คํ๊ฒ ๊ณ ๋ คํ๊ณ ์ด์ ๋ง๊ฒ ์บ์ฑ ์ ๋ต์ ์กฐ์ ํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค.
์ด๋ฌํ ์ ๋ต์ ๊ตฌํํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ์ฑ๋ฅ๋ฟ๋ง ์๋๋ผ ํ์ฅ ๊ฐ๋ฅํ๊ณ ์ ์ง ๊ด๋ฆฌ ๊ฐ๋ฅํ React ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์์ผ๋ฉฐ, ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค. ํจ์จ์ ์ธ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ๋ ๋ ์ด์ ์ฌํ ์๊ฐ์ด ์๋๋ผ ํ๋ ์น ๊ฐ๋ฐ์ ์ค์ํ ๊ตฌ์ฑ ์์์ ๋๋ค.