✍️ 이번 에러는 해결까지 정말 오래 걸렸다. 약 2주간을 끙끙 앓았다. passport 사용 시 쿠키의 흐름에 대해 몇 번을 찾아보고, 생각해보고 수정 해도, 코드의 문제는 없는 것 같은데 도대체 왜 안 될까? 자다 가도 생각 나고, 며칠을 괴롭히는 에러였다. 해결하고 나서도 물음표가 지워지진 않았지만, 그래도 이제는 두발 뻗고 잘 잘 수 있을 것같다. 👍🛌
상황
- 로그인을 한 유저 정보를 SSR(ServerSideRendering)로 구현 하고자 함.
- 로그인은 passport.js를 이용하여 구현함.
- getServerSideProps 를 이용하여 render 전에 유저 정보(LOAD_MYINFO_REQUEST)를 api로 불러오려고 함.
- 프론트 서버에서
axios.defaults.headers.Cookie를 설정하여 쿠키를 담아 백엔드 서버로 요청을 보냄
프론트 서버 콘솔- 쿠키가 찍히는 것을 확인, but LOAD_MYINFO_FAILURE 뜸.
- 쿠키가 찍히는 것을 확인, but LOAD_MYINFO_FAILURE 뜸.
- 백앤드 서버에서는 쿠키를 못 읽어옴. (undefined)
- 로그인 여부 확인 하는 미들웨어(isLoggedIn) 에서 로그인이 안되었다고 걸러짐. → ‘/api/user’ 요청 시 401에러
‘/api/user’ router 설정
isLoggedIn 미들웨어 코드
백엔드 서버 콘솔
- getServerSideProps 이용 전 useEffect 로 CSR(Client Side Rendering) 구현 시에는 유저 정보가 정상적으로 불러 옴.
➡️ api, redux, saga 설정에는 문제가 없을 것으로 추정 - getServerSideProps 로 게시글 정보를 불러오는 것도 구현했었는데, 정상적으로 작동함.
➡️ getServerSideProps 가 문제는 아닌 것으로 추정.
- 예상되는 문제 부분은 프론트에서 백엔드로 요청 시, 쿠키를 못 담아 보내는 것으로(
axios.defaults.headers.Cookie설정 문제)로 추정 함.
해결
-
아주 우연하게 saga> index.js 에서 axios.defaults.baseURL 설정 하는 부분에서 기존에 axios를 require로 불러오던 것을 import 로 바꿔 보았음.
기존에 정상 작동 하는 코드
-
baseURL 설정 잘 되던 것이, URL 설정이 잘못 되었다고 api 요청 시 error 가 남.
-
설마 하고, getServerSideProps로 요청하는 페이지의 axios 불러오는 부분을 확인 함.
수정 전 코드 - import로 불러옴.
-
import로 불러 오던 것을 require로 바꾼 후, 다시 실행
-
백엔드 서버 콘솔에서 쿠키 확인 되고, 유저 정보 정상적으로 불러와짐.
require vs import
require 와 import 로 불러오는 차이가 뭐길래, 이것이 에러의 원인 이었던 걸까 해서 찾아보았다.
- require : NodeJS에서 사용되고 있는 CommonJS 키워드
- 파일에 들어있는 곳에 남아 있음.
- 프로그램 어느 지점에서나 호출 가능
- import : ES6(ES2015)에서 새롭게 도입된 키워드
- 항상 맨 위로 이동
- 파일의 시작 부분에서만 실행 가능
- 사용자가 필요한 모듈 부분만 선택 해서 로드 가능.
마무리
require 는 프로그램 어느 지점에서나 호출 가능 하고, import는 파일의 시작 부분에서만 실행 가능 하다는 특징과 연관 지어, getServerSideProps 실행 시점에서 headers.defaults를 바꾸는 코드가 import로 불러 올 시, 호출 시점이 안 맞아서 수정이 안되었던 것이 아닐까 하는 추측이다.
하지만, axios를 import로 불러온 것이 근본적인 원인은 아닌 것 같다. 다른 react에서 axios를 사용한 코드들을 찾아보면 많은 코드들이 import 사용해서 axios 불러와 사용한다.
어찌 저찌 해서 문제 해결은 하였지만, 도대체 뭐가 근본적인 문제 인 건지, 원인은 잘 모르겠다. (혹시, 아는 분이 있다면 댓글로 알려주시면 감사하겠습니다.🙏)
참고 문헌
