로그인 후 이전페이지 돌아가기

장형원·2022년 8월 13일
1

Side Project 1

목록 보기
5/7

문제 인식

웹 페이지를 구현하던 중, 소셜 로그인을 구현하게 되었다.
기존에 부트캠프에서 구현했던 카카오 소셜 로그인을 되짚어 보며 이번 프로젝트에도 적용을 했는데,

당시에는 Nav에 있던 로그인 버튼을 바로 외부 로그인 링크로 연결하여 로그인을 구현했었다. 하지만, 로그인 버튼은 Nav에만 있는 것이 아닌 게 문제였다.

부트캠프 당시 프로젝트에서는 사실 프로젝트의 완성도라기 보다는 눈 앞의 기능에 급급하기도 했고, 경험도 부족해 많은 구현을 하지 못해서 생각치 못했던 부분이었다.

로그인 버튼은 Nav에도 있고, 다른 로그인이 필요한 서비스에 접근할 때 window.confirm 창을 띄운 후 유저가 ok를 하면 로그인으로 보내야 하는 것이었다.

구현을 위한 노력

처음에는 그저 navigate 내장 함수를 사용해, -1을 인자로 넣어 뒤로 가기를 구현하였다. 그렇게 해결한 줄 알았었다.

하지만 2단계 인증을 설정한 유저의 경우 생성되는 페이지가 하나 더 늘어나기 때문에 navigate(-1)을 해도 이전에 보던 페이지가 아니라 다시 로그인 페이지로 돌아가는 것이었다.

다른 개발자분께도 도움을 요청했었는데 실제 현업에서 쓰고 있는 유용한 기술들을 알려 주셨고, 실제로 도움이 많이 됐었다. 하지만 지금 내가 쓰기엔 제대로 이해하지 못하고 쓰는 것 같았고, 배운 기술은 따로 정리한 후 다른 루트를 뚫어보기로 했다.

구현 결과

로그인 후 돌아가는 페이지가 제각각이라는 것이 문제라면, 돌아가는 페이지를 통일 시키면 어떨까? 하는 생각에서 시작했다.

따라서 기존에는 로그인 페이지 /loginkakao router가 있긴 했지만, 그때까지는 REDIRECT_URI만으로 사용했었다. 이에 /loginpage router를 하나 더 만들어,

로컬스토리지에 토큰과 닉네임을 저장한 후 다시 로그인페이지로 돌려보냈다.

그러면 이제 로그인 페이지에서만 그 이전 페이지로 return 시키면 끝나는 문제였다.

따라서 로그인 버튼을 누를 때, 혹은 알림창에 의해 로그인 페이지로 넘어올 때 임시로 localStorageuseLocation을 사용하여 로그인 위치의 pathname을 저장한다.

그리고 로그인 성공 후에 다시 돌아오게 되면, 임시로 저장해 놓았던 pathname을 꺼내 와 navigate 함수로 돌려 보내는 것이다.

여기서 왜 navigate를 쓰지 않고, config.js에 있는 USER_TOKEN을 사용하지 않았냐면

일단 window.location으로 구현한 이유는 새로고침 문제였다. 로그인에 성공은 해서 /loginpage 라우터로 돌아왔는데, 새로고침이 되지 않아 nav에 유저 이름이 뜨지 않았기 때문이다. 그래서 token을 꺼내온 후 window.location.reload()를 실행해 봤지만, useEffect dependency를 넣었음에도 불구하고 무한 새로고침이 발생했다.

그리고 굳이 있는 변수를 사용하지 않고 새로 localStorage에서 꺼내온 이유는 그 새로고침이 되지 않았기에 변수 사용으로는 불러와지지 않았기 때문일 것이라고 생각한다.

(정답은 아니지만 일단 구현은 했고, 리팩토링 시 다시 생각해 볼 문제이다.)
profile
순항을 기원하는 개발 이야기

0개의 댓글