오늘 새로 배운 것
narrowing을 통한 에러 해결 사례
//As is
const handleDeleteAccount = async () => {
await deleteUser(authService.currentUser)
.then(() => console.log('성공적으로 탈퇴하였습니다!'))
.catch((error) => console.log(error));
navigate('/', { replace: true });
};
//To be
const handleDeleteAccount = async () => {
if (authService.currentUser) {
await deleteUser(authService.currentUser)
.then(() => console.log('성공적으로 탈퇴하였습니다!'))
.catch((error) => console.log(error));
navigate('/', { replace: true });
}
};원인
문제의 발생 원인은 firebase의 currentUser 타입은 firebase에 이미 만들어진 auth-public.d.ts파일에서 readonly User | null 타입으로 지정되어있다. 하지만 firebase의 사용자 제거(회원탈퇴) 함수는 User타입만을 인자로 받는다. User타입의 인자가 들어와야할 자리에 User | null 타입의 인자가 들어오니 에러가 나는 것이었다.
해결과정
아직 익숙치 않은 typescript로 프로젝트를 처음 시작했고 firebase에도 당연히 typescript를 처음 적용해보게 되었다. 그래서 일단 type을 지정해주어야되나해서 any타입으로도 지정해보고 했는데 타입 지정으로는 해결하지 못했었다.
좀 더 자세히 보니 currentUser와 deleteUser의 인자 타입은 이미 정해져있고 그래서 해결방법을 찾다가 팀원의 도움으로 if문을 써보게 됐는데 해결이 되었다. 알고보니 이게 어제 TIL 내용으로 다뤘던 narrowing이었다.
readonly 타입이 신기하게도 User 타입으로 바뀌어 에러 발생없이 잘 들어가는 것을 확인하였다.
앞으로도 이러한 문제가 생겼을 때 readonly 타입이나 null 타입도 가지는 유형에 대해서 narrowing 방법도 적용할 수 있는지 고려해봐야겠다.
deleteUser의 대안
firebase 공식 문서를 보니 기존에 알고있던 deleteUser(user:User) 함수 외에 같은 기능의 user.delete()가 있었다. 왜 같은 기능에 대해 두가지 함수가 있는지는 아직 잘 모르겠지만 앞으로 두가지 다 고려를 해봐야겠다. 공식문서를 읽는 습관을 들여야겠다.
