learnNextjs

inflearn - 한 입 크기로 잘라먹는 Next.js(v15) 이정환위의 수업을 듣고 블로그로 정리한 내용입니다.Next.js는 오직 리액트만을 위한 리액트 전용의 웹 개발 프레임워크 입니다.리액트를 기존보다 훨씬 더 강력하고 편하게 넓은 범위의 개발을 활용하도록

Page Router란?? 현재 많은 기업에서 사용되고 있는 안정적인 라우터 입니다. React Router 처럼 특정 조건으로 페이지 라우팅 기능을 제공합니다. Page Router는 Pages 폴더를 기반으로 페이지를 라우팅 해줍니다. 자동으로 Pages 폴더 안에

먼저 Page Routing은 주소에 맞춰 페이지를 보여주는 설정입니다.예를들어기본 index.tsx에가 있다면기본 로컬 주소인 http://localhost:3000/ 입력을 하면 보이게 됩니다.추가적으로 검색 페이지를 만들어서http://local

네비게이팅은 Next.js 앱의 페이지 이동을 의미합니다.먼저 Next.js는 React의 장점이었던 클라이언트 사이드 렌더링 방식의 빠르고 쾌적한 페이지 이동을 그대로 계승의 초점을 맞춰서어떻게 하면 Next.js에서 클라이언트 사이드 렌더링 방식을 사용하면서 페이지

프리페칭은 전 포스트에서 다뤘던 네비게이팅과 연관이 있는 기능입니다.우선 프리페칭(Pre-Fetching)이란? 사전의 미리 불러오는 뜻을 가지며, 페이지를 사전에 불러온다는 뜻입니다.링크들을 통해서 이동할 수 있는 모든 페이지들을 사전에 미리 다 불러와 놓는 기능을

API Routes란 Next.js 앱에서 API를 구축할 수있도록 도와주는 기능입니다.이 기능을 이용하면 마치 백엔드 API 서버가 하는 일과 동일하게 간단한 API를 구축해서 브라우저로부터 요청을 받아 데이터베이스에서 데이터를 꺼내오거나 하는 일련의 동작들을 직접

Next.js의 스타일링의 설정 방법은 어떻게 될까요?Next의 스타일링은 React에서와 마찬가지로 거의 동일하게 하면 됩니다.Next.js에서는 별도의 파일이나 또는 어떠한 컴포넌트 파일에서 별도로 CSS 파일을 그대로 import 하는 것을 제한합니다.하지만 \_

Next.js의 모든 페이지에 다 적용이 되는 글로벌 레이아웃을 설정하는 방법을 살펴보려고 합니다.레이아웃 설정은https://onebite-books-page-woad.vercel.app/한 입 크기로 잘라먹는 Next.js - 이정환을 참고하여 레이아웃을

페이지별 레이아웃 설정 페이지별 레이아웃 설정은 https://onebite-books-page-woad.vercel.app/ 한 입 크기로 잘라먹는 Next.js - 이정환 을 참고하여 레이아웃을 설정하려고 합니다. 먼저 search 부분부터 레이아웃을 별도로 설

UI는 지금 추천하는 도서 (3개의 추천 책), 등록된 모든 도서 (3개의 추천 책)이 렌더링 되는 것을 만드려고 합니다.index.tsx로 와서 section을 2개로 나눈 후 처음 섹션은 지금 추천하는 도서 두 번째 섹션은 등록된 모든 도서로 구분해줍니다.후 먼저

이제부터는 각 페이지에 필요한 다양한 형태의 데이터들을 백엔드 서버로부터 불러오려고 합니다.백엔드 서버로부터 실제로 데이터를 불러오는 데이터 패칭 기능을 만들어 보겠습니다.React에서는 먼저 컴포넌트 내부에 서버로부터 불러올 데이터를 저장하기 위한 state를 만들어

Next.js의 다양한 사전 렌더링 방식 중에 가장 기본적인 렌더링이 SSR 입니다.브라우저에 요청이 들어올 때마다 매번 계속해서 새롭게 페이지를 사전 렌더링하는 방식입니다.먼저 pages/index.tsx에 컴포넌트 바깥에 함수를 만들면서 시작합니다.이렇게 함수를 만

SSR이라는 방식은 페이지 내부의 데이터를 항상 최신 버전으로 유지할 수 있다는 장점은 있지만, 만약 데이터의 응답 속도가 너무 느려지게 된다면 모든게 늦어지기 때문에 사용자에게 불편함을 제공할 수 있다는 단점이 존재합니다.정적사이트 생성(SSG) 방식은 SSR의 단점

SSG 정적 경로에 적용하기 SSG 사전 렌더링 방식을 프로젝트에 적용을 해보겠습니다. 가장 먼저 index 페이지부터 SSG 방식으로 구현해보겠습니다. index를 SSG로 특정 페이지를 SSG 방식으로 작동 시키는 방법은 SSR 방식과 비슷합니다. SSR에서는

✨ 폴더 구조만으로도 원하는 대로 자유롭게 페이지의 라우팅을 설정 가능요청이 들어올 때마다 사전 렌더링을 진행요청을 받을 때마다 매번 새롭게 페이지를 생성하기 때문에 항상 최신의 데이터를 보장할 수 있다는 장점이 있지만 페이지를 새롭게 생성하는 과정에서는 백엔드 서버에

App Router는 Page Router랑 변경되거나 추가되는 상황이 있습니다.React 18 신규 기능 추가데이터 페칭 방식 변경레이아웃 설정 방식 변경페이지 라우팅 설정 방식 변경하지만 변경되는 것만 있는것이 아닙니다.네비게이팅 (Navigating)프리페칭 (P

App Router 버전의 Next 앱에서도 앱 폴더 밑에 구조를 기반으로 페이지 라우팅이 자동 설정된다는 점이 있습니다.대신에 App Router에서는 page라는 이름을 갖는 파일만 페이지 파일로써 설정이 됩니다.레이아웃도 Page Router랑 마찬가지로 layo

React Server Component란?React 18v 부터 새롭게 추가된, 새로운 유형의 컴포넌트라서 서버측에서만 실행되는 컴포넌트입니다.(브라우저에서 실행은 X)리액트 서버 컴포넌트는 상호 작용이 없어 서버 측에서만 실행되면 되는 컴포넌트들을 서버 컴포넌트들로

기존의 Page Router에서는오직 서버 측에서만 실행이 되는 함수들을 1\. SSR(서버 사이드 렌더링)SSG(정적 사이트 생성)Dynamic SSG(동적 경로에 대한 정적 사이트 생성)사용해 데이터를 받아와서데이터 받아오는 것들은 페이지에서 props에서 받아왔습

Pull Route Cache는 앞선 Page Router에서 배웠던 SSG 방식과 유사하게 빌드타임에 정적으로 페이지를 만들어 놓고 캐시에 보관한 다음에 브라우저에 요청이 들어왔을 때에는 캐시에 저장된 페이지를 그대로 응답해주는 페이지 캐싱 기능입니다.Next의 페이

서버에서 클라이언트로 어떠한 데이터를 넘겨줘야 될 때 보내줘야 되는 데이터의 크기나 너무나도 크거나 또는 서버 측에서 데이터를 준비하는데 걸리는 시간이 오래 걸리게 되면 데이터를 여러 개의 조각으로 쪼개서 쪼개진 작은 용량의 데이터들을 하나하나씩 클라이언트에게 전송하는

서버 액션 서버 액션이란? 브라우저에서 호출할 수 있는 서버에서 실행되는 비동기 함수 입니다. 그래서 서버 액션을 활용하면 별도의 API를 만들 필요 없이 간단한 함수 하나만으로도 직접 호출 할 수 있습니다. 함수 최상단에 'use server'를 적으면 기존의 A

고급 라우팅 패턴 중에 하나로 우니나라 말로는 병렬 라우트라는 뜻을 가지고 있습니다.말 그대로 화면안에 여러개의 페이지를 병렬로 함께 렌더링 시켜주는 패턴입니다.하나의 화면에 여러 개의 페이지 컴포넌트들을 한꺼번에 렌더링하는 방법이죠보통 parallel route는 소

웹페이지에서 평균적으로 많은 용량을 차지하는 요소는 이미지입니다.이미지는 무려 평균적으로 웹페이지의 용량의 무려 58%나 차지합니다..ㄷㄷ개발자에게 이미지 최적화하는 일은 매우 중요한 일입니다.Next에서는 대부분의 최적화 기법들이 자체적으로 다 제공이 되고 있습니다!