05_프레임워크는_무엇을_하는가

작은 앱: 50KB → 문제없음 중간 앱: 500KB → 느린 3G에서 10초 대기 큰 앱: 2MB+ → 초기 로딩이 체감될 정도로 느림

직접 구현: - 빌드할 페이지 목록을 수동으로 관리 - 캐시 무효화를 직접 구현 - 에러가 나면 전체가 실패 프레임워크 지원: - 파일 시스템에서 자동으로 페이지 발견 - API 한 번 호출로 특정 페이지만 재생성 - 실패해도 이전 버전 유지, 부분 빌드 가능

라이브러리: 내가 필요할 때 호출한다 (React, lodash) 프레임워크: 프레임워크가 내 코드를 호출한다 (Next.js, Remix)

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

"도대체 코드가 어디서 시작하는지 알 수가 없다"

// 폴더 구조로 라우트 구성하기 (간략화된 버전) const pages = import.meta.glob("./pages/*.tsx", { eager: true }); const routes = Object.keys(pages).map((path) => { const name = path.match(/\.\/pages\/(.*)\.tsx/)?.[1] ?? ""; return { name, path: `/${name === "index" ? "" : name}`, component: pages[path].default, }; });

// Next.js 내부: 페이지 컴포넌트 모듈 로드 const ComponentMod = await requirePage(pathname, distDir, serverless, isAppPath) // export된 함수들 추출 const { getServerSideProps, getStaticProps, getStaticPaths } = ComponentMod

// 추출한 함수 실행 data = await getServerSideProps({ req: req, res: res, query, resolvedUrl: renderOpts.resolvedUrl, ...(pageIsDynamic ? { params } : undefined), })

// Image 컴포넌트 내부의 defaultLoader function defaultLoader({ config, src, width, quality }) { return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}` }

// 이미지 캐시 로직 const cacheEntry = await this.imageResponseCache.get( cacheKey, async () => { const { buffer, contentType, maxAge } = await this.imageOptimizer(req, res, paramsResult) const etag = getHash([buffer]) return { value: { kind: 'IMAGE', buffer, etag, extension }, revalidate: maxAge } } )

// Next.js Pages Router export async function getServerSideProps({ params }) { const data = await fetchData(params.id); return { props: { data } }; } // Next.js App Router async function Page({ params }) { const data = await fetchData(params.id); return <div>{data}</div>; } // Remix export async function loader({ params }) { return json(await fetchData(params.id)); }

Next.js Pages Router: pages/posts/[id].tsx Next.js App Router: app/posts/[id]/page.tsx Remix: app/routes/posts.$id.tsx Nuxt: pages/posts/[id].vue

// Next.js의 next/image import Image from 'next/image'; <Image src="/hero.jpg" width={800} height={600} alt="Hero image" />

1920×1080 이미지 → 약 200만 픽셀 각 픽셀마다 RGB 변환, 리샘플링, 압축...

// next.config.js module.exports = { images: { loader: 'custom', loaderFile: './image-loader.ts', }, } // image-loader.ts export default function cloudinaryLoader({ src, width, quality }) { const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]; return `https://res.cloudinary.com/demo/image/upload/${params.join(',')}${src}`; }

<Image src="/hero.jpg" ... /> ↓ 커스텀 로더 https://res.cloudinary.com/demo/image/upload/f_auto,c_limit,w_800,q_auto/hero.jpg

서버와 클라이언트는 네트워크로 분리되어 있고, 그 경계를 넘으려면 직렬화가 필요하다.

'use client'; import { useState } from 'react'; export function Counter() { const [count, setCount] = useState(0); return <button onClick={() => setCount(c => c + 1)}>{count}</button>; }

'use server'; export async function saveData(formData) { await db.insert(formData); }

// ❌ 위험: 전역 상태 let currentUser = null; app.get('/profile', (c) => { currentUser = getUserFromSession(c); // 사용자 A 저장 // 이 순간 다른 요청이 currentUser를 덮어쓸 수 있음! return c.html(renderProfile(currentUser)); // 사용자 B의 프로필이 보일 수도 }); // ✅ 안전: 요청 스코프 내에서만 사용 app.get('/profile', (c) => { const currentUser = getUserFromSession(c); // 이 요청에만 유효 return c.html(renderProfile(currentUser)); });