🛠️ 처음부터 만드는 Memoize — 함수 결과를 캐싱해서 성능 높이기
반복 계산되는 함수 결과를 메모리에 저장해두고 재사용하는 패턴입니다.
```javascript
const memoize = (fn) => {
const cache = new Map();
return function(...args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
return cache.get(key);
}
const result = fn.apply(this, args);
cache.set(key, result);
return result;
};
};
```
```javascript
// 느린 피보나치 (메모이제이션 전)
const fib = (n) => {
if (n <= 1) return n;
return fib(n - 1) + fib(n - 2);
};
// 메모이제이션 적용
const memoFib = memoize(fib);
console.time('memoized');
console.log(memoFib(40)); // ~1ms
console.timeEnd('memoized');
```
1. Pure Function만 사용: 같은 인자로 항상 같은 결과를 반환해야 합니다
2. 메모리 관리: 캐시가 계속 증가하므로 필요시 LRU 캐시 구현
3. 복잡한 인자: `JSON.stringify`가 느릴 수 있으니 WeakMap 사용 고려
```typescript
function memoize any>(fn: T): T {
const cache = new Map();
return ((...args: any[]) => {
const key = JSON.stringify(args);
if (cache.has(key)) return cache.get(key);
const result = fn(...args);
cache.set(key, result);
return result;
}) as T;
}
```
API 응답 캐싱, 복잡한 계산, 렌더링 성능 최적화에 유용합니다. [MDN - Memoization](https://developer.mozilla.org/en-US/docs/Glossary/Memoization)
기본 구현
```javascript
const memoize = (fn) => {
const cache = new Map();
return function(...args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
return cache.get(key);
}
const result = fn.apply(this, args);
cache.set(key, result);
return result;
};
};
```
실전 예제
```javascript
// 느린 피보나치 (메모이제이션 전)
const fib = (n) => {
if (n <= 1) return n;
return fib(n - 1) + fib(n - 2);
};
// 메모이제이션 적용
const memoFib = memoize(fib);
console.time('memoized');
console.log(memoFib(40)); // ~1ms
console.timeEnd('memoized');
```
주의사항
1. Pure Function만 사용: 같은 인자로 항상 같은 결과를 반환해야 합니다
2. 메모리 관리: 캐시가 계속 증가하므로 필요시 LRU 캐시 구현
3. 복잡한 인자: `JSON.stringify`가 느릴 수 있으니 WeakMap 사용 고려
TypeScript 버전
```typescript
function memoize
const cache = new Map();
return ((...args: any[]) => {
const key = JSON.stringify(args);
if (cache.has(key)) return cache.get(key);
const result = fn(...args);
cache.set(key, result);
return result;
}) as T;
}
```
API 응답 캐싱, 복잡한 계산, 렌더링 성능 최적화에 유용합니다. [MDN - Memoization](https://developer.mozilla.org/en-US/docs/Glossary/Memoization)
👁 0 views
Comments (0)
💬
No comments yet.
Be the first to comment!