react2 로그인 뒤로가기로 접근 제한하기-router.push vs router.replace 인계받은 프로젝트를 확인하던 중 재밌는 상황을 발견했습니다. 로그인 후 홈 화면에서 뒤로가기 버튼을 누르면, 다시 로그인 페이지로 돌아가는 문제였습니다. 상단의 GNB(글로벌 네비게이션 바)를 보면, 로그인 상태임이 분명한데, 콘텐츠 영역에서 로그인 페이지가 표시되는 부자연스러운 상황이었습니다. 생각해보면, 로그인 상태에서는 뒤로가기를 눌러도 로그인 페이지가 표시되지 않는 것이 자연스러운 흐름일텐데, 이 상황은 UX와 보안 측면에서 정상적인 서비스 플로우는 아니라고 판단하여 사용자가 뒤로가기를 눌러도 로그인 페이지로 돌아갈 수 없도록 로그인 페이지 접근 제한을 구현하기로 했습니다. 해결 방법처음에는 토큰 유무를 확인해 리다이렉트 처리하는 방법으로 접근했습니다.이전 프로젝트에서도 이런 방식으로 권한 별 접.. 2024. 11. 19. useEffect 의존성 배열에 onChange를 넣으면 프로젝트를 인수인계 받아서 작업 중인데, 작업 목록 중 이미지 수정 시 무한 렌더링 오류 발생 항목이 있었다. 이전부터 오류를 인지하고는 있었는데, 어떤 조건으로 발생하는 오류인지, 원인이 뭔지는 모른다고 하셨다. 내가 작업하기로 하여 일단 조건부터 찾아보려고 하였는데 찾을 것도 없이 이미지 수정만 하면 무조건 발생하는 오류였다. 오류 로그를 보니 useEffect 활용 관련해서 문제가 발생하는 같았다. 그런데 오류 발생 코드에 useEffect가 5개 이상 선언되어 있어서 찾기 너무 어려웠고..모든 useEffect 내에서 콘솔을 찍어 문제를 유발하는 useEffect를 찾아내었다. 콘솔을 찍어보니 문제 발생 컴포넌트에서 무한 렌더링 되어 일정 스택을 찍으면 아래 오류 메시지가 출력되는 구조였다. (.. 2024. 11. 10. 이전 1 다음
