React] 프로젝트 버그 수정하기 (스테픈2km)

오늘은 그간 작업했던 프로젝트가 끝났다고 생각해서

디플로이 이후에

큰 버그를 발견했네요

로그인 페이지에 있는 버그인데요

저도 전혀 눈치 못챘다가

사이트 테스트를 하다보니 알게되었습니다

로그인을 하게되면

로그아웃도 할수가 있겠죠?

카카오나 admin계정으로 접속도 해봤을때 문제는 없었으나

문제는 로그아웃 하고 다른 계정으로 접속할때 발생했습니다

로그인 버튼만 눌러도 바로 로그인이 되어버리는 문제인거죠

처음에는 이게 뭐지? 싶어서 제가 프론트쪽 코드를 잘못 짰나 싶었습니다

일단 로그인할때 코드를 훓어보면

로그인을 하게되면 유저의 아이디를 표시해주는 변수에 값을 저장하고

로그인 했다는곳에도 저장하고

어떤 방식으로 로그인 했는지도 저장합니다

그리고 유저의 로그인 정보 전체를 store를 사용해서 저장합니다

setaccoutp 라는 함수가 바로 유저의 개인정보를 통으로 저장하는 곳이죠

이러한 방식으로 로그인을 프론트쪽에서 진행한뒤

추후에 로그아웃을 시도하게되면

어떤 방식으로 로그인을 했는지 앞서 setloginstate라는 함수로 store에 저장한 값을

가져와서 해당 값이 카카오톡이면 카카오쪽으로 로그아웃정보를 보내고

프론트 쪽에 회원로그인할때 처리했던 변수들에 값들도 전부 리셋 시킵니다

네이버도 똑같은 방식으로 처리하구요

스토어에 로그인 관련 정보로 저장하는 데이터들...

만들때는 처음에 생각의 흐름대로 만들다보니..

코드 리펙토링 하게되면 객체 형식으로 변경하던 해서 하나로 묶는것도 괜찮을것 같네요..

아무튼 이러한 과정으로 로그아웃을 하는데도 불구하고

한번 로그인 이후에 로그아웃하고 다시 로그인하면

기존 아이디로 계속 로그인되는 버그가 생기는것입니다.

프론트 쪽에서 잘못한건 아닌가 싶어서

프론트쪽 코드에만 계속 조건넣고 테스트 하다가...

딱히 틀린게 없나 싶어 서버쪽 코드를 열어봤습니다

생각해보니 로그인할때 정보를 주는건 있는데

로그아웃에 관한 api를 만들진 않았더군요;;

여기서 드는 의문이 로그인정보를 담은 변수를 가지고 있는 서버가

프론트에서만 로그아웃 이후에 다시 서버에 로그인요청이 왔을때

기존에 가지고 있는 정보를 그냥 계속 주는게 아닌가 싶은 의심이 들더군요

그래서

회원정보를 담아서 보내주는 이 변수의 값을

서버 쪽에서도 로그아웃이라는 api를 만들고

로그아웃 요청시 회원정보를 담아둔 저 변수의 값을 리셋시키는거로

변경했습니다

그리고 프론트 쪽에도

로그아웃 할때 서버에 로그아웃 요청을 한번더 보내주는 방식으로 코드를 수정했습니다

결론은 잘되네요

로그인 이후 로그아웃하고 다른아이디로 로그인해도

문제가 발생하지 않습니다

어제부터 프론트쪽 문제인가 싶어서

프론트 쪽의 코드만 계속 좀더 타이트하게 조건걸고 했더니..

코드가 지저분해졌지만..

결과적으로는 원인을 찾았다는것에 만족스러운 하루였습니다

이로서 간단한 로그인 로그아웃 처리는 끝냈습니다.

---

스테픈도 2km완료했습니다 오늘은 좋네요