오늘 오전엔
팀원들과 다같이 코드리뷰도 하고, 그동안 정리하지 못했던 불필요한 주석처리 , 페이지 컨밴션을 정리하는 작업을 하였다
주말동안 내가 짜놓은 부분을 ts 리팩토링 했었는데 덕분에 오늘은 비교적 여유있게 자잘자잘한 작업들을 했었다
오늘 저녁에 튜터님이 오셔서 우리 프로젝트 코드를 쫙 한번씩 봐주셨는데
회원가입 하는 시간이 좀 느린것 같다는 유저 피드백을 받은 부분이 있었는데 회원가입을 할때 우리가 로직을 3개를 실행을 시켜줘서
(회원가입만 시키는게 아니라 유저 컬랙션을 생성해서 거기 유저 정보도 넣어주고 유저 프로필 업데이트도 해주는 로직)
그런 것 같다는 생각이 들었다
파베를 쓰다보니 근본적인 속도를 빠르게 해줄 수 있는 방법이 당장은 없으니
유저가 기다리는동안에 "회원가입중"이라는 상태를 보여줄 수 있도록 로딩중 상태를 띄워주려고 했는데
튜터님께서 우리가 toast를 사용하고 있었던걸 보시고 toast에도 promise를 사용할 수 있는데 한번 써보라고 말씀을 해주셨다
toast.promise 안에다가 new Promise를 통해 해당 로직들이 다 실행이 될때까지 pending상태에는 회원가입중이라는 상태를 띄워줄 수 있도록 코드를 수정하는걸 배웠다.
toast.promise(
new Promise(async (resolve, reject) => {
try {
const data = await createUserWithEmailAndPassword(
authService,
getValues("email"),
getValues("pw")
);
await setDoc(doc(dbService, "user", data.user.uid), {
userId: data.user.uid,
userNickname: getValues("nickname"),
userEmail: getValues("email"),
userPw: getValues("pw"),
userImg: "null",
});
await updateProfile(data.user, {
displayName: getValues("nickname"),
photoURL: "null",
});
setTimeout(() => {
signOut(authService).then(() => {
sessionStorage.clear();
location.href = "/login";
});
}, 1500);
resolve("resolve 되었습니다.");
} catch (error: any) {
console.log(error.message);
if (error.message.includes("already-in-use")) {
reject("이미 가입한 회원입니다");
return;
}
}
}),
{
pending: "회원가입중입니다!!!!!!!!!",
success: "회원가입성공! 로그인해주세요",
error: `"이미 가입한 회원입니다"`,
},
{
hideProgressBar: true,
style: {
minWidth: "250px",
},
}
);
항상 공식문서에서 new Promise를 예제로만 많이 보고 , promise객체를 이해할때 많이봤었지 이렇게 직접 프로젝트에 활용을 해본게 처음인 것 같은데 뭔가 짜릿햇다고 해야하나....
뭔가 한층 더 레벨업 한 기분이라 오늘은 나름 뿌듯했던 개발일지 끄읕-
'📖 나의 개발일지 (WIL&TIL)' 카테고리의 다른 글
[TIL] 오늘의 개발일지 (0) | 2023.03.08 |
---|---|
[TIL] 오늘의 개발일지 (1) | 2023.03.07 |
[TIL] 끝날때까지 끝난게 아닌 오늘의 개발일지 (2) | 2023.03.03 |
[TIL] 오늘의 개발일지 (0) | 2023.03.02 |
[TIL] 오늘의 개발일지 (0) | 2023.02.28 |
댓글