250214 금 TIL

nextjs

특징: 프로젝트 구조가 페이지 주소이다.

해당 프로잭트 폴더 안에 page.tsx(p는 대문자가 아님. 조심.)로 파일을 만들어 작업함.

--

클라이언트 컴퍼넌트와 서버 컴퍼넌트

클라이언트 컴퍼넌트 -> 브라우저에서 작동.

서버 컴퍼넌트 -> 서버에서 작동. 

*서버란 스프링부트서버를 의미하는 것이 아닌 프록시서버

*api서버(스프링부트) -> 프록시 서버(nextjs) -> 브라우저

--

넥스트에서 클라이언트 컴퍼넌트임을 나타내려면 코드 맨 위에 "use client";를 추가한다.

없으면 기본적으로 서버 컴퍼넌트로 인식한다.

클라이언트 컴퍼넌트에서는 async/await을 못 씀.

서버 컴퍼넌트에서 데이터를 받고 클라이언트 컴퍼넌트에서 ui를 처리하는게 이상적임.

--

넥스트의 useRouter - 화면 깜빡임 없이 데이터를 가져온다

import { useRouter } from "next/navigation";

  const router = useRouter();

 

<form onSubmit={(e) => {

           

            //기본 기능(요청으로 새로고침) 막는다

            e.preventDefault();

            //폼에서 데이터 불러와서 세팅

            const formData = new FormData(e.target as HTMLFormElement);

            const keywordType = formData.get("keywordType") as string;

            const keyword = formData.get("keyword") as string;

            const pageSize = Number(formData.get("pageSize"));

            const page = 1;

            //nextjs가 제공하는 방식인 router로 주소를 바꿈

            //이렇게 하면 페이지 깜빡임 없이 주소만 바뀜

            router.push(

                `/post/list?keywordType=${keywordType}&keyword=${keyword}&pageSize=${pageSize}&page=${page}`

            );

        }}>

--

서버 컴퍼넌트는 nextjs 프록시 서버에서 처리되는 것으로 이건 브라우저에 있는 쿠키를 바로 쓰지 못한다.

때문에 서버 컴포넌트에서 쿠키를 담은 요청을 처리할 때는 다음과 같은 방식으로 헤더에 쿠키를 담아 처리해야 한다.

const response = await client.GET("/api/v1/members/me", {

    headers: {

      cookie: (await cookies()).toString(),

    }

  })

--

openapi-fetch