저장소

# 실생활 비유로 이해하기Next.js를 레스토랑에 비유하면:React는 요리사: UI 컴포넌트를 만듦Next.js는 레스토랑 전체 시스템:주문 접수 (라우팅)주방 관리 (서버 사이드 렌더링)서빙 (페이지 전달)매장 관리 (최적화) 등을 모두 관리 1. React란? 🎯1.1 React 소개React는 Facebook(현 Meta)에서 만든 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 만들기 위한 도구입니다.1.2 React의 특징1) 컴포넌트 기반웹사이트를 레고 블록처럼 작은 조각(컴포넌트)으로 나누어 개발합니다.// 버튼 컴포넌트 예시function Button({ text, onClick }) { return ( {text} );}// 사용 예시funct..

1. 기본 용어 설명1.1 주요 용어라우팅(Routing): 웹 애플리케이션에서 URL에 따라 다른 페이지를 보여주는 시스템페이지(Page): Next.js에서 route와 연결된 React 컴포넌트동적 라우팅(Dynamic Routing): URL 파라미터를 사용하여 동적으로 페이지를 생성하는 방식Middleware: 페이지 렌더링 전에 실행되는 코드SSR(Server Side Rendering): 서버에서 페이지를 렌더링하는 방식CSt Side Rendering: 브라우저에서 페이지를 렌더링하는 방식1.2 Next.js 라우팅 흐름도 2. File-based 라우팅 시스템2.1 기본 구조 설명pages/ ├── index.tsx # 홈페이지 (/) ├── about.tsx # 정적 페이지 (/abou..

1. 웹 렌더링의 이해1.1 렌더링이란?렌더링은 코드를 사용자가 볼 수 있는 인터페이스로 변환하는 과정입니다. 웹에서는 HTML, CSS, JavaScript를 브라우저가 이해하고 화면에 표시할 수 있는 형태로 바꾸는 것을 의미합니다.1.2 주요 용어 설명Hydration: 서버에서 보낸 정적 HTML에 JavaScript 이벤트 핸들러와 상태를 입히는 과정Pre-rendering: 미리 HTML을 생성하는 과정Dynamic Routes: URL 패턴에 따라 다른 콘텐츠를 보여주는 페이지Build Time: 애플리케이션을 배포용으로 빌드하는 시점 2. 클라이언트 사이드 렌더링 (CSR)2.1 CSR의 작동 방식const ProductPage = () => {// 상태 관리 const [product..