유리의 개발새발

서버 액션(Server Actions)은 아주 간단하게 말하면,폼 데이터를 서버로 직접 보낼 수 있는 새로운 방법이야.useState, useEffect, fetch 이런 거 다 안 쓰고도 가능해! 💥 왜 필요한데?기존 방식은 이랬지input에서 값 입력useState로 값 저장fetch로 API 요청서버에서 처리다시 클라이언트로 응답 받고 상태 업데이트너무 복잡해…서버 액션은 이걸 그냥 이렇게 만들어줌폼 제출 → 서버 함수 호출 → 끝✨ 서버 액션 한 줄 정의"서버에서 실행되는 함수인데, 클라이언트에서 바로 호출 가능함"// app/page.tsx'use client';export default function Page() { async function createPost(formData: Form..

스트리밍(Streaming)은 말 그대로, 아주 큰 데이터를 조각내어 연속적으로 전송하는 기술입니다. 전체 동영상을 다 다운로드할 필요 없이, 앞부분부터 바로 재생할 수 있는 것처럼데이터를 "순차적으로 받아서 바로 사용"하는 방식입니다. 🧠 스트리밍은 왜 필요한가요?일반적인 방식이라면, 서버는 모든 데이터를 준비한 후에야 클라이언트로 응답을 보냅니다.하지만 데이터가 크거나 준비 시간이 오래 걸리는 경우, 사용자는 하얀 화면만 보면서 기다려야 하죠.🚫 전체 렌더링이 끝날 때까지 아무것도 못 보는 건 사용자 입장에서 큰 불편입니다. 그래서 등장한 게 스트리밍 렌더링입니다.✅ 핵심 개념 요약데이터를 한 번에 다 전송하지 않고, 조각 단위로 나눠서 연속적으로 보냄클라이언트는 데이터 일부만 받아도, 그 부분부..

Next.js를 쓰다 보면 "데이터 캐싱"이라는 개념을 한 번쯤 마주하게 된다. 이건 단순히 속도만 빠르게 하자는 게 아니라, 사용자 경험과 서버 비용까지 챙기는 핵심 전략이다.이번 글에서는 Next.js에서의 데이터 캐싱이 어떻게 동작하는지, 그리고 SSR, SSG, ISR, fetch API와의 관계에서 어떤 식으로 작동하는지를 정리해보자.1️⃣ 왜 캐싱이 중요한가?사용자가 동일한 데이터를 여러 번 요청할 때 서버를 매번 호출하면 리소스 낭비다.데이터를 캐싱하면:응답 속도가 빨라지고 (성능 향상),API 서버 트래픽이 줄어들고 (비용 절감),서버 과부하도 방지된다.2️⃣ Next.js의 캐싱 전략 요약Next.js에서의 캐싱은 요청 유형에 따라 달라진다:렌더링 방식캐싱 기본값비고Static Gener..

기존의 페이지 라우터에서는 데이터 패칭을 어떻게 했죠?기억나시나요?getServerSideProps, getStaticProps, getInitialProps 같은 특수 함수들을 사용했죠.페이지 단위에서만 데이터 패칭이 가능했습니다.단점은 무엇일까요?바로 프롭스 드릴링(Props Drilling)입니다.페이지에서 받아온 데이터를 하위 컴포넌트에 일일이 전달해야 했습니다.상위 → 중간 → 하위로 계속 전달하다 보면, 컴포넌트가 복잡해지고 유지보수가 어려워집니다.그럼, App Router에서는 데이터 패칭을 어떻게 할까요?이제는 서버 컴포넌트(Server Component)라는 강력한 도구가 생겼습니다.서버 컴포넌트 안에서 async 함수로 비동기 처리를 할 수 있고,필요한 데이터를 그 자리에서 직접 패칭할..

📌 이것은, 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, 예를 들면 헤더, 사이드바, 푸터 같은 것들을 여기..

📚 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은 말합니다.“야, 처음엔 정적으로 만들어줄게.근데 일정 시간 지나면 새로 만들..