분류 전체보기

[Next.js] page router - SSG(정적 사이트 생성)

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.13) SSG 1. 소개 및 실습2.14) SSG 2. 정적 경로에 적용하기2.15) SSG 3. 동적 경로에 적용하기2.16) SSG 4. 폴백옵션 설정하기2.13 SSG 1. 소개 및 실습SSR의 장단점장점 : 브라우저에 접속 요청이 들어올 때마다 사전 렌더링 과정에서 백엔드 서버에서 새로운 데이터를 요청하면서 페이지 내부의 데이터를 항상 최신 버전으로 유지할 수 있음단점 : 데이터 페칭이 너무 느리게 되면 사용자 경험이 안좋아진다.SSG(정적 사이트 생성)란SSR의 단점을 해결할 수 있는 사전 렌더링 방식.빌드 타임에 미리 페이지를 사전 렌더링 하는 방법(페이지를 미리 딱 한 번 생성한다)SSG의 장단점장점 : 사전 렌더링 과정에 많은 시간..

[Next.js] page router - SSR

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.11) SSR 1. 소개 및 실습2.12) SSR 2. 실습getServerSidePropsgetServerSideProps는 페이지가 SSR 방식으로 사전 렌더링이 이루어지게 한다.export const getServerSideProps = () => { // 컴포넌트보다 먼저 실행되어서, 컴포넌트에 필요한 데이터 불러오는 함수 const data = "hello"; return { props: { data, }, };};getServerSideProps는 약속된 이름의 함수인데 이를 export하면 해당 페이지는 그때부터 SSR로 동작하게 된다. 어떻게 작동하는가1. 해당 페이지 경로로 페이지를 요청2. 넥스트 서버..

[Next.js] page router 사전 렌더링과 데이터페칭

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.10) 사전 렌더링과 데이터페칭React app 에서의 데이터 페칭리액트 앱은 CSR로 브라우저가 렌더링을 직접 처리하는 방식으로 동작했다.따라서 FCP 시점으로 오기까지도 오래 걸린다. 리액트 앱에서 데이터 페칭은 컴포넌트가 마운트된 이후에 진행되기 때문에 FCP 이후에 추가적인 시간이 소요된다.즉, 데이터 요청 시점이 느려지게 되는 단점 발생 Next.js의 다양한 사전 렌더링1. 서버사이드 렌더링(SSR)사전 렌더링의 과정 중에 데이터 패칭을 동시에 수행할 수 있다.따라서 데이터를 요청하는 시점이 매우 앞서기 때문에 사용자에게 데이터 패칭이 이미 완료된 웹페이지를 추가적인 로딩 없이 보여줄 수 있다.이는 가장 기본적인 사전 렌더링 방식이고,..

[Next.js] page router 페이지별 레이아웃 설정

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.8) 페이지별 레이아웃 설정하기페이지별로 특정 Layout 컴포넌트를 적용하는 방법import SearchableLayout from "@/components/searchable-layout";import style from "./index.module.css";import { ReactNode } from "react";export default function Home() { return ( 인덱스 H2 );}Home.getLayout = (page: ReactNode) => { return {page};}; 페이지마다 특정 Layout 컴포넌트를 적용해야 할 때가 있는데, 그럴 때는 getLayout 메..

[Next.js] page router - API Routes

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.5) API Routes2.5 API RoutesAPI Routs란?Next.js 앱에서 API를 구축할 수 있도록 도와주는 기능마치 백엔드 API 서버가 하는 일고 동일하게 간단한 API를 구축해서 브라우저로부터 요청을 받아 데이터베이스에서 데이터를 꺼내온다던가 아니면 다른 서드파티에 데이터를 불러와서 전달을 해준다는 등의 동작을 만들 수 있다. API Routes 실습pages/api 아래에 API 경로로 만들고 싶은 이름으로 파일 만들어준다. (ex api/time 으로 하고 싶으면 time.ts)import type { NextApiRequest, NextApiResponse } from "next";export default functi..

[Next.js] page router - 프리페칭

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.4) 프리페칭2.4 프리페칭프리페칭(Pre-Fetching)이란?현재 보고 있는 페이지에서 링크들을 통해 이동할 수 있는 모든 페이지들의 자바스크립트 코드를 사전에 미리 다 불러오는 기능 프리페칭이 필요한 이유사전 렌더링 파트에서 원래 Next.js에서 초기 접속 요청이 발생하면 서버가 브라우저에게 html 페이지를 응답한 이후에 후속으로 모든 자바스크립트 코드를 번들 파일 형태로 전달을 해주고, 모든 자바스크립트 코드를 번들 파일 형태로 전달해주기 때문에 페이지 이동이 발생했을 때 서버에게 별도의 요청 없이 브라우저에서 자바스크립트 코드를 실행시켜서(클라인언트 사이드 렌더링) 알아서 처리를 한다고 했다. Next.js는 모든 자바스크립트 코드들..

[Next.js] Page Router, 설정, 네비게이팅

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 2.1) Page Router를 소개합니다.2.2) 페이지 라우팅 설정하기2.3) 네비게이팅2.1 Page Router를 소개합니다Page Router 란?많은 기업에서 활용되고 있는 가장 안정적인 라우터특정 조건을 기준으로 웹서비스 내에 페이지를 분할하고 또 그렇게 분할된 페이지 간의 이동을 처리하는 기능을 제공파일의 이름(혹은 폴더의 이름)을 기반으로 페이지 라우팅을 제공 동적 경로/page/1, /page/2... 처럼 가변적인 값을 포함하고 있는 경로(블로그 게시글 주소 등)/page 폴더 하단에 [id].js 로 대괄호를 통해 만들어줄 수 있다. npx(node package execute)라이브러리들이 실제로 올라가있는 서버인 npmjs...

[Next.js] Next.js?

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 1.1) Next.js를 소개합니다.1.2) Next.js 사전렌더링 이해하기1.3) 실습용 백엔드 서버 세팅하기1.4) 본격적인 학습에 앞서Next.js 라는 기술은 어떤 특징을 가지고 있는가?Next.js- Next.js : 리액트만을 위한 리액트 전용의 웹 개발 프레임워크 기존의 리액트 기술 + 페이지 라우팅 + 다양한 최적화 기능 등등의 추가 기능들을 몇 개 덧붙여 놓은 리액트의 확장판 vercel에서 개발Framework vs LibraryNext.js는 리액트 전용의 웹 개발 프레임워크이지만, React는 UI 개발을 위한 라이브러리이다. 1. 기능 구현의 주도권이 누구에게 있는가Framework : 주도권을 Framework가 가..

[리팩터링 2판] 리팩터링 카탈로그 보는 법(ch5)

ch5 리팩터링 카탈로그 보는 법리팩터링 형식- 이름 : 이름은 리팩터링 용어를 구축하는 데 중요하다. - 개요 : 리팩토링의 핵심 개념 -> 원하는 리팩터링을 찾을 때 도움 될 것이다.- 배경 : 리팩터링 기법이 왜 필요한지, 그 기법을 적용하면 안 되는 상황을 설명- 절차 : 리팩터링하는 구체적인 과정- 예시 : 해당 리팩터링 기법을 실제로 적용하는 간단한 예와 효과