[Next.js] Section05 백엔드 개발자가 드디어 API 문서를 주었다

백엔드 서버 세팅하기

백엔드 개발을 시작하기 위해 Node.js와 PostgreSQL을 설치를 해주면 된다. 

PostgreSQL 설치과정

옵션이 4개가 있는데 위에서 부터 차례대로 설명을 하자면

• PostgreSQL Server : PostgreSQL의 핵심 데이터베이스 서버이고, 이 서버가 있어야 데이터베이스를 생성하고, 데이터를 저장하고, SQL을 실행할 수 있다. 
• pgAdmin4 : 웹 기반 GUI 툴이다. SQL 쿼리를 실행하고 데이터베이스 객체를 관리할 수 있고, CLI가 익숙하지 않은 경우, GUI 환경에서 편하게 작업할 수 있도록 도와준다. (강의에서도 체크를 하라고 얘기를 했다.)
• Stack Builder : PostgreSQL용 추가 확장 기능 및 패키지를 설치하느 ㄴ도구이다. 
• Command Line Tools : psql, pg_duml, pg_restore 같은 CLI 도구들이 포함이 되어 있다. 

Redis 설치

Mac 기준으로 brew install redis <- 명령어만 입력하면 끝난다.

 

백엔드 서버 실행

1. pgAdmin 실행해서, 데이터베이스가 정상적으로 동작하는지 확인

2. 프로젝트 루트에서 개발 서버를 실행한다. npm run start:dev

3. Redis 관련 에러가 발생하면 Redis 서버를 실행을 해야 한다. redis-server

Redis 서버를 실행 안시켜서 나오는 에러이다...

---

회원가입 실제로 하기

회원가입을 할 때 개발자 도구에서 네트워크 탭 요청을 확인을 하는게 좋다. 

 

⚠️ 서버 액션의 특징

• 요청이 실패해도 성공처럼 보일 수 있음
• 실패 로그가 명확하지 않음
• 화면에 에러 메시지를 표시해야 함

회원가입 요청시 credentials: "include" 설정이 필요하다. --> 설정을 해줘야 쿠키가 전달이 된다. (설정하지 않으면, 회원가입 후 로그인 세션이 유지되지 않는다.)

 

---

url rewrites

프론트에서 이미지 URL을 변환하는 방법에는 두 가지가 있다

1. 이미지 URL 앞에 localhost:9090 사용
2. Next.js url rewrite 기능을 활용하여 자동으로 변환하는 방법

(next.config.ts)

module.exports = {
  async rewrites() {
    return [
      {
        source: '/upload/:slug',
        destination: `${process.env.NEXT_PUBLIC_BASE_URL}/upload/:slug`,
      },
    ];
  },
};

이 설정을 통해 Next는 주소를 자동으로 환경변수 주소로 바꿔서 실행이 된다. 

(배열을 활용하면 여러 개의 URL 규칙을 한 번에 관리할 수 있다.)

 

---

로그아웃, 로그인 실제로 하기

NextAuth.js는 기본적으로 CSRF 토큰과 callback을 자동으로 처리를 해준다. 

 

CSRF 토큰

• NextAuth.js를 사용하면 자동으로 포함됨
• 추가적인 설정 없이 보안이 적용됨
• CSRF 공격을 방어하는 역할을 함

Callback 처리

• 로그인 후 특정 경로로 이동하도록 설정 가능
• 인증 후 사용자 데이터를 가공하여 세션에 저장할 수도 있음

HTTPS 설정을 해주면 세션과 쿠키가 암호화 되어 유출 위험이 줄어들게 된다.

 

---

 

업로드 이미지 미리보기

1. 백엔드 API와의 협업 문제 
   -> 백엔드 개발자가 API를 프론트엔드에서 미리 만들어 놓은 API랑 다르게 만들 수 있는데, 따라가 줘야 된다. 
2. 이미지 업로드 시 미리보기 구현 (textarea)
   텍스트를 많이 작성을 할 때 스크롤바가 생기는데, 자동으로 늘려주는 react-textarea-autosize 라이브러리를 사용을 하면 입력된 내용에 맞게 높이가 조절이 된다. 

 

---

 

useMutation 사용하기

React Query의 useMutation을 사용하는 이유와 장단점

 

상태 관리가 가능하다. 

• isPending → 요청이 진행 중일 때 (loading 상태)
• isSuccess → 요청이 성공했을 때
• isError → 요청이 실패했을 때

 Optimistic Update (긍정적 업데이트) -> 반응 속도 빠르게 하기 위해 사용 

 

💡 Optimistic Update란?

• 게시글을 올렸을 때 바로 성공했다고 가정하고 화면에 반영
• 나중에 요청이 실패하면 원상태로 되돌림 (위험)
• 성공하면 추가 작업 없이 유지됨

Optimistic Update의 단점

Optimistic Update를 사용할 때 주의할 점도 있습니다.

• 사용자가 게시글을 등록했는데 백엔드에서 에러가 발생할 수 있음
• 이런 경우, 유저는 성공했다고 믿었지만 실제로는 실패한 상황이 됨
• 게시글 업로드 같은 중요한 작업에서는 Optimistic Update를 신중하게 사용해야 함
• 대신, 하트 누르기(좋아요 기능) 같은 UI 피드백이 빠른 작업에는 적합

 게시글 업로드에는 권장하지 않으며, 버튼 클릭이나 간단한 UI 업데이트에서 활용하는 것이 좋다.

 

onMutate, onSuccess, onError, onSettled 옵션을 통해 다양한 요청 흐름을 컨트롤 가능

 

---

주소에 해시가 들어가면 문제가 된다. 

일부 기능에서는 로그인한 사용자 정보를 확인해야 하는 경우가 있다. ex) 팔로우 추천 기능에서 내 정보를 제외하려면 서버가 내가 누구인지 인식해야 한다. 

 

주소창에 해시(#)이 들어가면 서버로 전송되지 않는다. 

 

---

 

하트 누를 때 Optimistic Update 적용하기

트위터에서 팔로우 버튼을 누르면 팔로잉으로 버튼이 바뀌고, 팔로잉 버튼에 마우스를 올리면 언팔로우 버튼으로 변경이 된다. 즉, 로딩 없이 즉각적인 UI 업데이트가 이루어지는 기능인데, 이게 Optimistic Update 활용한 방식이다. 

 

트위터에서의 적용 예시

• 팔로우 버튼을 누르면 바로 팔로잉으로 변경됨
• 팔로잉 버튼에 마우스를 올리면 언팔로우로 변경됨
• 요청이 실패할 확률이 낮으므로 Optimistic Update 적용이 적절함

https://tanstack.com/query/v5/docs/framework/react/guides/optimistic-updates

공식 사이트에 있는 Updating a list of todos when adding a new todo 이걸 참고를 해서 한다. 

---

 

 

프론트서버에서 백엔드 서버로 쿠키 보내기

서버사이드에서 fecth 함수가 실행이 될 경우, 브라우저의 쿠키가 전송이 안된다. 

 

fetch가 서버사이드에서 실행되면 쿠키가 자동으로 전송되지 않음 → headers에 직접 쿠키 추가 필요

 

import { cookies } from "next/headers";를 클라이언트에서 사용하면 에러 발생 → 서버 전용 API임

 

서버와 클라이언트에서 사용하는 함수를 분리하면 해결 가능

---

 

메타데이터 설정하기

Next에서는 metadat를 활용해 페이지 제목 및 설명을 설정할 수 있다. 

export const metadata: Metadata = {
  title: "지금 무슨 일이 일어나고 있나요",
  description: "Z.com inspired by z.com",
}; 

다른 페이지마다 타이틀과 설명이 다르게 설정 되도록 하려면 generateMetadata 함수를 사용하면 된다. 

프롭으로 params, searchParams, parent 넣어주면 된다. 

 

Promise.all 기능은 서버에서 데이터를 두개 동시에 불러올 수 있게 해준다. 이렇게 하면 성능이 빨라진다. 

 

검색엔진 최적화(SEO)와 SSR 고려

검색엔진 최적화를 위해 SSR을 사용할 필요가 있는지 고민해야 한다. 

Next에서는 metadata 설정만 잘해도 검색엔진 최적화가 가능하다. 

검색엔진 최적화를 위해 클라이언트 컴포넌트를 서버 컴포넌트로 변환하고, 서버에서 데이터를 받아온 후 즉시 하이드레이션하는 분들이 있는데, 검색엔진 최적화 위한 목적이라면 metadata, generateMetadata 잘 해도 웬만하면 잘 된다. 

metadata 잘 하면 구글봇한테도 가장 편한 해동이기 때문에, 검색엔진 최적화가 매우 편해진다. 

 

 

---

 

재게시, 답글 기능 Zustand로 만들어보기

Zustand가 Redux 보다 편한 이유 

Redux의 단점 

• action을 따로 정의해야함.
• dispatch를 사용해야한다.
• 설정 과정이 복잡하다.

Zustand의 장점

• 간단한 API로 컴포넌트간 상태 공유 가능
• 컨텍스트 API보다 최적화가 기본적으로 적용이 된다. 
• 상태 공유 및 최적화가 자동으로 처리된다. 
• React QUery와 함께 사용 가능 -> 동일한 키를 두고 staleTime, GC Time 최대한으로 늘려두면 상태가 공유된다. (React Query는 상태 공유가 주 목적이 아니므로, Zustand를 사용하는 것이 적절하다.)

interface ModalState {
  mode: "new" | "comment";
  data: Post | null;
  setMode: (mode: "new" | "comment") => void;
  setData: (data: Post) => void;
  reset: () => void;
}

export const useModalStore = create<ModalState>((set) => ({
  mode: "new",
  data: null,
  setMode: (mode) => set({ mode }),
  setData: (data) => set({ data }),
  reset: () => set({ mode: "new", data: null }),
}));

 

 

최신 코드

https://z.nodebird.com/

강의에 나오지 않았지만, 최신 기능들, 소스코드가 위의 레포에 올라갈 예정이기 때문에, 강의에서 안 배운게 있으면, 소스코드가 어떤게 바뀌었는지 확인을 해보면 볼 수 있다고 한다.