Frontend/Next.js

📚 [서평] 한입 크기로 잘라먹는 Next.js – 입문자에게 최적화된 A to Z 안내서👋 프롤로그 나는 이미 정환 님의 「한입 크기로 잘라먹는 리액트」 강의를 전부 수료한 경험이 있다.깔끔하고 이해가 잘 가는 구성 덕분에 실습을 끝까지 따라 하고,실제 배포까지 경험할 수 있었던 강의라 지금도 강하게 기억에 남는다. 그래서 이번에 나온 「한입 크기로 잘라먹는 Next.js」 책 집필 소식을 듣자마자 눈이 갔다.Next.js는 빠르게 변하는 생태계라 학습 자료도 시시각각 달라지는데 강의는 이미 인프런에 올라와 있고,거기에 더해 책으로 따끈따끈하게 집필된 최신 버전이란 점이 특히 매력적이었다.“강의 + 책 조합으로 더 깊이 배울 수 있겠구나” 싶었다. ✨ 책 소개정환 님이 집필한 「한입 크기로 잘..

🔍 SSR(Server Side Rendering)란?SSR은 사용자가 페이지를 요청할 때마다 서버에서 HTML을 완성해 보내주는 렌더링 방식이다.클라이언트가 받는 시점에는 이미 콘텐츠가 포함된 HTML이기 때문에 SEO 친화적이고 초기 로딩 속도가 빠르다.⚙ SSR 동작 과정🌐 사용자 요청 → 브라우저가 특정 URL로 요청을 보낸다.🖥 서버 렌더링 → Next.js 서버가 해당 URL에 맞는 React 컴포넌트를 실행해 HTML 생성.📦 HTML 전송 → 서버에서 완성된 HTML을 브라우저로 전달.💧 Hydration → 브라우저가 HTML을 React 앱으로 재활성화, 이벤트와 상태를 연결.💧 Hydration이란?Hydration은 서버에서 렌더링된 정적 HTML을 React 앱으로 재활..

✍️ 본문React는 UI 라이브러리로서 강력한 기능을 제공하지만,실제 프로젝트를 진행하면서 몇 가지 아쉬운 점들이 분명히 있었다.라우팅을 직접 설정해야 하고, SEO를 고려한 서버사이드 렌더링도 직접 구성해야 하며,초기 셋업도 자유로운 대신 번거로웠다. Next.js를 학습하면서 가장 먼저 느낀 건 이거였다."React에서 귀찮았던 것들이, Next.js에선 그냥 기본으로 들어가 있네?"✅ React만 쓸 때와 Next.js를 쓰는 이유💡 1. React는 라이브러리, Next.js는 프레임워크 React Next.js개념UI 구성만 담당전체 앱 구조까지 아우름구조개발자 구성 주도프레임워크가 구조 주도주도권개발자Next.js Next.js는 단순히 기능이 많은 게 아니라,프로젝트 구조와 흐름 자..