nika-blog

Next.js에서 Server Component는 어떻게 렌더링될까?💡 컴포넌트란?React에서 컴포넌트(Component)란👉 데이터를 인자로 받아 JSX를 반환하는 JavaScript 함수입니다.function Welcome({ name }) { return Hello, {name};}컴포넌트는 다음 두 가지 상태를 가질 수 있습니다:Props: 부모로부터 전달받는 데이터State: 컴포넌트 내부에서 관리되는 데이터⚙️ 컴포넌트 렌더링이란?JSX는 브라우저가 이해할 수 없기 때문에,Babel을 통해 React Element로 변환됩니다.Hello// ↓ Babel 변환React.createElement("h1", null, "Hello")이 React Element는 Fiber 노드로 변환되어 ..

Next.js의 라우팅 시스템 이해하기등장 배경, 동작 방식, 코드 레벨 구현까지라우팅이란?간단히 말하면 "어떤 URL을 요청했을 때 어떤 화면을 보여줄까"를 결정하는 과정.CSR은 하나의 HTML 파일만 있으므로, 자바스크립트 레벨에서 URL Path를 구분해야 함.SSR은 서버에서 여러 URL 경로에 대해 각각 다른 HTML을 반환해야 함.라우팅 방식 비교방식예시특징명시적 라우팅React-Router직접 Route를 명시코드 기반 라우팅Express코드로 라우트 등록데코레이터 기반 라우팅Nest.js데코레이터로 라우트 선언파일 기반 라우팅Next.js파일구조가 곧 라우트Next.js는 파일 기반 라우팅을 채택➔ /pages 디렉터리의 폴더 및 파일 구조가 곧 URL 경로가 됨.파일 기반 라우팅의 장점..

nextjs 로 개발한지 벌써 오래되었는데, 동작원리나 개념보다는 활용에 집중해 온 것 같다. 오랜만에 공부하며 내용을 정리해봤다. Next.js는 왜 등장했을까?CSR과 SSR의 한계와 Next.js의 탄생 배경왜 CSR(Client Side Rendering)인가?과거 웹은 JSP처럼 서버에서 HTML을 생성하고 전송하는 구조였음.Ajax(Asynchronous JavaScript and XML) 기술이 등장하면서, 웹페이지 전체를 새로 고치지 않고 필요한 데이터만 받아오는 방식이 가능해짐.Presentation Layer(화면)와 Data Layer(데이터)가 분리되면서, 사용자 경험(UX)이 크게 향상됨.CSR 덕분에 웹은 빠른 전환과 부드러운 UX를 제공할 수 있게 되었음.그러나 CSR은 초기 ..