MVC Pattern 성능 최적화 가이드

MVC 패턴의 성능을 극대화하기 위한 고급 최적화 기법을 다룹니다. 실무에서 바로 적용 가능한 캐싱, 레이지 로딩, 배치 처리 등의 전략을 코드와 함께 제공합니다.

---

---

들어가며

이 글에서는 MVC Pattern 성능 최적화 가이드에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Model_데이터_캐싱_전략
2. Controller_배치_요청_처리
3. View_가상_스크롤링_구현
4. Model_레이지_로딩_관계
5. Controller_응답_데이터_압축
6. View_이벤트_위임_패턴
7. Model_쿼리_결과_메모이제이션
8. Controller_요청_쓰로틀링
9. View_DOM_조작_최적화
10. Model_인덱스_최적화_전략
11. Controller_응답_캐시_헤더_설정
12. View_렌더링_디바운싱

---

1. Model 데이터 캐싱 전략

개요

Model에서 자주 조회되는 데이터를 메모리에 캐싱하여 DB 호출을 최소화하고 응답 속도를 향상시킵니다.

코드 예제

class UserModel {
  static cache = new Map();

  static async getById(id) {
    if (this.cache.has(id)) return this.cache.get(id);
    const user = await db.users.findById(id);
    this.cache.set(id, user);
    return user;
  }
}

설명

Map을 사용한 간단한 캐시 레이어로 동일한 사용자 데이터를 반복 조회할 때 DB 접근을 건너뛰어 성능을 개선합니다.

---

2. Controller 배치 요청 처리

개요

여러 개의 개별 요청을 하나로 묶어 처리함으로써 네트워크 오버헤드와 처리 시간을 대폭 줄입니다.

코드 예제

class BatchController {
  queue = [];

  async addRequest(req) {
    this.queue.push(req);
    if (this.queue.length >= 10) return this.flush();
    setTimeout(() => this.flush(), 100);
  }

  async flush() {
    const batch = this.queue.splice(0);
    await processMultiple(batch);
  }
}

설명

요청을 큐에 모았다가 일정 개수 또는 시간이 지나면 한 번에 처리하여 리소스 사용을 최적화합니다.

---

3. View 가상 스크롤링 구현

개요

대량의 데이터를 렌더링할 때 화면에 보이는 항목만 DOM에 추가하여 메모리와 렌더링 성능을 최적화합니다.

코드 예제

class VirtualListView {
  render(items, viewport) {
    const visibleStart = Math.floor(viewport.scrollTop / itemHeight);
    const visibleEnd = visibleStart + viewport.height / itemHeight;
    const visible = items.slice(visibleStart, visibleEnd);

    this.container.innerHTML = visible.map(item =>
      `<div style="top:${visibleStart * itemHeight}px">${item}</div>`
    ).join('');
  }
}

설명

전체 데이터 중 현재 스크롤 위치에서 보이는 영역의 항목만 렌더링하여 수천 개의 데이터도 부드럽게 표시합니다.

---

4. Model 레이지 로딩 관계

개요

연관된 데이터를 필요할 때만 로드하여 초기 쿼리 부담을 줄이고 불필요한 데이터 전송을 방지합니다.

코드 예제

class PostModel {
  constructor(data) {
    this.id = data.id;
    this.title = data.title;
    this._comments = null;
  }

  async getComments() {
    if (!this._comments) {
      this._comments = await db.comments.findByPostId(this.id);
    }
    return this._comments;
  }
}

설명

comments는 실제로 필요할 때만 DB에서 조회하여 Post 조회 시 불필요한 JOIN이나 추가 쿼리를 방지합니다.

---

5. Controller 응답 데이터 압축

개요

API 응답을 압축하여 네트워크 전송량을 줄이고 클라이언트의 데이터 수신 속도를 높입니다.

코드 예제

class ApiController {
  async getUsers(req, res) {
    const users = await UserModel.getAll();
    const compressed = JSON.stringify(users);

    res.setHeader('Content-Encoding', 'gzip');
    res.send(compress(compressed));
  }
}

설명

JSON 데이터를 gzip으로 압축하면 보통 70-80% 크기 감소로 모바일 환경에서 특히 효과적입니다.

---

6. View 이벤트 위임 패턴

개요

개별 요소마다 이벤트 리스너를 등록하는 대신 부모 요소 하나에만 등록하여 메모리 사용량을 크게 줄입니다.

코드 예제

class ListView {
  constructor(container) {
    container.addEventListener('click', (e) => {
      if (e.target.matches('.delete-btn')) {
        this.handleDelete(e.target.dataset.id);
      }
    });
  }

  handleDelete(id) {
    // 삭제 로직
  }
}

설명

수백 개의 항목이 있어도 이벤트 리스너는 하나만 등록되어 메모리 효율이 높고 동적으로 추가된 요소도 자동으로 처리됩니다.

---

7. Model 쿼리 결과 메모이제이션

개요

동일한 파라미터로 호출되는 쿼리의 결과를 캐싱하여 중복 계산을 방지하고 응답 속도를 향상시킵니다.

코드 예제

function memoize(fn) {
  const cache = new Map();
  return async (...args) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = await fn(...args);
    cache.set(key, result);
    return result;
  };
}

const getTopPosts = memoize(async (limit) =>
  await db.posts.find().sort('-views').limit(limit)
);

설명

함수 호출 인자를 키로 사용해 결과를 저장하므로 같은 조건의 쿼리는 한 번만 실행됩니다.

---

8. Controller 요청 쓰로틀링

개요

짧은 시간에 반복되는 요청을 제한하여 서버 부하를 줄이고 불필요한 처리를 방지합니다.

코드 예제

function throttle(fn, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      return fn.apply(this, args);
    }
  };
}

const searchController = throttle(async (query) => {
  return await SearchModel.find(query);
}, 300);

설명

사용자가 검색어를 빠르게 입력해도 300ms마다 한 번씩만 실제 검색이 실행되어 API 호출을 대폭 줄입니다.

---

9. View DOM 조작 최적화

개요

DOM 변경을 DocumentFragment에 모아서 한 번에 적용하여 리플로우/리페인트 횟수를 최소화합니다.

코드 예제

class OptimizedView {
  renderItems(items) {
    const fragment = document.createDocumentFragment();

    items.forEach(item => {
      const div = document.createElement('div');
      div.textContent = item.name;
      fragment.appendChild(div);
    });

    this.container.appendChild(fragment);
  }
}

설명

100개의 요소를 추가할 때 DocumentFragment를 사용하면 DOM에 1번만 접근하여 렌더링 성능이 크게 향상됩니다.

---

10. Model 인덱스 최적화 전략

개요

자주 조회되는 필드에 인덱스를 추가하여 데이터베이스 쿼리 속도를 극적으로 개선합니다.

코드 예제

class UserModel {
  static async createIndexes() {
    await db.users.createIndex({ email: 1 }, { unique: true });
    await db.users.createIndex({ createdAt: -1 });
    await db.users.createIndex({ 'profile.city': 1, age: 1 });
  }

  static async findByEmail(email) {
    return await db.users.findOne({ email }); // 인덱스 활용
  }
}

설명

인덱스를 통해 수백만 건의 데이터에서도 밀리초 단위로 검색이 가능하며, 복합 인덱스로 다중 조건 쿼리도 최적화합니다.

---

11. Controller 응답 캐시 헤더 설정

개요

HTTP 캐시 헤더를 적절히 설정하여 클라이언트가 변경되지 않은 데이터를 재사용하도록 합니다.

코드 예제

class StaticController {
  async getPublicData(req, res) {
    const data = await Model.getPublicData();

    res.setHeader('Cache-Control', 'public, max-age=3600');
    res.setHeader('ETag', generateETag(data));

    if (req.headers['if-none-match'] === generateETag(data)) {
      return res.status(304).end();
    }
    res.json(data);
  }
}

설명

데이터가 변경되지 않았으면 304 응답으로 전송량을 0으로 만들고, 변경되었을 때만 실제 데이터를 보내 네트워크 효율을 극대화합니다.

---

12. View 렌더링 디바운싱

개요

빠르게 연속되는 렌더링 요청을 지연시켜 마지막 요청만 처리함으로써 불필요한 UI 업데이트를 방지합니다.

코드 예제

function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), delay);
  };
}

class SearchView {
  constructor() {
    this.render = debounce(this.render, 300);
  }

  render(results) {
    this.container.innerHTML = results.map(r => `<div>${r}</div>`).join('');
  }
}

설명

사용자 입력이 멈춘 후 300ms 뒤에만 화면을 업데이트하여 타이핑 중 발생하는 수십 번의 렌더링을 1번으로 줄입니다.

---

마치며

이번 글에서는 MVC Pattern 성능 최적화 가이드에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#JavaScript #MVC #Performance #Optimization #Caching