nextjs2 Nextjs 미들웨어를 활용한 액세스 토큰 자동 갱신 구현하기 JWT 인증을 사용하는 웹 애플리케이션에서 액세스 토큰 만료는 사용자 경험에 중요한 영향을 미칩니다. 토큰이 만료되면 사용자가 다시 로그인해야 하는 번거로움이 생기죠. 이러한 문제를 해결하기 위해 리프레시 토큰을 활용한 자연스러운 갱신 메커니즘이 필요합니다. 이번 글에서는 Next.js 미들웨어를 활용해 액세스 토큰 자동 갱신 로직을 구현한 경험을 공유하고자 합니다. 미들웨어를 선택한 이유토큰 갱신 로직을 구현할 수 있는 위치는 여러 곳이 있습니다.컴포넌트 내부: 각 컴포넌트에서 토큰 만료 감지 시 갱신API 인터셉터: Axios 등의 라이브러리에서 401 응답 감지 시 갱신미들웨어: 페이지 접근 전에 토큰 상태 확인 및 갱신 여러 위치 중에 미들웨어가 가장 깔끔한 솔루션이라고 판단되었습니다.선제적 대응.. 2025. 4. 14. [NEXT.JS] Warning : Props 'className' did not match와 suppressHydarationWarning 이런 에러가 발생했다. 위 에러는 처음 페이지 SSR로 내려준 이후 CSR로 화면을 렌더링하게 되는데, 이때 서버에서 받은 해시 + 클래스명과 이후 클라이언트에서 작동하는 해시 + 클래스 명이 달라지면서 스타일을 불러올 수 없는 문제를 발생한다. 구글링 해보니까 보통 styled component에서 많이 발생하는 에러인 것 같다. 그러나 나는 tailwind를 사용하고 있었다. 에러를 자세히 보니 dark가 있었고 이것은 다크모드 설정에서 발생된 에러같았다. 나의 다크모드에는 세가지 종류가 있는데 Light, Dark, System 이 있는데. 서버에서는 localStorage에 저장된 나의 테마상태를 모르기때문에 발생되는 에러다. 리액트 공식문서에 있는 suppressHydrationWarning으로.. 2023. 7. 11. 이전 1 다음
