[React 일기앱 버그] 로그인 후 로그인 유저의 정보를 읽어올 수 없는 문제 해결
일기 쓰기 사이트에 로그인할 시 일기장을 생성할 수 없는 에러가 발생했다. 사실은 몇몇 유저가 “로그인 후 일기가 안 써져요”라는 버그를 지적해주셨으나 메시지에 답장을 보내려고 하면 새로고침 하니 작동합니다! 지금은 잘 써져요.라고 해주셨기 때문에 애초에 왜 이런 문제가 발생하는 걸까? 에 대한 질문을 던지지 않은 채로 그저 안일하게 넘겨왔었다. (바보)
나는 최근까지 이 버그의 원인을 눈치채지 못하고 이곳저곳에 이 버그가 난 포트폴리오를 들고 면접을 보러 다녔다. 그러다 한 곳에서 면접을 보는 도중 “포트폴리오 사이트를 이용해봤는데 이러한 버그가 있었다” 라는 피드백을 (감사히도) 받을 수 있었고, 그 자리에서 버그사항을 메모했다. 면접관분께서는 “로그인 후 로그인 된 유저의 정보를 앱이 제대로 읽어오지 못하는 것 같다”라고 말씀해주셨다. 집 와서 살펴보니 정말이었다.
문제 발생 시나리오
- 로그인을 한다
- 유저는 이제 일기장 생성을 할 것이다
- 원래라면 이렇게 ‘당신의 이름’과 다이어리 표지에 로그인한 유저의 닉네임이 떠야 한다.
- 하지만 앱에서 유저의 닉네임을 읽어올 수 없었다.
로그인 후 owner를 읽어오기도 전에 화면에 ui를 그리다 보니 이런 일이 발생한 것 같다. 그래서 이제 유저 정보를 받아올 때까지 기다려보도록 코드를 수정해보기로 했다.
해결
문제는 로그인 페이지 컴포넌트에 있었다.
해당 컴포넌트의 useEffect는 로그인 유저가 로그인되어 있는지 검사하여 로그인된 유저라면 다시 메인화면으로 이동시키고, 아니라면 로그인할 수 있는 UI를 그리게 되는 분기가 갈리는 로직이 있다.
useEffect(() => {
// ... 로그인 로직
return () => {
setIsSignedIn(false);
setLoginUser(false); // 문제 발생 코드!
}; // Make sure we un-register Firebase observers when the component unmounts.
}, [db, isMount, navigate, setLoginUser]);
useEffect에서 clean up 함수에 문제가 있었다.
clean up 함수는 컴포넌트가 죽을 때 실행되는 함수인데, 로그인 컴포넌트의 clean up 함수에서 최후에 로그인 유저가 false로 덮어써졌기 때문이었다.
기껏 로그인을 해서 로그인 유저를 세팅한 후 다시 로그인 유저를 덮어버렸으니 당연히 메인화면으로 갈 땐 컴포넌트가 죽은 후 => 로그인 유저는 false가 된 채 => 메인화면으로 넘어간다. 그래서 로그인 직후 입장한 메인 페이지에서 유저의 이름이 비었던 것이다!
아래와 같이 setLoginUser 를 지워주자 정상적으로 동작했다.
useEffect(() => {
// ... 로그인 로직
return () => {
setIsSignedIn(false);
}; // Make sure we un-register Firebase observers when the component unmounts.
}, [db, isMount, navigate, setLoginUser]);
저걸 쓸 당시엔 clean up 함수가 뭔지 몰랐고 그냥 대충 “여기서 사용한 state는 전부 죽여야 하는구나…” 하며 넣었었다. 지금은 clean up 함수에 대한 이해도가 어느 정도 있기 때문에 문제를 빨리 파악할 수 있었다. (그리고 쪽팔림…ㅎㅎ)
여담
정말... 새로고침 하면 된다는 걸 앗글쿤아 하고 흘려듣지 않고 힌트로 들었어야 했는데 부끄럽다. 😂
이런 식의 안일한 사고는 나의 성장을 막는다는 것을 항상 염두해두도록 하자.
다음엔 일기 백업하기 기능을 넣어보려고 한다. 사용자의 이메일로 백업한 일기를 보내주는 기능이다.
이 부분은 라이브러리를 적절히 이용해야 할 것 같다. 기회가 되면 포스팅도! 오늘도 공부 힘내자.