웹앱 성능 최적화 완벽 가이드 - 렌더링부터 코딩 최적화까지

// React에서 useMemo 사용 예시 const expensiveCalculation = useMemo(() => { // 복잡한 계산 로직 return heavyComputation(data); }, [data]); // data가 변경될 때만 재계산

const handleClick = useCallback(() => { // 클릭 처리 로직 }, [dependency]); // dependency가 변경될 때만 함수 재생성

const MyComponent = React.memo(function MyComponent({ name, age }) { return <div>{name}님의 나이는 {age}살입니다</div>; });

const MyComponent = React.memo( function MyComponent(props) { // 컴포넌트 로직 }, (prevProps, nextProps) => { // true를 반환하면 리렌더링 건너뛰기 return prevProps.id === nextProps.id; } );

// 나쁜 예 - 전체 폼이 리렌더링 const Form = () => { const [formData, setFormData] = useState({ name: '', email: '', age: '' }); }; // 좋은 예 - 각 필드가 독립적으로 관리 const NameField = () => { const [name, setName] = useState(''); };

// UserContext와 ThemeContext를 분리 const UserProvider = ({ children }) => { /* ... */ }; const ThemeProvider = ({ children }) => { /* ... */ };

// 인덱스 대신 고유한 ID 사용 items.map(item => <Item key={item.id} />)

function debounce(func, delay) { let timeoutId; return function(...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(this, args), delay); }; } // 사용 예시 const searchAPI = debounce((query) => { // API 호출 로직 }, 500); // 0.5초 대기

function useDebounce(value, delay) { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value); }, delay); return () => clearTimeout(handler); }, [value, delay]); return debouncedValue; }

function throttle(func, limit) { let inThrottle; return function(...args) { if (!inThrottle) { func.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; }

const handleScroll = throttle(() => { // 스크롤 위치 계산 및 처리 }, 100); // 100ms마다 실행 window.addEventListener('scroll', handleScroll);

const itemsPerPage = 20; const currentItems = data.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage );

const InfiniteScroll = () => { const [items, setItems] = useState([]); const [page, setPage] = useState(1); const loadMore = useCallback(() => { // 다음 페이지 데이터 로드 fetchData(page + 1).then(newItems => { setItems(prev => [...prev, ...newItems]); setPage(prev => prev + 1); }); }, [page]); // Intersection Observer로 스크롤 감지 };

useEffect(() => { const handleResize = () => { /* ... */ }; window.addEventListener('resize', handleResize); // cleanup 함수에서 반드시 제거 return () => { window.removeEventListener('resize', handleResize); }; }, []);

useEffect(() => { const timer = setInterval(() => { // 주기적 작업 }, 1000); return () => clearInterval(timer); }, []);

useEffect(() => { const subscription = dataSource.subscribe(handleChange); return () => { subscription.unsubscribe(); }; }, []);

// 나쁜 예 - 순환 참조 const obj1 = {}; const obj2 = {}; obj1.ref = obj2; obj2.ref = obj1; // 좋은 예 - WeakMap 사용 const weakMap = new WeakMap(); weakMap.set(obj1, obj2);

// 나쁜 예 window.myGlobalData = hugeArray; // 좋은 예 - 모듈 스코프 사용 const moduleData = hugeArray; export { moduleData };

let bigData = processLargeDataset(); // 사용 완료 후 bigData = null; // 명시적으로 참조 해제

const Home = lazy(() => import('./pages/Home')); const About = lazy(() => import('./pages/About')); function App() { return ( <Suspense fallback={<Loading />}> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Suspense> ); }

const HeavyComponent = lazy(() => import('./HeavyComponent')); function MyComponent() { const [showHeavy, setShowHeavy] = useState(false); return ( <> <button onClick={() => setShowHeavy(true)}> 무거운 컴포넌트 보기 </button> {showHeavy && ( <Suspense fallback={<div>로딩중...</div>}> <HeavyComponent /> </Suspense> )} </> ); }

button.addEventListener('click', async () => { const module = await import('./heavyModule.js'); module.doSomething(); });

const LazyImage = ({ src, alt }) => { const [imageSrc, setImageSrc] = useState(null); const imgRef = useRef(); useEffect(() => { const observer = new IntersectionObserver( entries => { entries.forEach(entry => { if (entry.isIntersecting) { setImageSrc(src); observer.unobserve(entry.target); } }); } ); if (imgRef.current) { observer.observe(imgRef.current); } return () => observer.disconnect(); }, [src]); return <img ref={imgRef} src={imageSrc} alt={alt} />; };

const LazySection = () => { const [isVisible, setIsVisible] = useState(false); const sectionRef = useRef(); useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true); } }, { threshold: 0.1 } ); if (sectionRef.current) { observer.observe(sectionRef.current); } }, []); return ( <div ref={sectionRef}> {isVisible && <ExpensiveComponent />} </div> ); };

// 나쁜 예 - 전체 라이브러리 import import _ from 'lodash'; // 좋은 예 - 필요한 함수만 import import debounce from 'lodash/debounce';

// package.json { "sideEffects": false, // 또는 특정 파일만 지정 "sideEffects": ["*.css", "*.scss"] }

// webpack.config.js module.exports = { mode: 'production', optimization: { usedExports: true, minimize: true, sideEffects: false } };

// 서버 응답 헤더 res.setHeader('Cache-Control', 'public, max-age=31536000'); // 1년 res.setHeader('ETag', '"123456"'); // 버전 관리

self.addEventListener('install', event => { event.waitUntil( caches.open('v1').then(cache => { return cache.addAll([ '/', '/styles/main.css', '/scripts/app.js' ]); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(response => { return response || fetch(event.request); }) ); });

// 데이터 캐싱 const getCachedData = (key) => { const cached = localStorage.getItem(key); if (cached) { const { data, timestamp } = JSON.parse(cached); const isExpired = Date.now() - timestamp > 3600000; // 1시간 if (!isExpired) return data; } return null; }; const setCachedData = (key, data) => { localStorage.setItem(key, JSON.stringify({ data, timestamp: Date.now() })); };

<!-- 라이브러리 CDN 사용 --> <script src="<https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js>"></script> <!-- 이미지 CDN --> <img src="<https://cdn.example.com/images/hero.jpg>" />

// 버전 관리로 캐시 갱신 const assetUrl = `https://cdn.example.com/app.js?v=${VERSION}`;

// key 속성으로 요소 추적 {items.map(item => ( <ListItem key={item.id} // 안정적인 고유 키 사용 data={item} /> ))}

// 나쁜 예 - 매번 새로운 컴포넌트 생성 {isVisible ? <Component /> : null} // 좋은 예 - display 속성 활용 <Component style={{ display: isVisible ? 'block' : 'none' }} />

// 나쁜 예 - 여러 번 리플로우 발생 element.style.left = '10px'; element.style.top = '10px'; element.style.width = '100px'; // 좋은 예 - 한 번에 처리 element.style.cssText = 'left: 10px; top: 10px; width: 100px;';

/* transform과 opacity는 GPU에서 처리 */ .animated { transform: translateX(100px); opacity: 0.8; will-change: transform, opacity; }

// 나쁜 예 - 읽기와 쓰기 반복 elements.forEach(el => { el.style.height = el.offsetHeight + 10 + 'px'; }); // 좋은 예 - 읽기 후 쓰기 const heights = elements.map(el => el.offsetHeight); elements.forEach((el, i) => { el.style.height = heights[i] + 10 + 'px'; });

<!DOCTYPE html> <html> <head> <!-- 중요한 CSS는 인라인으로 --> <style> .critical { /* 초기 렌더링에 필요한 스타일 */ } </style> <!-- 나머지 CSS는 비동기 로드 --> <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'"> <!-- 중요하지 않은 JS는 defer --> <script defer src="app.js"></script> </head> <body> <!-- 콘텐츠 --> <!-- 분석 스크립트는 최하단 --> <script async src="analytics.js"></script> </body> </html>

<!-- DNS 미리 연결 --> <link rel="dns-prefetch" href="//api.example.com"> <!-- 연결 미리 설정 --> <link rel="preconnect" href="//api.example.com"> <!-- 리소스 미리 가져오기 --> <link rel="prefetch" href="next-page.js"> <!-- 중요 리소스 미리 로드 --> <link rel="preload" href="font.woff2" as="font" crossorigin>