7장_심화_사례

<Button onClick={handleClick}>클릭</Button>

┌─────────────────────────────────┐ │ JSX Syntax (프로토콜) │ ← 언어 독립적 사양 │ <div>{expression}</div> │ └──────────┬──────────────────────┘ │ 파싱 ┌──────────▼──────────────────────┐ │ AST (추상 구문 트리) │ ← 중간 표현 (What) │ { type: 'div', │ │ children: [expression] } │ └──────────┬──────────────────────┘ │ 변환 (언어마다 다름) ┌──────────▼──────────────────────┐ │ Target Language Code │ ← 언어별 구현 (How) │ JS: React.createElement() │ │ Rust: html! macro │ │ Python: h() function │ └──────────┬──────────────────────┘ │ 실행 ┌──────────▼──────────────────────┐ │ Runtime (VDOM/HTML) │ └─────────────────────────────────┘

// JSX가 이렇게 변환됨 React.createElement(Button, { onClick: handleClick }, "클릭");

// 같은 구조, 다른 문법 html! { <button onclick={handleClick}>{ "클릭" }</button> }

# 같은 구조, 다른 문법 html.Button("클릭", id="btn", n_clicks=0)

[Server] [Client] Server Component │ 실행 ▼ JSX 객체 │ 직렬화 (RSC Payload) ▼ ─────────────────────────────────▶ 역직렬화 │ ▼ React Element

/* Clearfix 핵 - 모든 컨테이너마다 필요 */ .container::after { content: ""; display: table; clear: both; } .left { float: left; width: 30%; } .right { float: right; width: 70%; }

// 같은 높이 맞추기 - CSS로 불가능해서 JS 필요 function equalizeHeights(elements) { const maxHeight = Math.max(...elements.map(el => el.offsetHeight)); elements.forEach(el => el.style.height = maxHeight + 'px'); }

/* 의도만 선언 - 플랫폼이 복잡도 흡수 */ .container { display: grid; grid-template-columns: 3fr 7fr; align-items: stretch; /* 높이 자동 맞춤 */ }

Float 시대: 개발자 → clearfix 관리 + JS 높이 계산 → 레이아웃 Grid: 개발자 → 의도 선언 → 브라우저 레이아웃 엔진

// 수동 애니메이션 구현 function animate(element, from, to, duration) { const start = performance.now(); function easeInOut(t) { // easing 함수 직접 구현 return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; } function frame(time) { const progress = (time - start) / duration; const current = from + (to - from) * easeInOut(progress); element.style.transform = `translateX(${current}px)`; if (progress < 1) { requestAnimationFrame(frame); // 매 프레임 JS 실행 } } requestAnimationFrame(frame); }

// 선언만 하면 끝 element.animate([ { transform: 'translateX(0)' }, { transform: 'translateX(100px)' } ], { duration: 1000, easing: 'ease-in-out' });

rAF 시대: JS 스레드 ──매 프레임 계산──▶ 렌더링 ──▶ 화면 Web Anim: 선언 ────────────────────▶ GPU ────▶ 화면

// 콜백 지옥 시대 const xhr = new XMLHttpRequest(); xhr.open('GET', '/api/user'); xhr.onload = function() { if (xhr.status === 200) { const user = JSON.parse(xhr.responseText); // 중첩된 요청... 지옥의 시작 const xhr2 = new XMLHttpRequest(); xhr2.open('GET', `/api/posts/${user.id}`); xhr2.onload = function() { if (xhr2.status === 200) { const posts = JSON.parse(xhr2.responseText); // 또 중첩... } }; xhr2.send(); } }; xhr.send();

// Promise 기반 - 상태 머신 숨김 const user = await fetch('/api/user').then(r => r.json()); const posts = await fetch(`/api/posts/${user.id}`).then(r => r.json());

// What만 선언 const { data, isLoading, error } = useQuery({ queryKey: ['users'], queryFn: fetchUsers });

XHR: 개발자 → 상태 머신 관리 → 데이터 fetch: 개발자 → Promise → 브라우저가 네트워크 처리 React Query: 개발자 → What 선언 → 라이브러리가 모든 것 처리

// 수동 폼 유효성 검사 function validateEmail(email) { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 정규식 반복 작성 return re.test(email); } function validateForm() { const email = document.getElementById('email'); if (!validateEmail(email.value)) { showError('Invalid email'); // 에러 메시지 하드코딩 (국제화 안 됨) return false; } // 다른 필드들도 각각 검증... } function showError(msg) { // 에러 UI 직접 구현... // 접근성? 스크린 리더? 직접 처리해야 함 }

<!-- 플랫폼이 제공하는 유효성 검사 --> <input type="email" required/> <input type="url" pattern="https://.*"/> <input type="number" min="0" max="100"/>

// 스크롤 위치 수동 계산 function throttle(fn, delay) { let last = 0; return function(...args) { const now = Date.now(); if (now - last >= delay) { last = now; fn.apply(this, args); } }; } window.addEventListener('scroll', throttle(() => { const scrolled = window.scrollY; const windowHeight = window.innerHeight; const docHeight = document.body.offsetHeight; // 바닥 근처인지 계산 if (scrolled + windowHeight >= docHeight - 100) { loadMore(); // 무한 스크롤 } }, 100));

// 플랫폼이 최적화된 관찰 제공 const observer = new IntersectionObserver(entries => { if (entries[0].isIntersecting) { loadMore(); } }); observer.observe(sentinel); // 바닥의 센티넬 요소 관찰

// 수동 컴포넌트 시스템 $.fn.myComponent = function(options) { return this.each(function() { // 복잡한 초기화 로직 // 스타일 충돌? 네임스페이스? 직접 관리 }); }; // 사용 $('.container').myComponent({ color: 'red' });

// 플랫폼 레벨 컴포넌트 class MyElement extends HTMLElement { connectedCallback() { this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` <style>/* 스타일 격리 자동 */</style> <slot></slot> `; } } customElements.define('my-element', MyElement);

<!-- 네이티브 HTML처럼 사용 --> <my-element>컨텐츠</my-element>

// Before: 프론트엔드가 조합 + 변환 const user = await fetch('/api/user'); const posts = await fetch(`/api/posts?userId=${user.id}`); const comments = await Promise.all( posts.map(post => fetch(`/api/comments?postId=${post.id}`)) ); const profileData = transformForProfile(user, posts, comments);

// After: 서버(BFF)가 조합 + 변환 const profileData = await fetch('/api/profile');

// Before: 프로젝트에 강결합 function Button({ onClick }) { return ( <button onClick={onClick} className="bg-toss-blue text-white px-4 py-2 rounded" > 확인 </button> ); }

// After: What(인터페이스)을 먼저 정의 interface ButtonProps { children: React.ReactNode; // What: 어떤 내용이든 onClick?: () => void; // What: 클릭 시 동작 variant?: 'primary' | 'secondary' | 'ghost'; // What: 스타일 의도 disabled?: boolean; // What: 비활성 상태 } function Button({ children, onClick, variant = 'primary', disabled }: ButtonProps) { // How: 스타일 구현은 여기서 결정 const styles = getVariantStyles(variant); return <button onClick={onClick} disabled={disabled} className={styles}>{children}</button>; }

// Before: 정규식으로 직접 조작 function addConsoleLog(code) { return code.replace( /function(\w+)\((.*?)\)\{/g, 'function $1($2) {\n console.log("$1 called");' ); }

// After: 구조로 변환 → 구조 조작 → 다시 문자열 import { parse, traverse, generate } from '@babel/core'; function addConsoleLog(code) { const ast = parse(code); // 문자열 → 구조 traverse(ast, { FunctionDeclaration(path) { const funcName = path.node.id.name; path.get('body').unshiftContainer('body', createConsoleLog(funcName) // 구조 조작 ); } }); return generate(ast).code; // 구조 → 문자열 }