[NEXTJS] 사이드 컴포넌트 쿠키 처리

Nextjs App Router 서버 사이드 요청

• Nextjs의 App Router를 통해 서버사이드에서 요청 날리게끔 구성되어 있다.
• 요청에 쿠키를 담아 서버쪽에서 검증 받는 흐름이지만, 쿠키가 계속 안 들어왔다.
  • credentials: "include" 인데도 들어오지 않는 것에 의문을 가졌다.
• 결론은 서버 사이드에서의 요청일 경우 직접 쿠키를 담아줘야 한다는 것이다.

쿠키 양식

"Cookie": "accessToken=tokendata; refreshToken=refreshToken"

변경된 코드

• 헤더에 직접 입력
• API 라우트에서 쿠키를 뽑아와 인자로 던짐

클라이언트 사이드 요청 함수

• react query를 이용해 요청 및 관리
• 이 때는 쿠키를 담을 수 없다.
  • 클라이언트 사이드에서는 쿠키를 가져올 수 없음. 브라우저 범위이기 때문

export interface ReferenceListResponse {
    status: number;
    code: string;
    message: string;
    result: ReferenceListItem[];
    totalCount: number;
}

export interface ReferenceListItem {
    referenceSeq: string;
    referenceName?: string;
    referenceUrl: string;
    referenceMemo?: string;
    referenceCategory: string;
    createdAt: string;
}

export const referenceListRequest = async (props: ReferenceListRequest) => {

    const response = await jsFetch<ReferenceListResponse>(`/api/reference/list`, {
        method: 'post',
        cache: 'no-store',
        body: JSON.stringify(props),
        headers: {
            'content-type': 'application/json',

        },        
    });

    return response;

};

서버 사이드 요청 함수

export interface ReferenceListRequest {
    category: string;
    page: number;
    pageSize: number;
}


export const referenceList = async (request: ReferenceListRequest, accessToken: string, refreshToken: string) => {

    const response = await fetch(
    `${ process.env.NEXT_PUBLIC_BASE_API }/reference/list`, {
        method: 'post',
        cache: 'no-store',
        body: JSON.stringify({ category: request.category, page: request.page, pageSize: request.pageSize }),
        headers: {
            'content-type': 'application/json',
            "Cookie": `accessToken=${ accessToken }; refreshToken=${ refreshToken }`
        },
        credentials: 'include', // 쿠키를 포함해서 요청 전송
        next: { tags: [ 'search-word' ] },
    });

    return response;
};