1. 상황

• 백엔드 팀원분들이 jwt를 활용하여 로그인을 구현.
• 로그인 요청을 보내면 검증을 거쳐 토큰을 발급받고 그 토큰으로 통신하는 방법.
• 근데 그 토큰을 쿠키로 주는것이 아니었다.
• 그렇다면 나는 그 토큰을 로컬스토리지 vs 세션스토리지에 저장해야한다.
• 나는 앞으로 테스트하면서 계속 로그인을 할것이었기에 데이터의 영구성이 보장되는 로컬스토리지에 저장하기로 하였다.
• 그래서 나는 로그인이 필요한 페이지로 유저가 진입할시 로그인 되지않았다면 로그인페이지로 이동시키는 기능을 구현해야한다.

2. 구현진행

• 로그인전략 수행
• 서버에서 토큰 발행
• 로컬스토리지에 저장
• 프론트엔드에서 다른 요청시 intercept하여 헤더에 무조건 토큰을 포함시키도록 구현

3. 결과

• 속도가? 문제가 있다. 2883ms가 나온다.
• 가만히 생각해보니 이럴꺼면 next.js를 쓸이유도 없다.

문제파악

• next.js의 ssr를 이용해야하는데 이미 백엔드측은 일반 string으로 토큰을 보내주도록 구현이 완료된지라 쿠키로 보내달라는 부탁을 하기가 힘들었다.
• ssr에서는 localstorage,sessionstorage를 사용을 하지못한다.
• 어떻게든 쿠키를 사용해야한다.

1차 진행

• cookies-next 라이브러리사용

  getCookie("token")

• 이 코드를 사용해서 토큰을 요청헤더에 항상 포함시켜서 보내는 기능을 구현하였다.

1차 결과

• 토큰이 브라우저에서 console.log로 찍었을때는 잘보이나 ssr을 사용하기위해 vscode에서도 토큰이 출력되어야하는데 undefined 출력

1차 회고

• 브라우저에서 쿠키가 있는지 확인함

https://www.npmjs.com/package/cookies-next

• 공식문서를 참고하였더니 난 서버에서 클라이언트용 코드를 실행하고있던것이다.
• 내가 쿠키를 가져와야할곳은 브라우저가 아니라 요청의 헤더였던것이다.

  getCookie("token",{cookies})

2차 진행

• 쿠키를 설정할때는 client component에서 설정유지
• 쿠키를 가져올때는 요청의 헤더에서 가져오도록 수정

2차 결과

• 엄청 많이걸리던 조건에 따라 페이지를 로그인페이지로 이동시키던 시간이 1400ms대로 줄어들었다.
• 확실히 ssr을 통해 미리 렌더링해서 보내주는방식이 useEffect를 통해서 다시 서버로 요청을 보내서 redirect하는 방식보다 빠르다.

결과 회고

• 공식문서 읽는 습관을 들이자
• next.js는 서버코드와 client에서 실행되는 코드가 분리되어 있으므로 유의하자
• 쿠키를 어디서 확인하려느냐에 따라 보는방법이 다르다. ssr일때는 요청헤더에서, csr일때는 document.cookie같은 브라우저에서 확인