유리의 개발새발

📌 이것은, App Router의 가장 핵심 개념 중 하나다.React Server Component란?리액트 18부터 등장한, 완전히 새로운 유형의 컴포넌트입니다.기존 리액트 컴포넌트와는 다르게, 오직 서버에서만 실행되고,브라우저에서는 실행조차 되지 않습니다.📌 특징 요약✅ 서버에서만 실행됨❌ 브라우저로 JS 번들 전송 ❌ (코드 자체가 클라이언트에 가지 않음)✅ 비동기(fetch, DB 쿼리 등) 가능❌ useState, useEffect 등 클라이언트 훅 사용 불가🤔 이게 뭔 말인가 싶죠? 네, 저도 그렇습니다."컴포넌트가 리액트인데 브라우저에서 안 돌면 대체 뭔데?""그럼 JSX는 뭐고 렌더링은 어디서 하는 건데?"이런 생각이 드는 게 정상입니다.📌 근데, 이게 왜 등장한 건데?🤯 Rea..

페이지 라우터(Page Router)랑 너무 다른데요...?아니... 하... 뭐 어쩌겠어요. 시대의 흐름은 따라가야죠. 해야죠.이번에는 App Router 기반으로 프로젝트를 만들어보겠습니다.먼저 생성된 디렉토리 구조를 확인하고, 각 폴더가 어떤 역할을 하는지 간단히 설명드릴게요.npx create-next-app@latest {projectName} 구성부터 보져.✅ app/ 디렉토리App Router의 중심이 되는 디렉토리입니다.pages/ 대신 app/ 폴더를 루트로 사용하며, 여기에 URL 경로를 기준으로 폴더와 파일을 구성합니다.라우팅, 레이아웃, 에러 핸들링까지 전부 여기서 처리됩니다.✅ layout.tsx각 경로마다 공통으로 유지할 UI, 예를 들면 헤더, 사이드바, 푸터 같은 것들을 여기..