Algorithm Cinema

🔹 문제: 개별 페이지마다 인증을 적용하면?React 애플리케이션에서 로그인 후 특정 페이지에만 접근할 수 있도록 보호하는 방법은 여러 가지가 있습니다. 하지만 잘못된 방식으로 구현하면 불필요한 연산이 발생하고, 코드의 유지보수성이 떨어질 수 있습니다.일반적으로 인증을 적용하는 방법 중 하나는 각 페이지마다 개별적으로 인증 로직을 감싸는 것입니다.❌ 개별 페이지마다 인증을 적용하는 방식} />} />} />➡ 문제점:각 페이지마다 AuthenticatedComponent가 실행됨 → 불필요한 연산 증가 ❌모든 페이지에서 인증 로직이 중복됨 → 유지보수 어려움 ❌공통 UI(Navbar, Sidebar)도 불필요하게 리렌더링될 가능성 ❌🔹 해결책: Layout을 감싸 인증을 최적화하기대신, Layout ..

🔹 서론웹 애플리케이션에서 로그인 및 인증 보안 강화는 필수입니다. 저는 프로젝트 의 프론트엔드에서 로그인, 토큰 인증, 사용자 정보 보호, 접근 제어 등의 보안 과정을 설계하면서 보다 안전한 사용자 경험을 제공할 수 있도록 개선했습니다.  이번 포스팅에서는 우리가 적용한 보안 설계 과정에 대해 정리합니다. 1️⃣ JWT 기반 인증 시스템 구축✅ 로그인 시 토큰 발급 및 저장사용자가 로그인하면 JWT(JSON Web Token) 를 발급하여 인증을 관리합니다.accessToken과 refreshToken을 서버에서 응답받아 클라이언트(LocalStorage)에 저장합니다.당연히 이 과정은 백엔드와 소통으로서 정했던 방식입니다.로그인 함수 로직입니다.const handleLogin = async (e) ..

1. 서론: 왜 토큰 인증이 문제였을까? 최근 프로젝트에서 JWT 토큰을 이용한 인증 시스템을 구현하는 과정에서 예상치 못한 문제를 마주하게 되었습니다.로그인 후 localStorage에 accessToken과 refreshToken이 저장되는 것은 확인되었지만,이후 API 요청을 보낼 때 accessToken이 null로 나오는 이상한 현상이 발생했습니다. 이 글에서는 API 인증 과정에서 발생할 수 있는 토큰 문제를 어떤 방식으로 해결했는지 상세히 기록해두고자 합니다.JWT 인증을 구현하는 과정에서 accessToken과 refreshToken을 헷갈리지 않도록 설정하는 방법을 중심으로 설명하겠습니다. 서버에는 잘 토큰 두개가 정상적으로 저장되는가?서버는 명세서대로 정확히 전달되었습니다. 즉, 사용자..