Next.js 학습
1.학습 Next.js - Next.js 공부 시작.
프론트엔드 개발자가 되기 위해서 어떤 커리큘럼에 따라 뭘 배워야하는지 고민이 있을 때, 개발자 유튜브에서 제공해주는 자료를 참고했었다.이 도식에 맞춰 React.js까지는 얼추 공부했고, 다음으로는 Next.js를 해보려고 한다.맨땅에서 공식문서를 보면서 공부할 수는
2.학습 Next.js - Day 01 / Next.js?
원래는 하루 단위로 수행해야하는 일정인데.. 하루에 소화하기에 분량이 상당히 넉넉하게 잡혀있어, 가능하다면 며칠 분을 하루에 수행하기로 하였다.\-> React.js를 기반으로 SSR이 가능하도록 요소들을 추가한 확장판 개념.\-> 주도권이 개발자에게 있냐 없냐의 차이
3.학습 Next.js - Day 02 / Page Router
React-Router와 같이 페이지 기반의 Router 기능을 제공하는 방식.create-next-app 기준으로 page 폴더 아래에 컴포넌트 파일이 있다면, 파일 이름이 URL 라우팅의 기준으로 정해진다. 폴더를 통해서 라우팅을 세분화 하는 것 역시 가능.진행 중
4.학습 Next.js - Day 03 / Link 태그, 프로그래매틱 페이지 이동, 프리패칭, API Routers, 스타일링
해당 학습은 이정환 Winterlood님의 한 입 크기로 잘라먹는 Next.js(15+)을 기반으로 진행되고 있습니다.
5.학습 Next.js - Day 04 / 글로벌 레이아웃 설정
결과 화면 캡쳐 (페이지 결과물만 주소와 함께 캡쳐하시거나 프로젝트 파일 구조를 함께 캡쳐해주세요.)GitHub에 프로젝트 업로드 후 링크로 공유"ONEBITE CINEMA" 라는 텍스트가 렌더링 되는 헤더가 존재해야 합니다.클릭시 "/" 페이지로 이동합니다.컬러는 붉
6.학습 Next.js - Day 05
결과 화면 캡쳐 (페이지 결과물만 주소와 함께 캡쳐하시거나 프로젝트 파일 구조를 함께 캡쳐해주세요.)GitHub에 프로젝트 업로드 후 링크로 공유더미데이터 설정하기타입 설정하기인덱스 페이지 UI 구현서치 페이지 UI 구현상세 페이지 UI 구현과제 문서에서는 검색 기능과
7.학습 Next.js - Day 06 / 사전 렌더링과 데이터 페칭
수업 내용 정리가 너무 파편화 되어서 Day 05 이후의 자료를 포스팅 하는게 시기적으로 너무 늦어졌다.. 정리 해 놓고 다른 일 때문에 포스팅 하는걸 잊어버린게 문제.. React.js에서는 대략 이런 방식으로 데이터를 받아와서 처리했었다.그런데 이 방식에는 1가지
8.학습 Next.js - Day 07 / 서버 사이드 렌더링 SSR
브라우저에서 접속 요청이 들어올 때마다, 사전 렌더링을 수행하는 방식. SSR 방식을 적용하는 방법은 다음과 같다.페이지 컴포넌트 내부에 getServerSideProps라는 이름의 함수를 구현하고, export로 내보내기를 적용해주면 Next.js는 해당 페이지를 S
9.학습 Next.js - Day 08 / SSR 실습
fetchBooks는 fetch 메소드를 이용해서 서버에서 모든 도서 데이터를 가져오는 역할을 수행한다.따라서 우선 해당 함수의 반환값의 타입은, 비동기 호출의 반환값을 의미하는 Promise를 적용하고. 반환되는 도서 데이터들의 타입 파일인 BookData를 제네릭으
10.학습 Next.js - Day 09 / SSG (정적 사이트 생성), 실습
SSG의 기본 개념은 예전에 작성한 포스트를 참조. Next.js에서 제공하는 사전 렌더링 방법 중 2번째 방법.SSR의 방식에서 발생하는 단점을 (데이터 페칭이 늦어질 경우 뒤에 위치한 모든 과정들이 덩달아 지연) 해결할 수 있다.서버에서 최초로 1번. 빌드 과정 중
11.학습 Next.js - Day 10 / ISR (증분 정적 재생성), 사용법, On-Demand-ISR
SSG 방식의 경우, 속도는 빠르지만 최신 데이터를 반영할 수 없는 문제가 존재했다.ISR 방식은 이 문제를 해결하기 위해. SSG 방식이지만, 일정 시간 이후에는 사전 렌더링을 다시 실행해서 최신 데이터를 반영하는 등의 작업을 수행할 수 있다.지정된 시간이 경과한다고
12.학습 Next.js - Day 11 / SEO 설정, Next.js 앱 배포, 페이지 라우터 정리.
메타 태그를 이용해서 SEO를 설정할 수 있다.Next.js에서는 React.js와 달리 페이지마다 메타 태그를 별도로 설정할 수 있다.SSG 방식에서 fallback 옵션을 true로 사용할 경우, 사전에 설정되어있지 않은 경로의 페이지들은. props가 없는 상태의
13.학습 Next.js - Day 12 / App Router?, 페이지 라우팅 설정, 레이아웃 설정
레이아웃 설정 방식 변경데이터 페칭 방식 변경페이지 라우팅 방식 변경React 18 버전 대응\-> React Server Component, Streaming 등등..App Router와 Page Router는 완전히 다른 개념이라는 평가도 있다.Next.js가 아예
14.학습 Next.js - Day 13 / React Server Component 개념 및 사용법,
Next.js - App Router의 가장 핵심적인 개념 중 하나.React.js 18버전에서 추가된, 새로운 유형의 컴포넌트.브라우저가 아닌, 서버에서만 실행되는 컴포넌트.프론트엔드 라이브러리에서 왜 서버에서만 실행되는 컴포넌트가 있을까?\-> 이를 이해하기 위해서
15.학습 Next.js - Day 14 / 네비게이션, 네비게이팅 UI의 위치, 프리페칭, useSearchParams()
App Router에서는 페이지를 어떻게 이동하는가? 원리는 Page Router와 동일하다. App Router에서는 Server Component 개념의 추가로 인해 구조가 살짝 달라진다.\-> 페이지 이동에서 JS Bundle에는 Cilent Component만
16.학습 Next.js - Day 15 / App Router 데이터 페칭, 데이터 캐싱, Request Memoization
App Router가 Page Router에서 많은 것이 달라진 이유는?\-> Server Component라는 새로운 개념이 도입되었기 때문.\-> 데이터 페칭도 마찬가지의 이유로 많은 변화가 발생하였다.SSR, SSG, Dynamic SSG을 구분하는 함수 내부에서
17.학습 Next.js - Day 16 / Full Route Cache, 정적 페이지화
Request Memoization에서 캐시가 저장되는 원리를 배웠지만, 사실은 1단계 더 설명해야하는 부분이 존재한다. Next.js는 빌드 타임에 데이터 호출, 캐싱 등의 작업을 마치고 페이지의 생성 결과를 풀 라우트 캐시Full Route Cache에 저장하게 된
18.학습 Next.js - Day 17 / 라우트 세그먼트 옵션, 클라이언트 라우터 캐시
프로젝트의 모든 컴포넌트가 정적인지 동적인지 일일이 확인하는 것은, 프로젝트가 조금만 복잡해져도 대단히 어려워지는 작업이다.이를 위해서 페이지의 정적, 동적, Reveildate 등을 강제로 설정할 수 있는 라우트 세그먼트 옵션을 사용해볼 수 있다.이전 강의에서 사용했
19.학습 Next.js - Day 18 / Streaming, 페이지 스트리밍, Suspense를 이용한 스트리밍 적용
OTT 서비스, 대용량 영상 파일을 빠른 속도로 시청하는 기능을 제공. 이를 가능하게 해주는 것이 바로 스트리밍Streaming.서버에서 클라이언트로 전달해야하는 파일의 용량이 너무 크면, 전송에 걸리는 시간과 자원이 많이 필요하다.그렇다면, 큰 파일을 여러 개의 조각
20.학습 Next.js - Day 19 / 스켈레톤 UI, 에러 핸들링
실제 컨텐츠가 로딩되기 전까지, 사용자에게 콘텐츠가 로딩 중임을 명시적으로 보여준다. 추가로 어떤 형태의 컨텐츠가 로딩 중인지도 함께 보여줄 수 있다.실제 컨텐츠가 이렇게 렌더링 된다면..컨텐츠가 로딩 중일 때는 이런 형태의 스켈레톤 UI을 렌더링 해주면 된다.복수의
21.학습 Next.js - Day 20 / 서버 액션, 실습
별도의 API 없이, 간단한 함수 하나만으로 브라우저에서 Next 서버의 함수를 직접 호출할 수 있다.이 코드는 사용자에게 어떤 양식을 입력받는 form 태그를 반환하고 있다.양식을 입력하고, submit 버튼이 입력되면.. action 옵션으로 삽입된 saveName
22.학습 Next.js - Day 21 / 재검증 기능
사용자가 리뷰를 작성하면, 자동으로 화면이 업데이트되어 방금 작성한 리뷰가 렌더링되어야 한다. 어떻게 해야할까?createReviewAction이 동작한 뒤에 ReviewList가 서버에서 다시 렌더링해서 클라이언트로 전송하게 하면 된다. 그 방법은..revalidat
23.학습 Next.js - Day 22 / 클라이언트 컴포넌트에서의 서버 액션
클라이언트 컴포넌트에서 서버 액션을 호출하여 로딩 상태 설정, 에러 핸들링 등의 기능을 구현할 수 있다.서버에서 데이터가 응답되어 화면에 렌더링되기까지, 시간적 지연 동안 사용자에게 '무언가'를 보여주지 않으면 답답한 느낌을 받을 수 밖에 없다.특히나 로딩 중인 상태에
24.학습 Next.js - Day 23 / 전체 복습, 리뷰 삭제 기능
지금까지 배운 내용들을 모두 활용하여 구현하는 리뷰 삭제 기능.리뷰 내용 전체가 포함된 컴포넌트. 삭제 버튼 컴포넌트를 하위에 두고 있다.리뷰 삭제 기능을 수행할 클라이언트 컴포넌트, 삭제 버튼 컴포넌트.서버 액션을 사용하여 리뷰 삭제 기능을 수행하는 리뷰 삭제 액션
25.학습 Next.js - Day 24 / Parallel Route, Intercepting Route
화면 내부에 여러 개의 레이아웃들을 렌더링하는 패턴.Parallel Route는 복수의 '페이지들'을 한 화면에 렌더링되는 기법이다. 컴포넌트들이 아니다. 여러 컴포넌트들이 한 화면에 렌더링 되는건 굳이 따로 다룰 필요도 없다.기존 학습 프로젝트에서는 굳이 Parall
26.학습 Next.js - Day 25 / 이미지 최적화, SEO 최적화 (메타 데이터만)
Next에서 제공하는 다양한 최적화 방법 중 하나.웹 페이지에서 평균으로 가장 용량을 많이 차지하는 요소는? 이미지.따라서 이미지를 최적화 하는 일만 실행해주어도 최적화의 반은 먹고 들어가는 셈이다.그런 이유로 이미지 최적화 기법은 이미 시장에 많이 출시되어 있다. 차
27.학습 Next.js - Day Final / 학습 프로젝트 배포, 배포 후 최적화, 완강!
프론트엔드 프로젝트를 배포하는 방법은 다양하다.다만 Next.js로 구현한 프론트엔드 프로젝트는 Vercel을 사용하는 것이 가장 좋다. Vercel은 Next.js의 개발사로써, 자사 서비스에 가장 최적화된 배포 기능을 활용하고 있기 때문.단! 프로덕션 수준의 프로젝