SK 행복앱 kong

// components/VirtualList.js — 대용량 리스트 가상 스크롤
export default {
  props: {
    items: { type: Array, required: true },
    itemHeight: { type: Number, default: 56 },
  },
  data: () => ({ scrollTop: 0, viewportH: 0 }),
  computed: {
    start() {
      return Math.floor(this.scrollTop / this.itemHeight);
    },
    // 보이는 구간 + 버퍼만 렌더 — 수천 건도 DOM은 수십 개
    visibleItems() {
      const extra = Math.ceil(this.viewportH / this.itemHeight) + 4;
      return this.items.slice(this.start, this.start + extra);
    },
    // 잘라낸 윗부분만큼 패딩으로 스크롤 위치 보정
    offsetY() {
      return this.start * this.itemHeight;
    },
  },
  mounted() {
    this.viewportH = this.$el.clientHeight;
  },
  methods: {
    onScroll(e) {
      this.scrollTop = e.target.scrollTop;
    },
  },
};

포트폴리오 설명을 위해 NDA 범위 안에서 재구성한 코드 예시입니다. 실제 저장소 원문이나 고객사 기밀 정보는 포함하지 않았습니다.