1.

AWS EC2에서 ubuntu를 연결하고

ssh-keygen -t ed25519 -C "코멘트입력" -f ~/.ssh/id_ed25519 -N ""

위 코드를 입력한다. "코멘트 입력" 부분은 자유롭게 작성하면 된다.(따옴표 포함) 그러면 아래의 문구와 함께 키를 시각적으로 보여준다.

The key's randomart image is: 이상한 그림

실행하고 나면 id_ed25519 / id_ed25519.pub 두 파일이 ~/.ssh 폴더에 생긴다.

2. 다음 단계는 공개키(.pub 파일) 내용을 확인해서 GitHub에 등록

cat ~/.ssh/id_ed25519.pub

위 명령어를 입력하면 'ssh-ed25519 AAAAC3Nza...' 로 시작하는 한 줄짜리 문자열이 출력

위 문자열을 GitHub 레포의 Settings → Deploy keys → Add deploy key 에 붙여넣기

title은 아무렇게나 짓고 key에 입력 그리고 Allow write access → 체크 안 함 (읽기 전용)

3. GitHub SSH 연결 테스트

ssh -T git@github.com

위 코드 입력(GitHub에서 SSH 접속용 전용 계정)

Are you sure you want to continue connecting (yes/no/[fingerprint])? 위 질문에 yes

4. 레포지토리 연결

git clone git@github.com:아이디/레포지토리.git

내 레포지토리의 ssh 부분을 복사해서 연결하기

5. 세팅하기

# 1) 패키지 업데이트
sudo apt-get update

# 2) 필수 빌드 도구 (native 모듈 대비)
sudo apt-get install -y build-essential python3 git

# 3) Node.js LTS 설치 (NodeSource 사용, NVM 불필요)
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# 4) 버전 확인
node -v
npm -v

6. 환경변수 세팅

만약 레포지토리 내 특정 폴더만 필요하면 거기로 들어간다.

레포지토리 이동 후

nano .env

.env 파일 생성

환경변수 입력 후

Ctrl+O → Enter → Ctrl+X 로 저장하기

수정도 같은 방법으로 간으

7. pm2 설치

Express 백엔드를 EC2에서 상시 돌리고 싶다면 pm2 같은 프로세스 매니저를 설치

sudo npm install -g pm2

설치 확인

pm2 -v

8. 실행

npm 설치

npm install

실행

npm run build

9. 잘 연결됐는지 확인

내부 :

curl -i http://127.0.0.1:3001/healthz

위 명령어를 입력하여 HTTP/1.1 200 OK 와 ok 가 뜨면 정상

외부 :

http://<EC2-퍼블릭IP>:3001/healthz

브라우저나 로컬 터미널에서 위 경로 입력

• 이때 expres 백엔드 코드에 healthz 코드가 있어야한다.
• 외부에서 확인이 안된다면 보안그룹에서 규칙 추가

규칙 추가(Add rule):

Type: Custom TCP Port range: 3001 Source:

• 개발/테스트 용: 0.0.0.0/0 (전 세계에서 접근 가능 → 나중엔 보안상 Nginx/80,443만 열어두는 게 좋아요)
• 안전하게 하고 싶으면 본인 IP만 입력 (My IP 선택)

1) 지역(region)을 설정

- 우리가 빌린 컴퓨터가 있는 곳(데이터 센터)
- 주요 사용자들의 위치와 데이터 센터가 가까울 수록 속도가 좋아진다.
 - 즉 내가 한국에 있다고 무조건 한국으로 선택할 필요없이 타겟의 위치로 설정

2) 인스턴스 시작 클릭

3) 정보 설정

1. 이름 설정

   • 원하는 이름 넣기

     

2. 내가 살 OS 설정

   • Ubuntu를 사용 : 최적의 성능을 뽑아내기 위해 가벼운 os 를 사용

     

3. 인스턴스 유형

   AWS에서 빌리는 가상 컴퓨터 한대

   유형 : 컴퓨터 사양 - 초기 서비스를 시작한다면 t2.micro를 사용해도 상관없다. 망하지 않고 규모가 커진다면 확장

4. 키페어

   서버에 접근하기 위한 비밀번호

   새 키페어 생성을 하고 이름을 짓고 그래도 생성하면 .pem 파일을 다운받는다. 이것을 잘 저장하기

5. 네트워크 설정

   세팅하기 클릭

   1) vpc - AWS 안에 만드는 내 회사 전용 네트워크 공간. 그 안에 EC2, RDS 같은 자원을 넣고, IP·라우팅·방화벽을 내가 원하는대로 통제

   2) 보안그룹 - 빌린 인스턴스에서 모든 접근에 대해 검사. 방화벽으로 어떤 IP/서비스(포트)만 들어오거나 나가도 되는지 허용 목록(allow-list)으로 정한다.

   보안 그룹 생성 방법

   a. 방화벽(보안그룹) 생성 b. 보안그룹이름/설명 생성 c. 인바운드 보안 그룹 규칙(ip와 포트 설정)

   • 기본 세팅은 모든 컴퓨터에 접근가능하도록 되어있음

   • 특정 ip를 지정하고 싶으면 소스유형 - 사용자지정 - ip직접입력

   6. 스토리지 구성

      EBS : EC2에 붙이는 저장소(스토리지), 인스턴스를 꺼도 데이터는 남아있다.

4) 인스턴스 시작

인스턴스 시작 버튼 클릭

대시보스 - 인스턴스 실행중에서 관련 내용확인 - 연결 버튼 클릭해서 연결하기

탄력적 ip 연결하기

인스턴스를 생성하고 받는 ip는 임시 ip이기때문에 ip는 바뀐다. 고정 ip를 할당받는 것이 탄력적 ip

네트워크 및 보안 - 탄력적ip

1. 탄력적 ip 주소 할당 클릭 후 기본값으로 할당
2. 할당된 ip를 선택하고 작업 - 탄력적 ip 주소연결
3. 인스턴스 선택에서 연결할 인스턴스를 선택하고 연결 클릭

그러면 이제 ip가 고정된다.

zustand를 설치한다.

# npm을 쓰는 경우
npm install zustand

# yarn을 쓰는 경우
yarn add zustand

# pnpm을 쓰는 경우
pnpm add zustand

2. 저장소 파일 만들고 상태 정의

src/store/useStore.ts

import { create } from 'zustand'

// (1) 스토어가 가질 상태와 액션 타입 정의 (TypeScript 사용 시)
interface CounterState {
  count: number
  increase: () => void
  reset: () => void
}

// (2) create로 스토어 생성
export const useCounterStore = create<CounterState>((set) => ({
  count: 0,                             // 초기 상태
  increase: () => set((state) => ({     // 액션: count++
    count: state.count + 1
  })),
  reset: () => set({                    // 액션: 초기화
    count: 0
  }),
}))

set의 역할

create 함수가 호출될 때, 내부적으로 set(업데이트 함수)과 get(현재 상태를 읽는 함수)을 자동으로 주입해 준다.

1. 객체로 업데이트

   • 단순 대입

   • 얕은 병합

     // 스토어에 { a: 1, b: 2, c: 3 }가 있을 때…
     set({ b: 42 })
     // 결과: { a: 1, b: 42, c: 3 }

2. 함수 콜백으로 업데이트

   • 이전 상태(state)를 참고해서 새 값을 계산

   • 콜백 인자인 state는 “업데이트 직전의 상태”

     // count 값을 이전 값에 +1 해서 업데이트
     set((state) => ({ count: state.count + 1 }))

get의 역할

현재 스토어의 전체 상태를 즉시 조회할 수 있는 기능, 스토어 내에서만 사용할 수 있다.

create((set, get) => ({
  count: 0,
  doubleIfOdd: () => {
    const { count } = get()            // 현재 count 읽기
    if (count % 2 === 1) {
      set({ count: count * 2 })        // 조건부로 업데이트
    }
  }
}))

위 코드에서 doubleIfOdd는 count라는 변수가 존재하지 않아 get을 이용하여 count를 불러와줘야한다. 왜냐하면 count는 자바스크립트의 변수가 아니라 '스토어 객체의 프로퍼티'이기 때문에 doubleIfOdd에서 get으로 호출해주어야 값을 가져올 수 있다.

3. 컴포넌트에 가져와 사용하기

import React from 'react'
import { useCounterStore } from '@/store/useStore'

export default function Counter() {
  const { count, increase, reset } = useCounterStore()
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={increase}>+1</button>
      <button onClick={reset}>리셋</button>
    </div>
  )
}

next.js app router에서 context api를 사용하는 법은 typescript와 같이 소개한다.

2. 코드 소개

1) context 파일 생성

• MyContext.tsx

import React, { createContext, useContext, useState, ReactNode } from 'react';

interface MyContextType {
  data: string;
  setData: React.Dispatch<React.SetStateAction<string>>;
}

const MyContext = createContext<MyContextType | undefined>(undefined);

export const MyProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [data, setData] = useState<string>('초기값'); // 기본값 설정

  return (
    <MyContext.Provider value={{ data, setData }}>
      {children}
    </MyContext.Provider>
  );
};

export const useMyContext = (): MyContextType => {
  const context = useContext(MyContext);
  if (!context) {
    throw new Error('useMyContext는 MyProvider 내부에서 사용되어야 합니다.');
  }
  return context;
};

인터페이스(타입) 정의

interface MyContextType {
  data: string;
  setData: React.Dispatch<React.SetStateAction<string>>;
}

• data : 데이터의 타입을 명시

  React.Dispatch<React.SetStateAction<string>>;

• React.Dispatch는 인자로 React.SetStateAction를 받는다. ```

• useState의 setter함수에 사용하는 함수로 ts에서 useState 자체에서는 setter 함수의 타입을 자동으로 추론하기 때문에 별도로 타입을 명시하지 않아도 작동하지만 context에서는 명시하는 것을 추천

  • React.SetStateAction : 상태를 새값으로 바꾸거나 이전 상태를 기반으로 새 값을 계산
  • React.Dispatch : 상태 업데이트 함수의 타입. React.SetStateAction를 인자로 받아 상태를 업데이트

context 생성

const MyContext = createContext<MyContextType | undefined>(undefined);

• createContext: React의 createContext 함수를 사용하여 Context 객체를 생성합니다.

• 초기값: 초기값으로 undefined를 지정함으로써, 만약 Provider 없이 Context를 사용하려고 하면 에러를 발생시킬 수 있도록 설계되었습니다.

Provider 컴포넌트

export const MyProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [data, setData] = useState<string>('초기값'); // 기본값 설정

  return (
    <MyContext.Provider value={{ data, setData }}>
      {children}
    </MyContext.Provider>
  );
};

• 상태 관리: useState 훅을 사용해 data라는 상태와 이를 업데이트하는 setData 함수를 생성합니다. 초기값은 '초기값'으로 설정되어 있습니다.

• Provider 역할: 생성된 MyContext.Provider에 { data, setData }를 값으로 전달하여, 이 Provider 하위의 모든 컴포넌트가 해당 상태와 업데이트 함수를 사용할 수 있게 만듭니다.

• Next.js 앱 라우터와의 통합: Next.js의 새로운 App Router 구조에서는 이 Provider를 최상위 레이아웃 파일에 래핑하여 페이지 전체에서 전역 상태에 접근할 수 있도록 합니다.

커스텀 훅

export const useMyContext = (): MyContextType => {
  const context = useContext(MyContext);
  if (!context) {
    throw new Error('useMyContext는 MyProvider 내부에서 사용되어야 합니다.');
  }
  return context;
};

• useContext 사용: React의 useContext 훅을 사용해 현재 Context 값을 가져옵니다.

• 안전성 체크: 만약 Provider 밖에서 이 훅을 호출할 경우 context가 undefined가 되므로, 이를 감지하고 명확한 에러 메시지를 던져 개발자가 올바르게 Provider 내부에서 사용하도록 유도합니다.

• 편의성: 이 커스텀 훅을 사용하면 각 컴포넌트에서 useContext(MyContext)를 직접 호출할 필요 없이, 간단히 useMyContext()로 Context 값에 접근할 수 있습니다.

2) 전역 레이아웃에 Provider 적용 (app/layout.tsx)

리액트, 페이지 라우트 next.js는 가장 상위 파일인 app.tsx에 적용하지만 app router는 가장 상위 layout.tsx에 적용한다.

import './globals.css';
import { MyProvider } from '../contexts/MyContext';

export const metadata = {
  title: 'My Next.js App',
  description: 'App Router에서 Context API 사용 예시',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body>
        {/* 앱 전체에 MyProvider 적용 */}
        <MyProvider>
          {children}
        </MyProvider>
      </body>
    </html>
  );
}

MyProvider를 불러와 상위 구조에 감싼다.

3. 데이터 저장(업데이트) 페이지

'use client';

import React from 'react';
import { useMyContext } from '../../contexts/MyContext';
import Link from 'next/link';

export default function SavePage() {
  const { setData } = useMyContext();

  const handleSave = () => {
    // 원하는 데이터를 저장(업데이트)합니다.
    setData('저장된 데이터입니다!');
  };

  return (
    <div>
      <h1>데이터 저장 페이지</h1>
      <button onClick={handleSave}>데이터 저장</button>
      <p>
        <Link href="/read">데이터 조회 페이지로 이동</Link>
      </p>
    </div>
  );
}

useMyContext를 사용하여 setData 함수를 가져온다. setData 함수에 저장할 함수를 만들고 함수를 적용하면 저장된다.

4. 데이터 조회(꺼내쓰기) 페이지 (app/read/page.tsx)

// app/read/page.tsx
'use client';

import React from 'react';
import { useMyContext } from '../../contexts/MyContext';
import Link from 'next/link';

export default function ReadPage() {
  const { data } = useMyContext();

  return (
    <div>
      <h1>데이터 조회 페이지</h1>
      <p>저장된 데이터: {data}</p>
      <p>
        <Link href="/save">데이터 저장 페이지로 이동</Link>
      </p>
    </div>
  );
}

useMyContext를 가져와 data를 불러온다. 불러온 data를 원하는 곳에서 사용한다.

1) vercel 설치 명령어를 프로젝트에 입력

window

npm i -g vercel

mac os

sudo npm i -g vercel

2) vercel 로그인

명령어

vercel login

vercel 로그인 수단을 선택하여 로그인

3) 백엔드 서버 vercel에 배포(선택)

명령어

vercel

아래 질문들이 나온다.

• 계정확인
• 어떤 계정에 배포할지 (내가 가입한 vercel 선택)
• 이미 존재하는 프로젝트와 연결할 것인지?
• 배포할 프로젝트의 이름
• 어떤 디렉토리에 코드가 위치해있는 지 - 기본값으로 설정

4) next 앱 배포

명령어

vercel

같은 질문들이 나온다.

아래 질문들이 나온다.

• 계정확인
• 어떤 계정에 배포할지 (내가 가입한 vercel 선택)
• 이미 존재하는 프로젝트와 연결할 것인지?
• 배포할 프로젝트의 이름
• 어떤 디렉토리에 코드가 위치해있는 지 - 기본값으로 설정

5) vercel에서 동작하는 서버는 vercel에서 배포한 서버의 주소를 입력해야한다.

• 배포한 next 앱은 로컬에서 작동되는 서버와 연결된다. vercel에서 배포한 서버로 바꾸기 위해 설정이 필요하다.

• vercel에 배포한 백엔드의 url를 가져와 vercel에 배포한 next 앱에서 setting으로 들어가 Enviornment Variables(환경변수) 탭에서 'Create New'로 들어가 key와 value를 입력한다.

• 그리고 다시 빌드(redeploy)를 하면 배포한 서버에 연결된다.

6) 터미널에서 재배포

vercel --prod

검색엔진 결과 페이지(SERP)에서 더 높은 순위에 표시되도록 최적화하는 과정

방법

1) 메타 태그 설정

1. Metadata를 설치해준다.

import { Metadata } from "next";

2. index 컴포넌트(page) 위에 metadata를 아래와 같이 작성해준다.

   export const metadata : Metadata = {
   title: "타이틀",
   description : "내용",
   openGraph: {
    title: "타이틀",
    description : "내용",
    images : ["/thumbnail.png"]
   },
   }

   그러면 메타 태그를 내용에 맞게 채워넣어준다. 여기서 openGraph는 sns에 들어가는 메타태그도 포함시킨다.

동적인 값을 통해 메타데이터 설정

동적인 페이지를 데이터가 계속 바뀌기 때문에 그에 맞게 설정해주어야한다.

export async function generateMetadata({
  searchParams,
}: {
  searchParams: Promise<{q?:string}>;
}): Promise<Metadata> {
  //현재 페이지의 메타 데이이터를 동적으로 생성하는 역할
  const { q } = await searchParams;

  return {
    title: `${q} : 한입북스`,
    description : `${q}의 검색결과입니다.`,
    openGraph: {
      title: `${q} : 한입북스`,
      description : `${q}의 검색결과입니다.`,
      images : ["/thumbnail.png"]
    },
  }
}

export default function Page({
  searchParams,
}: {
  searchParams: {
    q?: string;
  };
}) {
  return (
    <Suspense
      key={searchParams.q || ""}
      fallback={<BookListSkeleton count={3} />}
    >
      <SearchResult q={searchParams.q || ""} />
    </Suspense>
  );
}

기존 페이지의 데이터를 받아 오는 것과 같이 함수를 작성하고 데이터를 같이 받아와 return에 작성한다.

• generateMetadata라는 함수를 사용해야한다.
• Promise&ltMetadata&gt 로 타입정의
• api를 불러 올 수 도 있다.

2) favicon 설정

app 폴더 내 favicon.ico 파일을 바꿔준다.

모든 웹 용량에서 이미지가 가장 많은 용량을 차지하는 이미지를 최적화

2. 방법

이미지 컴포넌트 활용

문제점

1. 이미지는 webP나 AVIF 등 경량화된 포맷을 활용하는 것이 아니라 jpeg나 png를 사용한다.
2. 필요한 이미지부터 보여주고 추가적으로 랜더링하는 것이 아닌 당장 필요없는 이미지까지 가져온다.
3. 필요한 이미지 사이즈보다 더 큰 사이즈로 가져온다.

사용법

img 태그 대신 Image 컴포넌트 사용

1. Image 컴포넌트를 import 한다.

   import Image from "next/image";

2. 이미지 컴포넌트 내 경로, 크기 그리고 alt 값을 지정해준다.

   <Image src={coverImgUrl} width={80} height={105} alt={title}/>

3. 이미지가 저장된 이미지가 아니라 외부 서버에서 가져온 이미지면 보안때문에 자동으로 차단되어 오류가 난다.

이때 Next.config에 어떤 서버에서 가져온 이미지는 안전하다고 알려줘야한다.

images : {
    domains: [
      '도메인 주소'
    ]
  }

images안에 domain을 넣고 허용할 주소를 입력해준다.

더 많은 방식

특정 조건일 때 원래 페이지가 아닌 다른 페이지를 랜더링하게 설정하는 기술

사용자가 특정 경로로 접속해 새로운 페이지를 요청할때 페이지를 가로채서 다른 페이지를 대신 랜더링한다.

초기접속요청이 아닐때만 인터셉팅이 된다. 즉, 사용자가 초기 접속이 아닌 클라이언트 방식(link, router push)으로 접근했을 때만 인터셉팅 라우트가 동작

예를 들어 인스타그램에서 피드를 클릭하면 상세 피드가 나오고 뒤로 가기를 하면 다시 피드화면이 나오게 된다. 그리고 상세피드에서 새로고침(클라이언트 방식으로 접근)을 하면 완전히 이동하게 된다.

2. 사용법

1) 세팅

1. 가로챌 폴더와 똑같은 이름의 폴더를 만들고 앞에 (.)또는 (..)을 붙여준다. ex) (.)book/[id]
   • 점이 하나라면 상대경로로 동일한 경로 상에 있다는 것을 알려준다. (.)
   • 인터셉팅하려는 경로가 한뎁스 더 있다면 점을 두개 붙여주면 상위 경로의 폴더를 인터셉팅한다는 뜻이다. (..)
   • 두 단계 위에 있다면 두번 적어준다. (..)(..)
   • 점이 세개라면 app폴더 바로 밑의 폴더를 인터셉팅한다는 뜻이다. (...)
2. 만든 폴더 내 page.tsx를 만들어준다.
3. 그러면 해당 페이지는 인터셉팅이 된다.
4. 인터셉팅할 페이지에 원래 랜더링 될 페이지를 import 해주면 같은 내용으로 랜더링된다. 이때 모달창으로 뜨게 하던지 다른 방식으로 나타나게 활용할 수 있다.

하나의 화면에 여러개의 페이지를 병렬로 랜더링 시켜주는 패턴

고급 라우팅 패턴 중 하나로 sidebar 나 feed 등 여러 페이지(page.tsx에 작성되는 페이지 컴포넌트)를 병렬로 랜더링 시켜준다.

소셜네트워크나 대시보드 등에 구축

2. 사용법

1) 세팅하기

1. parallel 폴더를 만들어준다.
2. 폴더 내 layout과 page를 만들어준다.
3. parallel 폴더 아래 슬롯을 만들어줘야한다.
   • 슬롯은 '@이름'으로 만들어준다.
   • 병렬로 랜더링될 페이지 컴포넌트를 보관하는 폴더
   • 슬롯 내 페이지 컴포넌트는 부모의 레이아웃 컴포넌트에 props로 자동 전달
4. 부모의 layout 컴포넌트에는 children과 같이 설정한 슬롯의 이름을 받아올 수 있다. layout.tsx

   import { ReactNode } from 'react'
   

export default function Layout({ children, sidebar }:{ children:ReactNode; sidebar:ReactNode; }) { return (

``` sidebar와 children이 병렬로 연결되어있다. 슬롯의 제한은 없다.

*폴더 구조(예시) *

parallel(폴더) ㄴ @sidebar - page.tsx

• layout.tsx
• page.tsx

2) 슬롯 내 새로운 페이지 추가

폴더구조(예시)

parallel(폴더) ㄴ @sidebar ㄴ @setting - page.tsx - page.tsx ㄴ @feed - page.tsx - default.tsx

• layout.tsx
• page.tsx
• default.tsx

1. @setting 폴더를 슬롯 안에 만든다.
2. setting 폴더 내 page.tsx 컴포넌트를 만들어준다.
3. /parallel/setting 경로로 이동한다면 setting 폴더 내의 page.tsx가 랜더링된다.
   • setting 폴더가 없는 슬롯은 404 not found가 되어야하지만 next에서는 이전의 페이지를 유지한다.
4. link 컴포넌트를 이용해 클라이언트 사이드 랜더링 방식으로 이동할 때만 가능
   • 초기접속에서 주소로 바로 /parallel/setting 접속해서 들어가면 슬롯의 이전값을 찾을 수 없기 때문에 404 페이지가 나타난다.
5. 위 문제를 해결하기 위해 default 페이지를 만든다. (children 페이지에도 추가)

브라우저에서 호출 할 수 있는 서버에서 실행되는 비동기 함수

서버액션을 활용하면 api를 만들필요없이 함수 하나만으로 브라우저에서 Next 서버측에서 실행되는 함수를 직접 호출할 수 있다.

2. 활용

특정 폼 특정 양식에서 사용

예시

export default function Page() {
    const saveName = async (formData: FormData) => {
        "use server";

        console.log(formData)
        const name = formData.get("name");
        await sql`INSERT INTO Names (name) VALUES (${name})`; //sql문
        await saveDB({ name:name}); // DB에 저장
    }

    return (

        <form action={saveName}>
            <input name="name" placeholder="이름을 입력해주세요" />
            <button type="submit">제출하기</button>
        </form>
    )
}

1. input에 이름을 적고 제출 버튼을 누르면 form 태그의 action의 saveName 함수가 실행된다.
2. 함수 내 "use server"가 있으면 서버 액셜으로 설정된다.
3. input 태그의 값이 formData의 매개변수로 전달이 된다.
4. save name 함수의 formData에서 값을 꺼내와서 DB에 값을 직접 저장한다거나 sql문에서 활용할 수 있다.

서버에서만 실행되는 함수를 브라우저가 직접 호출하면서 데이터까지 formData로 전달할 수 있게 해주는 기능 - 기존에서 api를 사용했어야했는데 js만으로도 가능해졌다.

사용 이유

api를 사용하려면 경로, 예외처리 등등 손이 많이간다. 단순한 기능을 사용할 때 코드가 간결해진다. 브라우저가 아닌 오직 서버만 실행되어 보안상으로 민감한거나 중요한 데이터를 다룰때 유용

재검증 구현

입력 내용이 화면에 바로 반영되어야 할 경우 보통 input을 통해 데이터를 전달하면 바로 적용이 되지 않고 새로고침을 해야 반영이 된다. 이를 해결하기 위해 재검증 구현이 필요하다.

데이터가 입력이 되면 재랜더링을 통해 재검증이 되어야한다.

• revaliatePath() 사용하기

import { revalidatePath } from "next/cache";

try {
    ...
    revaliatePath('경로') 
}

next 캐시에서 revalidatePath를 불러오고 불러온 경로에 페이지를 인수로 전달한다. 그러면 인수로 전달한 페이지를 재검증한다.

revalidatePath는 next 서버에게 인수로 전달한 경로의 페이지를 다시 생성(재검증)해달라는 메소드

주의점

1. revalidatePath 메소드는 서버측에서만 호출할 수 있어 서버 컴포넌트에서만 사용이 가능하고 클라이언트 컴포넌트에서는 사용이 불가능하다.
2. revalidatePath 메소드는 인수로 전달한 경로를 전부 재검증하기 때문에 해당 페이지의 모든 캐시도 무효화한다. force-cache를 설정하더라도 캐시가 다 날라간다.
3. 데이터 캐시 뿐아니라 페이지를 캐싱하는 풀라우트 캐시도 삭제된다. 다시 풀라우트 캐시를 저장해주지 않는다.

다양한 재검증 방식

1. 특정 주소에 해당하는 페이지만 재검증

revaliatePath('경로') 

2. 특정 경로의 모든 동적 페이지를 재검증

   revaliatePath("경로/폴더경로", "page") 

   폴더경로나 파일의 경로를 명시

3. 특정 레이아웃을 갖는 모든 페이지 재검증

   revaliatePath('/경로', "layout") 

   레이아웃을 재검증

4. 모든 데이터 재검증

   revaliatePath('/', "layout") 

5. 태그기준, 데이터 캐시 재검증

import { revalidateTag } from "next/cache";

revaliateTag('태그명') 

태그 값을 갖는 데이터 캐시 재검증 태그는 데이터 페칭에 적용되는 옵션에 태그를 지정해준다. 지정해준 태그를 활용하여 재검증을 한다. import 해주어야함

• 태그 설정

const response = await fetch( api 주소, { next: { tags : ['태그명']} } )

태그 방식이 불필요한 캐시를 삭제하지 않고 가능하다.


## 클라이언트 컴포넌트에서 서버액션

import { useActionState } from "react";

export default funtcion Page () { const [state, formAction, isPending] = useActionState( createReviewAction, null ); }

useActionState는 리액트 19 버전에서 출시
폼 태그의 상태를 쉽게 다룰 수 있는 기능이 있다.

- 기본적으로 2개의 인수를 전달하며 호출
1. 다룰 form의 액션 함수를 넣어준다.
2. 두번째 인수는 form 상태의 초기값을 넣어준다. (null 등등)

- const 배열 형태로 3개의 값을 반환
1. form의 state값 반환
2. form의 액션을 의미하는 formAction 반환
3. 로딩 상태를 의미하는 isPending 반환

그러면 전달받을 form의 액션 값을 formAction으로 설정해 실행시켜주면 useActionState 훅이 인수로 전달한 createReviewAction을 실행. 자동으로 state와 pending 값을 관리


createReviewAction.ts

export default funtcion createReviewAction () { if (!bookId || !content || !author) { return { status: false, error: "내용을 입력해주세요", }; } }

특정 서버액션 조건에서 반환된 값을 사용할 수 있다.

특정 조건으로 action이 실패했다면
status로 액션이 실패했음을 알려주고 error 프로퍼티로 실패 이유를 알려줄 수 있다.

추가로 try catch문에서도 실패 시 반환값을 전달할 수 있다.

useEffect(() => { if (state && !state.status) { alert(state.error); } }, [state]);

위 처럼 input의 제어할 수 있고 아래처럼 state 값으로 상황에 맞는 에러메세지를 추가할 수도 있다.

오류 발생 시 미리 만들어둔 오류페이지를 보여주는 것

2. 사용법

에러가 발생한 대상과 같은 위치에 에러가 발생했을 때 보여줄 페이지 컴포넌트인 error.tsx(jsx)를 만들어준다. (하위 폴더까지 적용)

• error.tsx

  "use client"
  

import { useEffect } from "react" import { useRouter } from "next/navigation";

export default function Error({error, reset,} : {error:Error; reset:()=> void;}) { useEffect(() => { console.error(error.message) },[error])

const router = useRouter();

return (
    <div>
        <h3>오류가 발생했습니다.</h3>
        <button onClick={()=> reset()}>다시 시도</button> // 해결안될 수도 있음
        <button onClick={()=> {
            router.refresh(); //현재 페이지에 필요한 서버 컴포넌트들을 다시 불러옴
            reset(); // 에러 상태를 초기화, 컴포넌트들을 다시 랜더링
            }}>다시 시도</button>
    </div>
)

}

```

1. use client로 클라이언트 페이지로 설정(서버나 클라이언트 환경 둘다 대응 가능)
2. error props로 에러 메세지 출력가능 (이때 type은 error로 설정)
3. reset props가 제공 , 에러가 발생한 페이지를 복구하기 위해 다시 한번 컴포넌트를 랜더링시켜본다. - 클라이언트 측에서만 리랜더링이 실행되어 서버측 오류이면 해결이 되지않는다.(router함수를 사용하여 필요한 컴포넌트만 다시 불러오기)
4. router.refresh() 함수를 실행시키고 reset() 함수를 실행시키기 위해 startTransition 함수를 사용하면 된다.

startTransition

상태 업데이트나 UI 전환이 비동기적이고, 덜 중요한 작업으로 처리되도록 만들어 주는 API

콜백 함수를 인수로 전달받아 콜백함수 안에 ui를 변경시키는 작업을 일괄적으로 실행

스트리밍 : 서버에서 클라이언트로 데이터를 넘겨야할 때 보내야할 데이터가 크거나 준비시간이 오래걸릴 때 데이터를 여러개의 조각으로 나눈 후 하나씩 전송한다.

데이터가 모두 불러와지지 않은 상태에서도 먼저 불러올 수 있는 컴포넌트를 불러오고 나중에 랜더링이 오래걸리는 페이지를 불러온다.

dynamic page에서 자주 사용한다. static page에 비해 미리 페이지를 그릴 수 없어 페이지 응답이 오래 걸릴 때 스트리밍을 사용해 빠르게 랜더링이 되는 부분만 먼저 보여주고 오래 걸리는 컴포넌트는 후속으로 가져온다.

2. 사용법

1) 페이지 스트리밍 적용

폴더 내 loading.js나 loading.tsx 파일을 만든다. 그러면 같은 폴더와 하위 폴더의 dynamic page 파일이 로딩중일 때 만든 loading 파일이 대체 ui로 스트리밍된다.

주의사항/특징

• 해당 폴더와 하위 폴더 모두 적용이 된다.
• 모든 페이지에 스트리밍 되는 것이 아니라 async가 붙어 비동기로 작동하는 페이지 컴포넌트에만 제공한다. 동기적인 컴포넌트라면 적용되지 않는다.
• loading 파일은 페이지 컴포넌트에만 적용된다. 일반적인 컴포넌트는 적용불가능
• loading 파일은 쿼리스트링이 변경될때는 트리거 되지 않는다. - 쿼리스트링의 값이 바뀌면 적용되지 않는다.

2) 컴포넌트 스트리밍

컴포넌트와 쿼리스트링에서 스트리밍을 사용하는 방법이다.

import { Suspense } from "react";


 <Suspense key={searchParams.q || ''}  fallback={<div>Loading...</div>}>
      <SearchResult q={searchParams.q || ""}/>
    </Suspense>

1. suspense를 import해온다.
2. 원하는 컴포넌트를 suspens로 감싼다.
3. fallback 함수를 통해 대체 ui를 설정한다.
4. query string이 있을 때는 바뀌는 key값을 적용해준다.

브라우저에 저장되는 캐시로 페이지 이동의 효율성을 위해 페이지의 일부 데이터를 캐싱

여러 개의 페이지가 공통된 레이아웃을 사용하면 브라우저에서 여러번 같은 내용을 요청하는 비효율 성이 있다. 이를 해결하기 위해 클라이언트 라우터 캐시를 만들어 페이지에 접속하려할 때 RSC payload의 값 중 레이아웃의 값만 따로 모아 저장한다. 새로운 페이지를 요청할때 중복되는 값은 클라이언트 라우터 캐시에서 가져와서 사용한다.

강제로 특정 페이지를 static 또는 dynamic 페이지로 설정하는 등 페이지의 동작을 강제로 설정

2. 사용법

약속된 이름의 변수를 설정하고 값을 설정해서 내보내면 페이지의 설정을 강제로 조정할 수 있는 기능 - 라우트 세그먼트 옵션

export const dynamic = "옵션";

특정 페이지의 유형을 강제로 static, dynamic 페이지로 설정

옵션 1. auto : 기본값, 아무것도 강제하지 않음 2. force-dynamic : 페이지를 강제로 dynamic 페이지로 설정 3. force-static : 페이지를 강제로 static 페이지로 설정 - 모든 dynamic 요소를 static으로 작동되게 함 4. error : 페이지를 강제로 static 페이지로 설정 (dynamic 요소가 있다면 오류를 반환)

특별한 상황이 아니라면 권장되지 않음. 자연스럽게 가자

Next 서버측에서 빌드타임에 특정 페이지의 랜더링 결과를 캐싱하는 기능

캐싱된 특정 페이지를 다시 요청하면 캐시에 저장된 내용을 전송한다.

2. 특징

Static Page에만 full route cache가 적용된다.

Dynamic page vs Static page

Dynamic Page

특정 페이지가 접속 요청을 받을 때 마다 변화가 생기거나 데이터가 달라질 경우

1. 캐시 되지 않는 Data Fetching을 사용할 경우 ex) {cache:no-store}
2. 동적함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 있을 때

Static Page

Dynamic Page가 아니면 모두 Static Page - default

빌드 타임에 풀 라우트 캐시로 저장된다.

Revalidate (갱신)

설정한 시간이 지나면 갱신이 되도록 할 수 있다.

최적화하기

• Dynamic Page를 Static Page로 변경해주면 최적화를 할 수 있다. 동적함수가 없는 컴포넌트에서 캐시를 저장할 수 있는 항목을 캐싱하도록 설정 (revaliate 옵션도 static으로 반영됨)

• 동적함수가 있는 페이지에서 캐시를 저장하도록 설정하면 조금 더 빠르게 최적화가 가능하다. ({cache:"force-cache"}

• 동적 경로를 가지는 페이지(쿼리스트링 등등)를 Static page로 설정하려면 generateStaticParams라는 약속된 이름의 함수를 통해 return으로 어떤 url 파라미터가 빌드타임에 존재하는지 설정

    export function generateStaticParams () {
      return [{id:"1"}, {id:"2"}, {id:"3"}]
    }

  • 위 함수가 존재하는 페이지는 데이터 캐싱이 되지 않는 페이지라도 강제로 static이 된다.

  • return에는 문자열로만 데이터 설정

  • page router의 getStaticPaths와 비슷

    generateStaticParams값으로 명시하지 않은 값을 404페이지로 보내려면

        export const dynamicParams = false;
        를 generateStaticParams 위에 입력

번외

빌드타임에 클라이언트 동작을 하는 함수를 불러오려면 오류가 생긴다. 이때 suspense(컴포넌트 스트리밍)로 클라이언트 동작을 하는 컴포넌트를 묶어주면 해결

import {  Suspense } from "react";

<Suspense fallback={<div>Loading...</div>}>
  <Searchbar /> // 쿼리스트링이 있는 컴포넌트
</Suspense>

여러 api 요청 중 중복으로 발생하는 요청을 캐싱해서 한반만 요청 수 있게 자동으로 데이터 페칭을 최적화

동일한 api호출이 반복되면 리퀘스트 메모이제이션으로 캐싱하여 동일한 요청에 대응한다.

• 데이터 캐시와는 다르다 여러 요청에 대한 중복에 대해서만 대응하기 때문에 랜더링이 종료되면 모든 캐시가 소멸된다. 만약 접속이 여러번 일어나면 그때마다 리퀘스트 메모이제이션이 작동 <-> 데이터 캐시는 서버가 중단되기 전까지 저장된다.

• 앱라우터 방식에서는 api를 필요한 컴포넌트에서 요청하기 때문에 중복된 요청이 있을 수 있다. 그래서 해당 기능이 존재한다.

fetch 메서드를 활용해 불러온 데이터를 Next 서버에 보관하는 기능(캐싱)

2. 사용법

fetch메서드의 두번째 인수에 객체 형태로 설정하여 사용가능하다. (axois 등에서는 불가)

const response = await fetch(`~/api`, {옵션});

옵션

1) {cache: "force-cache"}

- 요청 결과는 무조건 캐싱한다. 
- 최초 한번만 호출됨
- 14버전에서 기본값으로 지정

2) {cache: "no-store"}

- 데이터 페칭의 결과를 저장하지 않는 옵션
- 캐싱을 아예 하지 않는다.
- 15버전에서 기본값으로 지정

3) {next: {revalidate : 시간 }}

- 특정 시간을 주기로 캐시를 업데이트
- page router의 ISR 방식과 유사

4) {next: {tags : ['a'] }}

- 요청이 들어왔을 때 데이터를 최신화 (on-demand Revalidate)

앱 라우터에서 데이터를 가져오는 방법

2. 사용법

페이지 라우터에서의 방법

getServerSideProps, getStaticProps 등등 특수한 함수를 사용

• 데이터 드릴링으로 props를 넘겨줘야하는다는 문제점이 있는데 앱라우터에서 개선

앱라우터

데이터가 필요한 컴포넌트에서 직접 데이터를 페칭한다.

사용법

1. 데이터를 불러올 컴포넌트에 async를 붙여 비동기로 불러올 수 있게 한다.
2. ``` const response = await fetch(서버주소); if(!response.ok) { return
   Error...
   } const 이름 = await response.json();
3. 2번과 같이 await와 함께 데이터를 불러오는 함수를 컴포넌트 안에서 작성가능
4. 만약 한페이지에 여러개의 api를 사용한다고 하면 컴포넌트를 분리해 각각 api에 맞는 컴포넌트를 작성 후 해당 컴포넌트를 넣어준다.

기존 페이지 라우터 방식과 비슷하지만 서버 컴포넌트라는 개념이 추가되어 방식이 변경된다.

앱 라우터 js 번들에는 클라이언 컴포넌트만 포함되어 서버 컴포넌트는 포함이 되지않아 서버 컴포넌트로 구성된 RSC Payload도 함께 전달해주어야한다.

2. 사용법

기본

import Link from "next/link";

 <Link href={'/'}>index</Link>

link를 import 해주고 link 태그를 사용하여 연결해준다.

프로그래매틱한 이동법

함수 등을 사용하여 페이지를 이동시키는 법

import { useRouter } from "next/navigation";

export default function Searchbar() {
    const router = useRouter();

    const onSubmit = () =>{
        router.push(`/search?q=${search}`);
    }

    return (
        <div>
            <input value={search} onChange={onChangeSearch}/>
            <button onClick={onSubmit}>검색</button>
        </div>
    )
}

1. 앱 라우터에서는 페이지 라우터와 달리 next/navigation에서 useRouter를 불러와야한다.
2. 함수 내 router를 사용하여 이동할 페이지를 연결해준다.
3. 연결하고 싶은 버튼에 함수를 달아준다.

앱라우터의 프리패칭(pre-fetching)

링크들이 존재해 이동할 가능성이 있는 모든 페이지의 데이터를 미리 불러오는 동작

• 개발모드에서 확인할 수 없고 npm run build -> npm run start로 프로덕션 모드로 확인가능

앱 라우터의 모든 페이지는 static 하거나 dynamic 페이지로 나뉜다. staic 페이지 : 빌드 타임이 미리 생성된 정적인 페이지 -rsc와 js 번들 둘다 불러옴 dynamic 페이지 : 브라우저가 요청할 때 마다 생성되는 동적인 페이지 - rsc만 프리 패칭 후 js 번들은 페이지 이동이 발생했을 때만 불러온다.

오직 서버측에서만 실행되는 컴포넌트

기존 next.js는 js bundle을 브라우저로 넘길 때 'react hook, 이벤트 핸들러' 등 상호작용이 있는 컴포넌트와 상호작용이 없는 컴포넌트 둘 다 넘긴다.

상호작용이 없는 컴포넌트는 굳이 브라우저에 여러번 전송(hydration)할 필요가 없다.

페이지 라우터는 모든 컴포넌트를 묶어 브라우저에 전송하기 때문에 js bundle의 용량이 커지게 된다.

그래서 이런 문제를 해결하기 위해 서버 컴포넌트를 사용한다.

2. 서버 컴포넌트

딱 한번만 실행되고 여러번 실행될 필요가 없다.

기본적으로 모든 컴포넌트가 서버 컴포넌트이기 때문에 클라이언 컴포넌트(기본 상호작용이 있는 컴포넌트)만 따로 설정해주면 된다. - console.log가 찍히지 않음

사용

"use client"

클라이언트 컴포넌트로 만들고자 하는 파일 맨위에 디렉티브(지시자- 상단의 문구)를 입력해준다. (따옴표까지)

서버 컴포넌트와 클라이언트 컴포넌트의 구분

• 서버 컴포넌트 HTML의 고유의 기능인 link 등은 서버

• 클라이언트 컴포넌트 useState, useEffect 등 상호작용이 일어나는 페이지

주의사항

1. 서버 컴포넌트에는 브라우저에서 실행될 코드가 포함되어서는 안된다.

• 상호작용이 일어나면 안된다. (useEffect, useState, onChange, onClick, 라이브러리 ...)

2. 클라이언트 컴포넌트는 클라이언트만 실행되지 않는다.

• 처음에 서버 클라이언트와 같이 실행이 된다.

3. 클라이언트 컴포넌트에서 서버 컴포넌트를 import 할 수 없다.

• 초반에는 두 컴포넌트가 같이 실행이 되어 동작하지만 브라우저에서 하이드레이션을 위해 한번 더 실행이 될 때는 클라이언트 컴포넌트의 코드는 존재하지만 서버컴포넌트는 존재하지 않아 없는 코드를 import하게 되어 가능하지 않다고 한다.
• 컴포넌트 양이 많아지게 되면 불편함이 따른다 이때 next.js는 서버 컴포넌트를 자동으로 클라이언트 컴포넌트로 바꿔준다. 최대한 서버 컴포넌트로 사용하기
• 그래서 클라이언트 컴포넌트에 children을 사용하여 서버 컴포넌트를 넘겨주는 형식으로 사용

4. 서버 컴포넌트에서 클라이언트 컴포넌트에게 직렬화 되지 않는 Props는 전달 불가하다.

• 직렬화 : 객체, 배열, 클래스 등의 복잡한 구조의 데이터를 네트워크 상으로 전송하기 위해 아주 단순한 형태(문자열, byte)로 변환하는 것
• 서버 컴포넌트에서 클라이언트 컴포넌트로 함수같은 값들은 props로 전달할 수 없다.