TIL

이번주 부터 금요일까지를 목표를 잡고 MVP에 들어갈 기능구현을 시작했다.

시간이 부족해서 마음이 급했다. 원래하고 있던 기능들을 어느정도 마무리하고 다음 작업으로 넘어갔다.

다음작업은 마이페이지다.

파이어베이스로 프로젝트 작업을 하고 있고, 그래서 파이어베이스의 api로 데이터를 읽기 또는 업데이트가 가능했다.🔥

---

1. 고민 🧐

이러한 형식에서 비밀번호 변경과 닉네임 변경의 버튼은 하나로 수정이 되는데, 파이어베이스에서는 둘의 함수가 달랐다.

//Profile update

import { getAuth, updateProfile } from "firebase/auth";

const auth = getAuth();

updateProfile(auth.currentUser, {
  displayName: "Jane Q. User", 
  photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
	alert("등록완료")
}).catch((error) => {
  console.log(error)
});

//password update

import { getAuth, updatePassword } from "firebase/auth";

const auth = getAuth();

const user = auth.currentUser;
const newPassword = getASecureRandomPassword();

updatePassword(user, newPassword).then(() => {
alert("비밀번호 설정 완료")
}).catch((error) => {
console.log(error)
});

이 두 가지 메서드를 어떻게 같이 사용할 수 있을까 고민했다.

 

2.해결 방법

  const clickUserUpdate = async (e) => {
    e.preventDefault();
    if (window.confirm("개인정보를 수정 하시겠습니까?")) {
      await updateProfile(user, {
        displayName: newNickName,
      })
        .then(alert("개인정보 수정 완료"), setName(newNickName), setBtn(true))
        .catch((error) => {
          console.log(error);
        });
      await PasswordUpdateHanlder().then(console.log("비밀번호 변경확인"));
    } else {
      alert("개인정보 수정 취소");
    }
  };
  //비밀번호 바꾸기 함수
  const PasswordUpdateHanlder = async () => {
    await updatePassword(user, userPassword)
      .then(() => {
        console.log("password변경 성공");
      })
      .catch((error) => {
        console.log(error);
      });
    setUserPassword("");
  };

버튼에 OnClick을 주고 그 안에 updateProfile실행함수를 준 다음 updatePassword함수를 실행시키도록했다.

 

결과는 잘되었다.

다만 아쉽다면 비밀번호만 변경을했는데 강제로 닉네임 수정로직이 들어간다는 점이 아쉽다.

분명 좀 더 좋은 방법이 있을껀데 중간 발표의 시간이 급해져서 잠시나마 이렇게 기능을 구현했다.

추후에 예외 처리할때 좀 더 괜찮은 로직으로 짜볼 수 있도록 해야겠다. 👍