Next.js
1.Next.js의 기본
탄생 배경 👶 리액트는 자바스크립트로 HTML을 그리는 방식, 즉 클라이언트 사이드 렌더링 CSR이기때문에 초기에 웹페이지를 그리는데 필요한 자바스크립트의 번들이 크다. >초기 성능 저하 SEO에 좋지않음. -> 자스가 html을 나중에 그리니까~ 요러한 문제를 해결하기 위해 나타난 Next.js - SSR 서버사이드 렌더링 Next.js 13 ...
2.Next.js 라우팅
과정 만약, 라는 url로 접속하면 Next.js는 app폴더 밑에 라는 폴더가 있는지 확인한다. 그리고 그 폴더안에, 가 있는지 확인 있네용? 그럼 return값, 즉 컨텐트를 어디에다 표시하냐... 바로 create 폴더 안에 가 있다면, 이 파일과 결합한다. 
실행 > : db.json 파일이 수정되면 바로 서버가 재시동된다. 이렇게 db.json을 localhost에서 확인할 수 있다. 기본적인 db.json localhost 해당 주소로 가면, 저렇게 확인할수있다. 데이터 추가 
라우트 그룹은 괄호() 폴더로 생성되며, 이는 url에 전혀 영향을 미치지 않는다
6.노마드코더 - Next.js - Dynamic Routes, params, searchParams
movies/:id 처럼 동적인 url /movies/12121 이런 url을 만들려면movies 폴더 안에[] id 폴더 만들고, page.tsx 생성!
7.노마드코더 - Next.js - Data Fetching, loading
server component 에서 fetch 한다는 것은 위 코드처럼 useEffect, useState를 쓰지 않아도 된다는 것이다.서버컴포넌트
8.노마드코더 - Next.js - Parallel Requests, Promise.all(), Suspense, Error Page
강려크한 Suspense
9.tailwind - Modifiers
스타일 class을 조건부로 적용한다: 뒤에 따라오는게 바로 그 조건이 참일 때 적용될 CSS위 사진처럼, tailwind 의 클래스 중 하나인 bg-black 은 --tw-bg-opacity 라는 변수에 의해 검정색 배경을제공하고있다.나는 저 변수를 바꾸고싶다!그러면
10.Next.js - 사전 렌더링 (Pre rendering)
사전 렌더링 (Pre rendering) > 브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 빠른 FCP 달성! (기존 react 단점 해소) 빠른 페이지 이동! (react 장점 승계) 서버 측에서 직접 JS코드, 즉 리액트 앱을 직접 실행시켜
11.Next.js - Page Router (1)
pages 폴더의 구조를 기반으로 페이지 라우팅을 제공한다npx create-next-app@14 폴더이름npm run dev 실행모든 페이지 역할을 하는 컴포넌트들의 부모 컴포넌트모든 페이지의 부모 루트 컴포넌트이므로 헤더나 공통 레이아웃 등 코드를 추가하게되면 모든
12.Next.js - Page Router (2)
목차 API Routes CSS Module 글로벌 레이아웃 Global Layout Next.js 렌더링 방식 API Routes api 응답을 정의하는 코드 localhost:3000/api/hello CSS Module 파일을 불러오는건 모든 페이지에 다 적용되는 에만 바로 import 가능하다. app 컴포넌트 파일이 아닌 다른 컴포넌트 ...
13.Next.js - Page Router (3) - SSR, SSG, ISR
Next.js 의 다양한 사전 렌더링 방식
14.Next.js - App Router (1) - 페이지 라우팅, 레이아웃
페이지 라우팅 오직 page.tsx => 페이지로써 기능 > App Router에서 쿼리스트링이나 url 파라미터처럼 경로상에 포함되는 값들 => 페이지컴포넌트 내에 props로 전달됨 props를 출력해보면 위와같은 객체이므로, 이를 이용하여 쿼리와 파라미터를 가져올 수 있다 캐치올 세그먼트 [.
15.Next.js - App Router (2) - 리액트 서버 컴포넌트
서버측에서만 실행되는 컴포넌트 (브라우저 실행 ❌)
16.Next.js - App Router (3) - 네비게이팅
App Router에서 페이지 이동(네비게이팅)에 대해 알아보자 - 기본적으론 Client Side Rendering
17.Next.js - App Router (4) - 데이터 페칭
18.Next.js - App Router (7) - 풀 라우트 캐시
페이지 캐싱 첫번째 주제 = 풀 라우트 캐시
19.Next.js - App Router (8) - 라우트 세그먼트 옵션
걍 이런게잇구나 하고 알고만 있길
20.Next.js - App Router (9) - 클라이언트 라우터 캐시
일단 static() 페이지와 dynamic() 페이지 차이 다시 복습 근데 와 페이지 모두 루트 레이아웃, 서치바 레이아웃 등 공통된 레이아웃을 사용하는데, 페이지 이동할때마다 중복된 rsc payload를 여러차례 전달받게되는 문제가 생기므로, 이러한 비효율을 줄이기 위해 브라우저 측에 클라이언트 라우터 캐시라는 새로운 캐시 공간을 하나 추가해서...