[강의] 한 입 크기로 잘라먹는 Next.js #8

Onion·2025년 8월 27일
next.js

Next.js 공부

목록 보기
8/11

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi
위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

서버 액션

1. 서버 액션을 소개합니다

1) 서버 액션(Server Action)이란?

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

  • 클라이언트인 브라우저에서 특정 폼의 제출 이벤트가 발생했을 때 서버에서만 실행되는 함수를 브라우저가 직접 호출하면서 데이터까지 폼 데이터 형식으로 전달할 수 있게 해주는 기능
    = 클라이언트인 브라우저 측에서 특정 폼, 특정 양식의 제출이 발생했을 때 서버 측에서만 실행되는 어떠한 함수를 실행시켜주는 기능

  • 함수의 최상단에 useServer라는 지시자를 붙임
    → 브라우저가 아닌 서버에서만 실행이 되는 서버 액션으로 설정

2) 실습을 위한 환경 준비

  1. vscode로 열기
    vscode에서 .../onebite-next/ 폴더로 열기

  2. 터미널에서 section07 폴더 생성
    vscode에서 /onebite-next/section07/ 폴더 생성

  3. 파일 옮기기
    /onebite-next/section06 폴더에 있는 코드 중 아래 사진에 해당하는 코드만 선택하여 /onebite-next/section07 폴더로 옮기기

  1. 필요한 모듈 다운로드
    생성된 /section07/ 폴더로 vscode에서 다시 열기
    → vscode 터미널을 열어서 npm i 명령어 실행

  2. 개발 모드로 넥스트 앱 실행
    생성된 /section07/ 폴더로 vscode에서 다시 열기
    → vscode의 터미널 열기
    → npm run dev 명령어 실행
    → http://localhost:3000/ 로 이동하면 확인 가능
    → (종료 시에는) Ctrl+D나 Ctrl+C 입력

  3. 백엔드 서버 열기
    vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
    → vscode 터미널을 열고 npm run start 명령어 실행

3) 실습

 

2. 리뷰 추가 기능 구현하기 (with 서버액션)

1) 실습 진행을 위한 환경 세팅

  • vscode로 section07 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기

  • vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
    → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

백엔드 서버에서 제공하는 리뷰와 관련된 API 기능들을 빠르게 이용해보기

 

3. 리뷰 조회 기능 구현하기 (with 서버액션)

1) 실습 진행을 위한 환경 세팅

  • vscode로 section07 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기

  • vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
    → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

 

4. 리뷰 재검증 구현하기

1) 실습 진행을 위한 환경 세팅

  • vscode로 section07 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기

  • vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
    → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

지금까지는 사용자가 리뷰를 작성했을 때 브라우저를 한번 새로고침 해줬어야지만 자신이 작성한 리뷰 확인이 가능했음
→ 리뷰가 등록하자마자 바로 등록되도록 수정 필요

3) 동작 과정

 

5. 다양한 재검증 방식 살펴보기

1) 재검증 방식 5가지

  • (기존과 동일) 해당하는 페이지만 깔끔하게 재검등하도록 동작
    : 두 번째 인수는 생략하고 첫 번째 인수로 특정 페이지의 주소만 명시

  • 특정 경로의 모든 동적 페이지를 재검증
    : RevalidatePath() 메서드 호출할 때, 첫 번째 인수로 폴더의 경로를 적고 두 번째 인수로 문자열로 "page"로 작성
    → 첫 번째 경로와 같은 동적 페이지들이 전부 재검증

  • 특정 레이아웃을 갖는 모든 페이지를 재검증
    : RevalidatePath() 메서드 호출할 때, 첫 번째 인수로 폴더의 경로를 적고 두 번째 인수로 문자열로 "layout"로 작성
    → 첫 번째 경로와 같은 레이아웃 페이지들이 전부 재검증

  • 모든 페이지 재검증
    : RevalidatePath() 메서드 호출할 때, 첫 번째 인수로 /를 적고 두 번째 인수로 문자열로 "layout"로 작성
    → 모든 페이지들이 전부 재검증

  • 태그 값을 기준으로 데이터 캐시 재검증

2) 실습 진행을 위한 환경 세팅

  • vscode로 section07 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기

  • vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
    → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

3) 실습

 

6. 클라이언트 컴포넌트에서의 서버액션

다시 들어보기

0) useActionState

리액트 19버전부터 추가되는 완전 최신의 리액트 훅
폼 태그의 상태를 굉장히 쉽게 핸들링할 수 있도록 도와주는 여러가지 기능 보유

  • 첫 번째 인수: 핸들링하려는 폼에 액션 함수 삽입
  • 두 번째 함수: 폼의 상태의 초기값

1) 실습 진행을 위한 환경 세팅

  • vscode로 section07 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기

  • vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
    → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

중복 제출 방지 등을 위한 코드 수정

 

7. 리뷰 삭제 기능 구현하기

다시 듣기

1) 실습 진행을 위한 환경 세팅

  • vscode로 section07 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기

  • vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
    → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

리뷰 아이템들에 있는 삭제하기 버튼을 클릭하면 하나의 리뷰를 데이터베이스로부터 삭제하는 기능 생성 ▶ 서버 액션을 통해 구현

profile
Onion
눈물이 나도 코드를 계속 까보는 양파
이전 포스트

[강의] 한 입 크기로 잘라먹는 Next.js #7

다음 포스트

[강의] 한 입 크기로 잘라먹는 Next.js #9

0개의 댓글