💻 Dev

🛠️ 처음부터 만드는 Memoize — 함수 결과를 캐싱하기

개념


Memoize는 함수의 실행 결과를 기억했다가, 같은 입력이 들어올 때 다시 계산하지 않고 캐시된 결과를 반환합니다.
```javascript
const memoize = (fn) => {
const cache = new Map();
return (...args) => {
const key = JSON.stringify(args);
if (cache.has(key)) {
console.log('캐시 히트!');
return cache.get(key);
}
console.log('계산 중...');
const result = fn(...args);
cache.set(key, result);
return result;
};
};
// 사용 예제
const expensiveCalc = (n) => {
let sum = 0;
for (let i = 0; i < n; i++) sum += i;
return sum;
};
const memoized = memoize(expensiveCalc);
memoized(1000); // "계산 중..." → 499500
memoized(1000); // "캐시 히트!" → 499500 (바로 반환)
```

심화: 캐시 크기 제한


캐시가 무한정 커지는 것을 방지하려면 LRU(Least Recently Used) 패턴을 적용하세요:
```javascript
const memoizeWithLimit = (fn, limit = 10) => {
const cache = new Map();
return (...args) => {
const key = JSON.stringify(args);
if (cache.has(key)) {
cache.delete(key);
cache.set(key, fn(...args));
return cache.get(key);
}
if (cache.size >= limit) {
const firstKey = cache.keys().next().value;
cache.delete(firstKey);
}
const result = fn(...args);
cache.set(key, result);
return result;
};
};
```

실무 팁


  • API 응답 캐싱: 같은 데이터를 여러 번 요청할 때

  • 복잡한 계산: 피보나치, 팩토리얼 같은 재귀 함수

  • 주의: 부작용(side effect)이 있는 함수는 메모이제이션하지 마세요

  • 타입스크립트: 캐시 키 타입을 `WeakMap`으로 관리하면 더 효율적입니다
  • 💬 0
    👁 0 views

    Comments (0)

    💬

    No comments yet.

    Be the first to comment!