<div id="container">
  <h1>안녕하세요</h1>
  <p>DOM 공부 중입니다</p>
</div>

const container = document.getElementById('container');
const heading = container.querySelector('h1');
heading.textContent = '반갑습니다'; // 텍스트 변경
heading.style.color = 'blue'; // 스타일 변경

🔍 DOM 조작이 왜 느릴까?

⚠️ 성능 킬러: Reflow를 유발하는 작업들

// 🚫 나쁜 예: 반복문 안에서 레이아웃 속성 읽기
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = elements[i].offsetWidth + 10 + 'px';
  // offsetWidth를 읽을 때마다 강제로 레이아웃 계산 발생!
}

// ✅ 좋은 예: 먼저 읽고, 나중에 쓰기
const widths = [];
for (let i = 0; i < elements.length; i++) {
  widths[i] = elements[i].offsetWidth; // 읽기 단계
}
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = widths[i] + 10 + 'px'; // 쓰기 단계
}

🎨 가상 DOM은 어떻게 작동할까?

// React 컴포넌트
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

// todos 배열이 변경되면?
// 1. 새로운 가상 DOM 트리 생성
// 2. 이전 트리와 비교 (Diffing)
// 3. 변경된 <li> 요소만 실제 DOM에서 업데이트!

🔬 Diffing 알고리즘 깊이 파헤치기

// 🚫 나쁜 예: key 없이 리스트 렌더링
{items.map(item => (
  <div>{item.name}</div>
))}
// 항목이 추가/삭제되면 모든 요소를 다시 렌더링!

// ✅ 좋은 예: key 사용
{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}
// 변경된 항목만 정확히 업데이트!

// 🚫 최악의 예: index를 key로 사용
{items.map((item, index) => (
  <div key={index}>{item.name}</div>
))}
// 순서가 바뀌면 모든 요소가 다시 렌더링될 수 있어!

🧪 테스트 시나리오

💡 결과 분석

🎯 실전 벤치마크 코드

// 순수 DOM 조작 방식
function pureDOM_update() {
  const start = performance.now();
  
  const list = document.getElementById('list');
  for (let i = 0; i < 100; i++) {
    const item = list.children[i];
    item.textContent = `Updated ${i}`;
    item.style.backgroundColor = '#f0f0f0';
  }
  
  const end = performance.now();
  console.log(`Pure DOM: ${end - start}ms`);
}

// React 방식 (가상 DOM)
function ReactComponent() {
  const [items, setItems] = useState(initialItems);
  
  const updateItems = () => {
    const start = performance.now();
    
    setItems(prevItems => 
      prevItems.map((item, i) => 
        i < 100 ? { ...item, text: `Updated ${i}`, bg: '#f0f0f0' } : item
      )
    );
    
    // React는 비동기로 업데이트하므로 useEffect에서 측정
    requestAnimationFrame(() => {
      const end = performance.now();
      console.log(`React: ${end - start}ms`);
    });
  };
  
  return (
    <ul>
      {items.map(item => (
        <li key={item.id} style={{backgroundColor: item.bg}}>
          {item.text}
        </li>
      ))}
    </ul>
  );
}

1️⃣ DocumentFragment 활용하기

// 🚫 나쁜 예: 반복문에서 직접 DOM에 추가
const list = document.getElementById('list');
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  list.appendChild(li); // 1000번의 Reflow 발생!
}

// ✅ 좋은 예: DocumentFragment 사용
const list = document.getElementById('list');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li); // 메모리에서만 작업
}

list.appendChild(fragment); // 단 1번의 Reflow!

2️⃣ 배치 스타일 변경

// 🚫 나쁜 예: 개별 스타일 변경
element.style.width = '100px';   // Reflow
element.style.height = '100px';  // Reflow
element.style.border = '1px solid black'; // Reflow

// ✅ 좋은 예 1: cssText 사용
element.style.cssText = 'width: 100px; height: 100px; border: 1px solid black;';

// ✅ 좋은 예 2: 클래스 사용 (가장 권장!)
element.className = 'styled-box';

// CSS
// .styled-box {
//   width: 100px;
//   height: 100px;
//   border: 1px solid black;
// }

3️⃣ 요소를 숨기고 작업하기

const element = document.getElementById('complex-element');

// 요소를 숨김 (display: none은 레이아웃에서 제거)
element.style.display = 'none';

// 복잡한 DOM 조작 수행
for (let i = 0; i < 100; i++) {
  // 여러 자식 요소 추가/수정
  // 이 동안에는 Reflow가 발생하지 않음!
}

// 다시 표시
element.style.display = 'block'; // 이때 한 번만 Reflow

4️⃣ 읽기와 쓰기 분리하기

// 🚫 나쁜 예: 읽기와 쓰기가 섞여있음
const elements = document.querySelectorAll('.item');
elements.forEach(el => {
  const width = el.offsetWidth; // 읽기 → 강제 Reflow
  el.style.width = width * 1.5 + 'px'; // 쓰기
  const height = el.offsetHeight; // 읽기 → 강제 Reflow
  el.style.height = height * 1.5 + 'px'; // 쓰기
});

// ✅ 좋은 예: 읽기와 쓰기 분리
const elements = document.querySelectorAll('.item');
const dimensions = [];

// 1단계: 모든 읽기 작업
elements.forEach(el => {
  dimensions.push({
    width: el.offsetWidth,
    height: el.offsetHeight
  });
});

// 2단계: 모든 쓰기 작업
elements.forEach((el, i) => {
  el.style.width = dimensions[i].width * 1.5 + 'px';
  el.style.height = dimensions[i].height * 1.5 + 'px';
});

5️⃣ 이벤트 위임 (Event Delegation)

// 🚫 나쁜 예: 각 요소에 개별 리스너
const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', handleClick);
});
// 메모리 낭비 + 동적 요소 처리 어려움

// ✅ 좋은 예: 부모에 하나의 리스너
const list = document.getElementById('list');
list.addEventListener('click', (e) => {
  if (e.target.classList.contains('item')) {
    handleClick(e);
  }
});
// 메모리 효율적 + 동적 요소 자동 처리!

let ticking = false;

window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      // 스크롤 처리 로직
      updateScrollPosition();
      ticking = false;
    });
    ticking = true;
  }
});

6️⃣ Debounce와 Throttle

// Debounce: 마지막 호출 후 일정 시간이 지나야 실행
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}

// 사용 예: 검색 입력
const searchInput = document.getElementById('search');
const debouncedSearch = debounce((value) => {
  // API 호출 등
  console.log('Searching for:', value);
}, 300);

searchInput.addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

// Throttle: 일정 시간마다 한 번만 실행
function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func(...args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// 사용 예: 스크롤 이벤트
const throttledScroll = throttle(() => {
  console.log('Scroll position:', window.scrollY);
}, 100);

window.addEventListener('scroll', throttledScroll);

1️⃣ React 최적화 기법

// 🚫 최적화 전: 부모가 리렌더링되면 자식도 무조건 리렌더링
function ChildComponent({ name, age }) {
  console.log('Child rendered!');
  return <div>{name} ({age})</div>;
}

// ✅ 최적화 후: props가 변경될 때만 리렌더링
const ChildComponent = React.memo(({ name, age }) => {
  console.log('Child rendered!');
  return <div>{name} ({age})</div>;
});

// 더 세밀한 제어가 필요하면 두 번째 인자 사용
const ChildComponent = React.memo(
  ({ name, age }) => {
    return <div>{name} ({age})</div>;
  },
  (prevProps, nextProps) => {
    // true를 반환하면 리렌더링 스킵
    return prevProps.name === nextProps.name && 
           prevProps.age === nextProps.age;
  }
);

function ExpensiveComponent({ data }) {
  // 🚫 나쁜 예: 매번 재계산
  const processedData = processLargeData(data);
  
  // ✅ 좋은 예: data가 변경될 때만 재계산
  const processedData = useMemo(
    () => processLargeData(data),
    [data]
  );
  
  // 🚫 나쁜 예: 매번 새로운 함수 생성
  const handleClick = () => {
    console.log('Clicked!');
  };
  
  // ✅ 좋은 예: 함수 재사용
  const handleClick = useCallback(() => {
    console.log('Clicked!');
  }, []); // 의존성 배열이 비어있으면 한 번만 생성
  
  return <ChildComponent data={processedData} onClick={handleClick} />;
}

// react-window 라이브러리 사용 예시
import { FixedSizeList } from 'react-window';

function VirtualizedList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );
  
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

// 10,000개 아이템도 부드럽게 스크롤!

2️⃣ Vue 최적화 기법

<!-- v-once: 한 번만 렌더링, 이후 업데이트 무시 -->
<div v-once>
  <h1>{{ staticTitle }}</h1>
  <p>{{ staticContent }}</p>
</div>

<!-- v-memo: 조건부 메모이제이션 (Vue 3.2+) -->
<div v-memo="[user.id, user.name]">
  <!-- user.id나 user.name이 변경될 때만 업데이트 -->
  <UserProfile :user="user" />
</div>

export default {
  data() {
    return {
      items: [/* 많은 데이터 */]
    };
  },
  
  // 🚫 나쁜 예: methods는 매번 실행
  methods: {
    filteredItems() {
      return this.items.filter(item => item.active);
    }
  },
  
  // ✅ 좋은 예: computed는 캐싱됨
  computed: {
    filteredItems() {
      return this.items.filter(item => item.active);
    }
  }
}

// 템플릿에서
<div v-for="item in filteredItems" :key="item.id">
  {{ item.name }}
</div>

3️⃣ 공통 최적화 전략

// 🚫 최악: key 없음
<div v-for="item in items">{{ item.name }}</div>

// 🚫 나쁨: index를 key로 사용
<div v-for="(item, index) in items" :key="index">
  {{ item.name }}
</div>

// ✅ 좋음: 고유한 ID 사용
<div v-for="item in items" :key="item.id">
  {{ item.name }}
</div>

// ✅ 최고: 복합 key (필요한 경우)
<div v-for="item in items" :key="`${item.category}-${item.id}`">
  {{ item.name }}
</div>

<!-- v-if vs v-show -->

<!-- v-if: DOM에서 완전히 제거/추가 (토글 비용 높음) -->
<div v-if="isVisible">자주 안 바뀌는 내용</div>

<!-- v-show: display 속성만 변경 (토글 비용 낮음) -->
<div v-show="isVisible">자주 바뀌는 내용</div>

<!-- 규칙: 자주 토글되면 v-show, 아니면 v-if -->

1️⃣ Chrome DevTools Performance 탭

2️⃣ React DevTools Profiler

// 프로파일링 코드 추가
import { Profiler } from 'react';

function onRenderCallback(
  id, // 프로파일러 ID
  phase, // "mount" 또는 "update"
  actualDuration, // 렌더링에 걸린 시간
  baseDuration, // 메모이제이션 없이 걸릴 시간
  startTime, // 렌더링 시작 시간
  commitTime, // 커밋 시간
  interactions // 이 업데이트와 관련된 상호작용
) {
  console.log(`${id} took ${actualDuration}ms to render`);
}

function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <YourComponent />
    </Profiler>
  );
}

3️⃣ Lighthouse 사용하기

4️⃣ 커스텀 성능 측정

// Performance API 사용
const start = performance.now();

// 측정하고 싶은 코드
for (let i = 0; i < 1000; i++) {
  document.getElementById('list').appendChild(createItem(i));
}

const end = performance.now();
console.log(`Execution time: ${end - start}ms`);

// Performance Observer 사용 (더 정교한 측정)
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.name}: ${entry.duration}ms`);
  }
});

observer.observe({ entryTypes: ['measure'] });

performance.mark('start-render');
// 렌더링 코드
performance.mark('end-render');
performance.measure('render-time', 'start-render', 'end-render');

📱 케이스 1: 무한 스크롤 피드 최적화

// 1. 가상 스크롤 구현 (react-window 사용)
import { VariableSizeList } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';

function FeedList({ items, loadMore, hasMore }) {
  const itemSizes = useRef({});
  
  const getItemSize = (index) => {
    return itemSizes.current[index] || 200; // 기본 높이
  };
  
  const setItemSize = (index, size) => {
    itemSizes.current[index] = size;
  };
  
  return (
    <InfiniteLoader
      isItemLoaded={(index) => index < items.length}
      itemCount={hasMore ? items.length + 1 : items.length}
      loadMoreItems={loadMore}
    >
      {({ onItemsRendered, ref }) => (
        <VariableSizeList
          height={window.innerHeight}
          itemCount={items.length}
          itemSize={getItemSize}
          onItemsRendered={onItemsRendered}
          ref={ref}
          width="100%"
        >
          {({ index, style }) => (
            <FeedItem
              item={items[index]}
              style={style}
              onResize={(height) => setItemSize(index, height)}
            />
          )}
        </VariableSizeList>
      )}
    </InfiniteLoader>
  );
}

// 2. 이미지 Lazy Loading
function FeedItem({ item, style, onResize }) {
  const imgRef = useRef();
  
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src; // 실제 이미지 로드
            observer.unobserve(img);
          }
        });
      },
      { rootMargin: '50px' } // 50px 전에 미리 로드
    );
    
    if (imgRef.current) {
      observer.observe(imgRef.current);
    }
    
    return () => observer.disconnect();
  }, []);
  
  return (
    <div style={style}>
      <img
        ref={imgRef}
        data-src={item.imageUrl}
        alt={item.title}
        onLoad={(e) => onResize(e.target.height)}
      />
      <p>{item.content}</p>
    </div>
  );
}

// 3. 스크롤 이벤트 최적화
const handleScroll = useCallback(
  throttle(() => {
    // 스크롤 처리 로직
  }, 100),
  []
);

🛒 케이스 2: 대용량 데이터 테이블 최적화

// 1. 서버 사이드 페이지네이션 + 클라이언트 가상화
function OrderTable() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(0);
  const pageSize = 50;
  
  // 서버에서 필요한 데이터만 가져오기
  const fetchData = async (pageNum) => {
    const response = await fetch(
      `/api/orders?page=${pageNum}&size=${pageSize}`
    );
    const newData = await response.json();
    setData(newData);
  };
  
  // 가상 스크롤 적용
  return (
    <VirtualTable
      data={data}
      columns={columns}
      rowHeight={50}
      onPageChange={fetchData}
    />
  );
}

// 2. 정렬/필터링 최적화
function useOptimizedFilter(data, filterConfig) {
  return useMemo(() => {
    // Web Worker로 무거운 필터링 작업 이동
    const worker = new Worker('filter-worker.js');
    
    return new Promise((resolve) => {
      worker.postMessage({ data, filterConfig });
      worker.onmessage = (e) => {
        resolve(e.data);
        worker.terminate();
      };
    });
  }, [data, filterConfig]);
}

// filter-worker.js
self.onmessage = function(e) {
  const { data, filterConfig } = e.data;
  
  const filtered = data.filter(item => {
    // 복잡한 필터링 로직
    return matchesFilter(item, filterConfig);
  });
  
  self.postMessage(filtered);
};

🎮 케이스 3: 실시간 대시보드 최적화

// 1. 컴포넌트 분리 및 메모이제이션
const Dashboard = () => {
  const [realtimeData, setRealtimeData] = useState([]);
  
  return (
    <>
      {/* 실시간 업데이트되는 부분만 분리 */}
      <RealtimeChart data={realtimeData} />
      
      {/* 정적인 부분은 메모이제이션 */}
      <StaticStats />
      <StaticFilters />
    </>
  );
};

// 2. 데이터 업데이트 배치 처리
function useRealtimeData(socketUrl) {
  const [data, setData] = useState([]);
  const bufferRef = useRef([]);
  
  useEffect(() => {
    const socket = new WebSocket(socketUrl);
    
    socket.onmessage = (event) => {
      // 즉시 업데이트하지 않고 버퍼에 저장
      bufferRef.current.push(JSON.parse(event.data));
    };
    
    // 100ms마다 한 번씩 배치 업데이트
    const interval = setInterval(() => {
      if (bufferRef.current.length > 0) {
        setData(prev => [...prev, ...bufferRef.current]);
        bufferRef.current = [];
      }
    }, 100);
    
    return () => {
      socket.close();
      clearInterval(interval);
    };
  }, [socketUrl]);
  
  return data;
}

// 3. 차트 렌더링 최적화
const RealtimeChart = React.memo(({ data }) => {
  // Canvas 사용 (SVG보다 빠름)
  const canvasRef = useRef();
  
  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    
    // requestAnimationFrame으로 부드러운 애니메이션
    let animationId;
    const render = () => {
      drawChart(ctx, data);
      animationId = requestAnimationFrame(render);
    };
    
    render();
    
    return () => cancelAnimationFrame(animationId);
  }, [data]);
  
  return <canvas ref={canvasRef} />;
}, (prev, next) => {
  // 데이터가 실제로 변경되었을 때만 리렌더링
  return prev.data.length === next.data.length;
});

🎯 선택 기준

💼 실무 관점에서의 고려사항

1️⃣ 서버 컴포넌트 (React Server Components)

// 서버 컴포넌트 (Server Component)
// 서버에서만 실행되고, 클라이언트로 HTML만 전송
async function ProductList() {
  // 서버에서 직접 DB 조회 가능!
  const products = await db.products.findMany();
  
  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// 클라이언트 컴포넌트 (Client Component)
'use client'; // 이 지시어로 구분

function AddToCartButton({ productId }) {
  const [isAdding, setIsAdding] = useState(false);
  
  // 클라이언트에서만 실행되는 인터랙티브 로직
  const handleClick = () => {
    setIsAdding(true);
    // ...
  };
  
  return <button onClick={handleClick}>Add to Cart</button>;
}

2️⃣ Islands Architecture (아일랜드 아키텍처)

---
// Astro 예시
import Header from '../components/Header.astro'; // 정적
import BlogPost from '../components/BlogPost.astro'; // 정적
import Comments from '../components/Comments.jsx'; // 인터랙티브
---

<html>
  <Header />
  <BlogPost />
  
  <!-- 이 부분만 JavaScript 로드 -->
  <Comments client:load />
</html>

3️⃣ Resumability (재개 가능성)

// Qwik 예시
import { component$, useSignal } from '@builder.io/qwik';

export const Counter = component$(() => {
  const count = useSignal(0);
  
  return (
    <div>
      <p>Count: {count.value}</p>
      <button onClick$={() => count.value++}>
        Increment
      </button>
    </div>
  );
});

// onClick$의 $는 "이 코드를 나중에 로드해도 돼"라는 의미!

4️⃣ WebAssembly (WASM) 통합

// Rust로 작성된 무거운 로직
// heavy_calculation.rs
#[wasm_bindgen]
pub fn process_large_data(data: &[u8]) -> Vec<u8> {
    // 복잡한 데이터 처리
    // JavaScript보다 10배 빠름!
}

// JavaScript에서 사용
import init, { process_large_data } from './heavy_calculation.wasm';

async function processData(data) {
  await init();
  const result = process_large_data(data);
  return result;
}

🎯 초기 로딩 최적화

⚡ 런타임 성능 최적화

🔍 모니터링 및 측정

📱 모바일 최적화

🛡️ 보안 및 접근성

Q1. 가상 DOM이 항상 빠른가요?

Q2. React vs Vue, 성능 차이가 있나요?

Q3. key를 index로 쓰면 안 되는 이유가 뭔가요?

// 초기 상태
[
  { id: 1, name: 'Alice' },  // index: 0
  { id: 2, name: 'Bob' },    // index: 1
  { id: 3, name: 'Charlie' } // index: 2
]

// Alice를 삭제하면?
[
  { id: 2, name: 'Bob' },    // index: 0 (이전에는 1)
  { id: 3, name: 'Charlie' } // index: 1 (이전에는 2)
]

Q4. useMemo와 useCallback을 언제 써야 하나요?

Q5. 번들 크기를 줄이는 가장 효과적인 방법은?

// 동적 import 사용
const HeavyComponent = lazy(() => import('./HeavyComponent'));

Q6. 재능넷에서 프리랜서로 일할 때 성능 최적화 요구사항이 있나요?

📖 필독 문서

🛠️ 유용한 도구들

🎯 실습 프로젝트 아이디어

💡 다음 단계