On a couch

[메인 프로젝트] 로그인 기능 드디어 완성 본문

코드스테이츠 FE/프로젝트

[메인 프로젝트] 로그인 기능 드디어 완성

couch 2022. 10. 5. 23:40

토큰 로그인.. 정말 우여곡절이 많았다.

'완성'이라는 건 오류가 나지 않고 동작하도록 만들었다는 뜻이다.

 

사실상 오늘까지가 개발을 할 수 있는 마지막 날이고 이후부터는 발표 준비를 해야 했었는데, 오늘 오후까지도 해결이 되지 않아 너무 초조했다.

도대체 무엇이 오류인지 잡히지가 않아서, 맘먹고 노트에 손글씨로 flow를 적고 이에 맞춰 콘솔을 찍으면서 처음부터 전부 다 다시 되짚어 갔다.

그런 뒤 개발자도구 네트워크 탭에 찍힌 요청헤더-응답헤더-바디를 대조해 가면서 확인했더니, 예상치 못한 로그아웃의 원인은 바로 refresh token의 유효기간이 예상했던 3분이 아닌 1분으로 설정되어 전송된 것이었다.

이를 해결하고 났더니 그 주변의 자잘한 오류들(결정적인 원인을 찾지 못하게 만들었던)도 찾아 깔끔하게 정리할 수 있었다.

 

단계별로 번호를 매겨 콘솔을 찍었다. 혹시나 의도하지 않은 순서로 실행되면서 오류가 나고 있는 것일까 봐 ㅠㅜ

 

예상치 못하게 튕길 때(로그아웃 될 때) 콜스택에 오버플로우가 일어나게 만든 주 원인... 그것은 쿠키에 토큰이 남아있지 않을 때에 대한 예외 처리를 안 한 것이었다.

 

정말이지 한 번이라도 네트워크 탭을 들여다보거나 백엔드 쪽에 확인을 요청했다면 혼자 삽질한 수많은 시간을 아낄 수 있었을 텐데, 왜 그 생각을 못 했나 싶다.

그렇다고 해서 혼자 삽질한 시간들이 아깝지는 않다. 그러면서 이것저것 검색해보고 배운 것도 많다.

 

이번 프로젝트에서 가장 피부로 와 닿았던 것은 '프론트엔드는 순서대로 실행시키는 게 가장 중요하다'였다.

axios, 로컬스토리지, 리덕스, 커스텀 훅 2가지, 에러 핸들링 함수와 그 하위 함수들까지 데이터를 쭉 끌고 가는 경험은 혼자 토이 프로젝트를 했다면 겪지 못했을 것이다.

제약사항도 필요없고 다른 사람과의 소통(협업)도 필요 없다면 그때그때 되는대로 더미 만들어서 대충 저장하고 꺼내 썼을 테니까.

 

오래 해결하지 못해 팀원들에게 너무 미안했고 부담도 많았는데 시간 내에 해결해서 너무 후련하다.

기분좋게 명예의 전당 페이지와 자잘한 css 오류들 더 잡고 마무리할 수 있겠다 :))