유리의 개발새발

📚 Page Router로 Next.js를 한 번 훑어봤다이제 Page Router 기반으로 Next.js를 한 바퀴 돌았다.직접 써보니까 어떤 장점과 단점이 있었는지 정리해보자. ✅ 장점pages 폴더만으로 라우팅이 자동으로 설정된다pages/ 디렉토리 구조만 잘 잡으면별도의 라우팅 설정 없이 경로가 자동으로 매핑된다.[id].tsx, [slug].tsx 같은 동적 라우팅도 매우 쉽게 구현할 수 있다.다양한 렌더링 방식을 지원한다SSR, SSG, ISR 등 상황에 따라 렌더링 전략을 선택할 수 있다.물론 이걸 현업에서 잘 쓰려면 조금 익숙해져야 하긴 할 것 같다. 하지만 뭐 어쩌겠는가. 도태되지 않으려면 써야죠.❌ 단점써보면서 이런 건 좀 불편하더라페이지마다 레이아웃 설정이 번거롭다공통 레이아웃을 적..

☁️ EC2? 아니, 이제는 Vercel 씁니다우리는 EC2 안 씁니다.Next.js 만든 애들이 만든 Vercel 씁니다.그냥 Next.js랑 찰떡궁합이고, 배포도 쉽고 빠름.https://vercel.com Vercel: Build and deploy the best web experiences with the AI Cloud – VercelVercel gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.com회원가입 먼저 하세요.GitHub 계정으로 하면 편합니다. ✅ 터미널에서 준비프로젝트 디렉토리로 이동해서sudo npm install -g verce..

import Head from "next/head";export default function HomePage() { return ( 이곳은 제목입니다 {/* 실제 페이지 내용 */} ... );}Search Engine Optimization검색 엔진 최적화를 위해 각 페이지마다 title, description, OG 태그를 다르게 넣고 싶을 때가 많죠. ✅ 그럴 때 쓰는 게 next/headNext.js에서는 next/head를 이용해서JSX 안에서 페이지마다 커스텀 태그를 삽입할 수 있습니다. 이러면 끝인가? ㄴㄴ어떤 방식으로 렌더링이 되고있죠?❌ next..

SSR, SSG에 이어… 이번엔 ISR!앞서 SSR(Server Side Rendering)과 SSG(Static Site Generation)에 대해 알아봤죠.이번에는 이 둘의 중간 어딘가쯤 위치한 **ISR(Incremental Static Regeneration)**을 알아보겠습니다.직역하면 “증분 정적 재생성”인데,한글로 풀어 써도 어렵네요. 하지만 걱정 마세요. 개념은 정말 간단합니다.ISR이란?한마디로 말하면,정적 페이지(SSG)인데, 일정 주기로 다시 만들어주는 기능입니다. 예를 들어, SSG는 빌드 타임에 HTML을 미리 만들어두기 때문에 빠르긴 하지만,실시간 데이터가 반영되지 않는다는 단점이 있죠.여기서 ISR은 말합니다.“야, 처음엔 정적으로 만들어줄게.근데 일정 시간 지나면 새로 만들..

Next.js에서 SSR(Server Side Rendering)은 가장 기본적인 렌더링 방식입니다.사용자가 페이지에 접속하면, 서버는 실시간으로 데이터를 불러오고, 그 데이터를 기반으로 HTML을 생성한 뒤 사용자에게 전달합니다.하지만 만약 데이터를 가져오는 API 서버가 물리적으로 멀리 떨어져 있거나(예: 아프리카에 위치한 서버), 혹은 가져와야 할 데이터 양이 많아 시간이 오래 걸린다면, 사용자는 페이지가 로딩될 때까지 그만큼 기다려야 합니다.즉, 서버 응답이 느려지면 사용자 경험도 함께 저하되는 것이죠.그렇다면 어떻게 해야 할까요?이럴 땐 SSR 대신 SSG(Static Site Generation) 방식을 사용하는 것이 좋습니다.SSG는 페이지를 빌드 시점에 미리 정적으로 생성해두는 방식으로, ..

기존 React나 React Native에서는 어떻게 데이터를 불러왔을까?나는 주로 useEffect를 사용해서, 컴포넌트가 마운트되면 API 요청을 보내고, 그 응답을 상태값에 저장한 뒤 화면에 렌더링하는 전통적인 방식을 사용해왔다.그런데 이 방식의 단점, 알고 계신가요?컴포넌트가 마운트된 이후에 데이터를 요청한다는 점이다.즉, 사용자가 페이지에 들어왔을 때,React는 먼저 빈 화면을 렌더링하고,그다음에 API 요청을 보내고,데이터를 받아오면 그제야 화면이 완성된다.React 자체도 가볍고 빠른 UI 프레임워크는 아니기 때문에, 여기에 데이터 로딩까지 기다려야 한다면?사용자는 빈 화면을 보며 기다려야 하고, UX는 자연스럽게 나빠진다. 이러한 문제를 해결하기 위해 Next.js에서는 "사전 렌더링"이..

미리 페이지 불러오는건가요? Next.js는 어떻게 미리 페이지를 불러올까?Next.js를 쓰면 페이지 이동이 굉장히 빠르다는 느낌을 받게 됩니다.이건 단지 라우팅 방식 때문만이 아니라, Next.js가 "미리" 다음 페이지를 로딩하고 있기 때문입니다.바로 이걸 Pre-fetching(프리페칭)이라고 합니다.✅ Pre-fetching이란?사용자가 아직 클릭하지도 않았는데, 앞으로 방문할 가능성이 높은 페이지를 미리 요청해서느낌상 거의 즉시 로드되는 것처럼 만드는 기술 아니 근데, 넥스트의 렌더링 과정은“Next.js는 서버에서 HTML을 내려주고, 그 다음 모든 JS 파일을 한 번에 번들링해서 브라우저에 보내는 구조 아닌가요?JS 번들을 다 받았으면, 다른 페이지로 이동할 때는 추가 요청 없이 렌더링만 ..

Next.js에서는 페이지를 이동할 때 단순히 를 쓰면 안 됩니다.겉보기엔 똑같아 보이지만, 내부적으로는 완전히 다른 동작을 합니다.이번 글에서는 와 의 차이를 시작으로, router.push, router.replace, router.back까지Next.js Page Router 기준의 모든 Navigation 방법을 정리합니다.🆚 vs — 왜 굳이 Link를 써야 하나?About위 코드는 페이지 전체가 완전히 새로고침됩니다.React 상태, Context, JS 메모리 등 모든 게 날아가고 HTML부터 다시 렌더됩니다.그냥 서버에서 새로 페이지를 받는 전통적인 방식.✅ Next.js 방식import Link from 'next/link';About는 Next.js에서 제공하는 컴포넌트로,클라이언..

Next.js에서 pages/ 폴더는 곧 URL 경로입니다.파일명이나 폴더명에 따라 자동으로 라우팅이 구성되고, 동적 페이지도 파일명만으로 쉽게 만들 수 있습니다.여기선 Page Router 기준으로 동작 방식을 정리합니다. (⚠️ App Router 아님)pages/ index.tsx → / about.tsx → /about contact.tsx → /contact blog/index.tsx → /blog blog/post.tsx → /blog/post폴더/파일 구조 = URL 구조React 컴포넌트를 해당 위치에 넣으면 자동으로 라우팅됩니다. 🔁 동적 라우팅 (Dynamic Routes)[] — 단일 동적 세그먼트pages/ post/ ..

나는 Page Router고 App Router고… 둘 다 모른다. 그래서 다행이다 😊Next.js를 막 공부하기 시작했는데,"Page Router vs App Router" 라는 말을 듣고 당황했다.뭐가 뭔지도 모르겠는데, 사람들이“이게 더 낫다”, “이건 미래다”, “아직은 이게 더 안정적이다”… 말이 너무 많다.근데 사실,나는 둘 다 몰라서 그냥 처음부터 동시에 배우면 된다.Page Router란?현재도 많은 기업에서 사용 중인, 가장 안정적이고 검증된 라우팅 방식입니다.pages/ 폴더를 기준으로 파일 이름 = 경로(URL)예를 들어 pages/about.tsx → /about 경로로 자동 매핑getStaticProps, getServerSideProps 등으로 페이지 단위 데이터 패칭 지원_a..