Next.js 챌린지
1.[Next.js 챌린지] DAY1
한 입 크기로 잘라먹는 Next.js(15+)vercel에서 개발한 React 전용 웹 개발 프레임워크React를 더 강력하고 편하게 사용할 수 있는 기능을 제공React + 페이지 라우팅 + 다양한 최적화 기능 → 일종의 React 확장판Next.js가 업데이트 되면
2.[Next.js 챌린지] DAY2 페이지라우터
한 입 크기로 잘라먹는 Next.js(15+) # Section2 1. Page Router를 소개합니다 많은 기업에서 사용되고 있는 안정적인 라우터 React Router 처럼 페이지 라우팅 기능 제공 Pages 폴더의 구조를 기반으로 페이지 라우팅을 제공함 파일
3.[Next.js 챌린지] DAY3
한 입 크기로 잘라먹는 Next.js(15+)CSR방식으로 이동하기 때문에 빠르고 쾌적하다특정 버튼이 클릭되거나 특정 조건이 만족되었을 때 함수 내부에서 페이지를 이동시키는 방식ex) onClick 이벤트페이지를 사전에 미리 불러온다빠른 페이지 이동을 위해 제공되는 기
4.[Next.js 챌린지] DAY6 SSR
한 입 크기로 잘라먹는 Next.js(15+) # Section2 11. SSR 1. 소개 및 실습 SSR을 적용할 페이지에서 실습을 진행한다 getServerSideProps 함수 Next에서 약속된 이름의 함수(getServerSideProps)를 만들고 e
5.[Next.js 챌린지] DAY7 SSG
한 입 크기로 잘라먹는 Next.js(15+)SSR의 단점을 해결하는 사전 렌더링 방식빌드 타임에 페이지를 미리 사전렌더링 한다장점사전 렌더링에 많은 시간이 소요되는 페이지더라도 사용자의 요청에는 매우 빠른속도로 응답 가능단점빌드 타임 이후에는 매번 똑같은 페이지만 응
6.[Next.js 챌린지] DAY8 ISR
한 입 크기로 잘라먹는 Next.js(15+) # Section2 17. ISR 소개 및 실습 ISR (Incremental Static Regenertion) = 증분 정적 재생성 => SSG 방식으로 생성된 정적 페이지를 일정 시간을 주기로 다시 생성하는 기술
7.[Next.js 챌린지] 페이지 라우터 정리
동적 경로서버사이드 렌더링 (SSR)요청이 들어올 때 마다 사전 렌더링을 진행 → 최신 데이터 반영 보장 → 상황에 따라 응답 속도가 느려질 수 있음정적 사이트 생성 (SSG)빌드타임에 미리 페이지를 렌더링→ 사전 렌더링에 많은 시간이 소요되더라도 사용자의 요청에는
8.[Next.js 챌린지] DAY9 App Router
한 입 크기로 잘라먹는 Next.js(15+) # Section3 1. App Router 시작하기 App Router란? Next.js 13 버전에 새롭게 추가된 라우터 기존의 Page Router를 완전히 대체 변경되거나 추가되는 사항 페이지 라우팅 설정 방식
9.[Next.js 챌린지] DAY10 리액트 서버 컴포넌트
한 입 크기로 잘라먹는 Next.js(15+) # Section3 4. 리액트 서버 컴포넌트 이해하기 React Server Component란? 상호작용이 없는 컴포넌트 서버측에서만 실행되는 컴포넌트 (브라우저 실행 X) App Router에서는 기본적으로 모든
10.[Next.js 챌린지] DAY11
한 입 크기로 잘라먹는 Next.js(15+)글로벌 레이아웃으로 네비게이션을 적용하기 위해Link 태그를 src/app/layout.tsx 에 적용\+) App Router에서 페이지 요청시서버 컴포넌트는 rsc payload, 클라이언트 컴포넌트는 js bundle로
11.[Next.js 챌린지] DAY12 앱라우터 (데이터 페칭, 리퀘스트 메모이제이션)
한 입 크기로 잘라먹는 Next.js(15+) # Section4 1. 앱 라우터의 데이터 페칭 데이터 페칭 앱 라우터에서 데이터 페칭은 각각의 컴포넌트에서 진행된다 (Next.js의 공식문서에 따르면 데이터는 필요한 곳에서 직접 불러오라고 쓰여있다) 컴포넌트
12.[Next.js 챌린지] DAY13 풀 라우트 캐시
한 입 크기로 잘라먹는 Next.js(15+) #section5 1. 풀 라우트 캐시 1 Next 서버 측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능 Static Page 에만 풀 라우트 캐시가 적용 된다 (SSG와 유사) Dynamic Page
13.[Next.js 챌린지] DAY14 클라이언트 라우트 캐시, 페이지 스트리밍
한 입 크기로 잘라먹는 Next.js(15+) #section5 4. 라우트 세그먼트 옵션 dynamic export const dynamic = 'force-dynamic'; 특정 페이지의 유형을 강제로 Static or Dynamic 페이지로 설정 auto
14.[Next.js 챌린지] DAY15 컴포넌트 스트리밍, 스켈레톤UI, 에러핸들링
#section6 3. 스트리밍2) 컴포넌트 스트리밍 적용하기 컴포넌트 스트리밍은 페이지 스트리밍보다 더 세밀하게 스트리밍을 설정할 수 있다 실습하기 기존 loading.tsx 파일 삭제 페이지 컴포넌트 내부에서 비동기 작업중인 코드를 분리 원본 수정본 (비동기 작업 분리) 리액트 컴포넌트인 Suspense로 감싸주기 <img src='htt...
15.[Next.js 챌린지] DAY16 서버액션
#section7 1. 서버액션을 소개합니다 > ### 서버 액션이란? 서버에서 실행되는 비동기 함수를 브라우저에서 호출하는 방법 과정 브라우저에서 특정 form에 대한 submit 이벤트 발생 서버에서만 실행되는 함수를 브라우저가 직접 호출 데이터를 FormDat
16.[Next.js 챌린지] DAY17
#section7 4. 리뷰 재검증 구현하기 revalidatePath('경로') Next 서버에게 경로에 해당하는 페이지를 재검증(다시 생성)할 것을 요청하는 메서드 -> 작성한 리뷰가 실시간으로 반영되는 것을 확인 가능 import { revalidatePa