NextJS에서 쿠키에 접근할 때 이 문제 겪은 사람..? - SSR과 CSR에서 동일한 함수로 쿠키 접근하기

 

api요청에 토큰이 있어야하는 요청이 있을 때

나는 api 요청을 하기 전에 쿠키에 저장되어있는 accessToken을 가져와서 로그인 유무를 확인한 다음에
api요청을 막거나 허용하는 로직을 짜려고했다.

 

그러면 서버사이드에서는 next에서 제공하는 cookies를 이용해야했고,

클라이언트 사이드에서서는 getCookie()라는 함수를 만들어서 document.cookie를 통해서 갖고 와야했다.

그래서 두 함수를 authCheck라는 하나의 함수로 만들어줘서 간편하게 사용하도록 했다.

 

근데 여기서 문제는 두 쿠키가져오는 함수를 실행하고, 서버사이드와 클라이언트 사이드가 동일한 쿠키를 가져온 다음 동일하게 api 요청을 막거나 허용해야했다.

즉 서버사이드와 클라이언트 사이드에서 동일한 결과를 나타나게 해야했다.

 

근데 이 두 함수를 하나의 컴포넌트에서 쓰려고하니 오류가 생겼다.

cookies의 import문이 서버사이드에서만 가능하다는 것이다.

그렇다면 authCheck에 두 개의 로직을 하나로 뭉쳐서 만들려고 했던 것을 바꿔야 하나? 생각했다.

 

근데 나는 prefetchQuery를 사용해서 SSR에서 요청을 하는 부분도 있고,

useSuspense를 사용한 부분도 있고

그냥 useQuery를 사용한 부분도 있다.

 

그래서 SSR에서 요청하는 부분도 있고, CSR 때 요청하는 부분도 있어서 이 부분은 어찌 됐건 간에 합쳐주어야 했다.

 

그래서 방법을 찾던 와중에 아래와 같은 방법을 찾게 됐다.

내가 만든 authCheck.ts다.

import { getCookie } from "./cookie";

export const authCheck = (): string | undefined => {
  const authCheckFunction =
    typeof window === "undefined"
      ? getServerSideAuthCheck
      : getClientSideAuthCheck;

  const isTokenValid = authCheckFunction();
  return isTokenValid;
};

export const getClientSideAuthCheck = (): string | undefined => {
  const isToken = getCookie({ name: "accessToken" });
  console.log("클라이언트");
  return isToken ? isToken : undefined;
};

export const getServerSideAuthCheck = (): string | undefined => {
  if (typeof window === "undefined") {
    console.log("서버사이드");
    const { cookies } = require("next/headers"); //함수 내에서 처리
    const cookieStore = cookies();
    return cookieStore.get("accessToken")
      ? cookieStore.get("accessToken").value
      : undefined;
  }
};

아래 getServerSideAuthCheck를 보면

require을 이용해서 서버사이드에서만 cookies 를 가져오게 하고 사용했다.
이를 통해서 클라이언트사이드에서 authCheck를 사용하더라도  import문으로 인해 에러가 발생하는 것을 막을 수 있었다.

 

하지만 이게 옳은 방법인가? 에 대해서는 확신이 서지 않았다

- import : es2015(React) 모듈 문법 / React정적 import / 항상 파일 상단에서 사용
- require : Node의 모듈 문법(common.js) / 동적 import / 파일 어디에서나 사용

'modules.exports'와 'export default'는 엄밀히 말하면 차이가 있지만 호환 가능합니다.
원래 Node에서는 require만 사용하지만(import 사용 시 Error 발생),
바벨에서 import → require로 바꿔주기 때문에 우리가 React에서 import를 사용할 수 있는 것입니다.😱

하지만 import를 사용하는 것을 더 권장했다.

이유로는 

1. import를 사용하여 모듈을 불러오는 것이 더 현대적이고 선언적인 방식이다.

2. 코드의 가독성과 유지보수성을 향상시킬 수 있다.

3. 웹팩이나 바벨같은 모던 자바스크립트 빌드도구들은 import 문을 사용할 때 더 효율적으로 코드를 번들링하고 최적화 할 수 있다.

 

다음에는 처음부터 설계를 바꿔야하나? 라는 생각이 들었다.

왜냐하면 나도 이제까지 require을 사용한 적이 없었기 때문이다.

이런 이질감이 든다면 잘못하고 있다던데..!

 

이 부분은 추후에 다시 한번 찾아보고 해결해야할 것 같다.