이직한 회사에서 프로젝트가 3년 전에 만들어진 뒤 패키지를 업그레이드하지 않았어서 첫 업무로 react 18, next 14로 업그레이드하는 작업을 했다.
그런데 버전 업해서 빌드까지 정상적으로 이뤄진 이후에 큰 문제가 하나 발생했는데, 바로 로그인을 해서 새로고침이 되자 마자 다시 초기화되어 로그인 창이 보이는 문제가 발생했다.
무엇이 원인인지 파악하던 도중 _app.tsx의 getInitialProps에서 request의 header에서 'X-Forwarded-For'라는 헤더 값을 가져오는 코드가 있는데, 이 부분이 기존 버전에서는 undefined를 반환하고 14로 버전 업하면서 ::1을 가져와서 이 부분을 생략하니 정상 작동하는 것을 확인할 수 있었다.
X-Forwarded-For
이 헤더는 클라이언트의 IP 원래 주소를 식별하는 표준 헤더이다. 클라이언트와 서버 중간에서 트래픽이 프록시나 로드 밸런서를 거치면, 서버 접근 로그에는 프록시나 로드 밸런서의 IP 주소만을 담고 있기 때문에 원래 IP 주소를 보기 위해서 해당 헤더가 필요하다.
** ::1는 IPv6에서 localhost를 의미한다.
후추 예정