📝 To Do List

✔ 새로고침 시 이미지 날라감 해결
✔ 이미지, 닉네임 따로 수정 가능
✔ 소셜 로그인 틀잡기

---

☠️ 문제 1

새로고침하면 이미지가 날라감

👩🏻‍🎓 해결

✅ 알게된 점

---

☠️ 문제 2

새로고침을 하면 닉네임이 없어짐. 새로고침을 해도 nickname이 유지되게 해야 함!

 // 닉네임 관련
  const currentUserInfos: any = auth.currentUser; // 현재 로그인한 사용자의 정보들(파이어베이스)
  console.log('currentUserInfos', currentUserInfos);
  console.log('auth.currentUser?.displayName', auth.currentUser?.displayName);
  const [nickname, setNickname] = useState<any>(auth.currentUser?.displayName); // 현재 닉네임 상태변경
  const [currentUser, setCurrentUser] = useState<any>(''); // 현재 로그인한 사용자 가져오기 및 변경 전 데이터

  // 현재 로그인한 사용자 가져오기
  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        setCurrentUser(currentUserInfos);
      } else {
        return console.log('로그인 안됨');
      }
    });
  }, [currentUser]);

💡원인

useEffect 함수 내에서 auth.onAuthStateChanged() 함수를 호출하여 사용자 상태가 변경될 때마다 setCurrentUser 함수를 호출해서 현재 로그인한 사용자 업데이트는 하고 있지만
nickname 상태는 업데이트 하고 있지 않기 때문이다.

👩🏻‍🎓 해결

사용자 로그인 상태가 변경될 때마다 nickname 상태도 업데이트해줘야 함
그러려면 auth.onAuthStateChanged() 함수에서 setNickname 함수를 호출하도록 수정하면 됩니다.

  // `useEffect` 함수 내에서 `auth.onAuthStateChanged()` 함수를 호출하여 사용자 상태가 변경될 때마다 `setCurrentUser` 함수를 호출해서 현재 로그인한 사용자 업데이트를 하고 setNickname으로 nickname 상태도 업데이트 해주면 됨 
  
  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        setCurrentUser(currentUserInfos);
        setNickname(currentUserInfos?.displayName);
      } else {
        return console.log('로그인 안됨');
      }
    });
  }, [currentUser]);

---

☠️ 문제 3

이미지를 수정해야 닉네임이 수정됨..

이미지만 수정하면? 수정가능!

닉네임만 수정하면? 수정불가!

  // 수정완료 버튼 누를 때 유효성 검사 확인만
  const nicknameChangeOnClick = async (e: any) => {
    if (nickname.length < 2 || nickname.length > 5) {
      alert('2글자 이상 5글자 이하로 입력해주세요.');
      return;
    } else if (imgFile.length !== 0) {
      const imgRef = ref(storage, `profileUploadImg/${uuidv4()}`);
      // Storage에 이미지 업로드
      const response = await uploadString(imgRef, imgFile, 'data_url');
      // 업로드한 이미지의 url 가져오기
      const downloadImageUrl = await getDownloadURL(response.ref);
      setImgUploadUrl(downloadImageUrl);
      setProfileUrl(downloadImageUrl);
      setImgProfileUrl(downloadImageUrl);
      await updateProfile(currentUser, {
        displayName: nickname,
        photoURL: downloadImageUrl,
      })
        .then(() => {
          setNickname(nickname);
          alert('프로필 수정 완료!');
          setOpen(false);
        })
        .catch((error: any) => {
          return console.log('error');
        });
    }
  };

💡원인

이미지와 닉네임을 동시에 수정하는 코드, 닉네임만 수정하는 코드를 따로 작성해야함 !

수정이 되는 조건을 보면 imgFile.length !== 0인데 수정할 이미지가 있을 때 닉네임과 이미지를 업데이트 해준다는 것인데 그럼 닉네임만 수정하는 코드는? 없기 때문에 닉네임만 수정이 안 되는 것

👩🏻‍🎓 해결

imgFile === 0일 때, imgFile !== 0일 때 각각 다른 로직을 구현해줘야 함

const nicknameChangeOnClick = async (e: any) => {
  if (nickname.length < 2 || nickname.length > 5) {
    alert('2글자 이상 5글자 이하로 입력해주세요.');
    return;
  }
  
  // 이미지 수정을 안할 땐, 닉네임만 수정해줘라
  if (imgFile.length === 0) {
    try {
      await updateProfile(currentUser, {
        displayName: nickname
      });
      
      setNickname(nickname);
      alert('프로필 수정 완료!');
      setOpen(false);
    } catch (error) {
      console.log(error);
    }
  // imgFile의 값이 0이 아니면 이미지 업로드를 먼저 진행하고, 
  // `updateProfile()`을 호출하여 닉네임, 프로필 사진을 업데이트함
  } else {	
    try {
      const imgRef = ref(storage, `profileUploadImg/${uuidv4()}`);
      const response = await uploadString(imgRef, imgFile, 'data_url');
      const downloadImageUrl = await getDownloadURL(response.ref);
      
      await updateProfile(currentUser, {
        displayName: nickname,
        photoURL: downloadImageUrl
      });
      
      setNickname(nickname);
      setImgUploadUrl(downloadImageUrl);
      setProfileUrl(downloadImageUrl);
      setImgProfileUrl(downloadImageUrl);
      // 업데이트가 완료되면 상태값들을 업데이트하고 수정 완료 띄우기
      alert('프로필 수정 완료!');
      setOpen(false);
    } catch (error) {
      console.log(error);
    }
  }
};

---

📚 Today Study

OAuth

accessToken

유저의 요청에 의해 구글, 네이버 등의 서비스가 아이디, 비밀번호 대신에 accessToken이라고 하는 일종의 비밀번호를 발급함

• 장점
  • 엑세스 토큰은 그들의 서비스의 id, 비번이 아니다.
    - 그들의 서비스가 갖고 있는 모든 기능이 아니라 그 중에 나의 서비스가 꼭 필요한 필수적인 기능만 부분적으로 허용하는 비밀번호
  • 그들의 서비스 액세스 토큰을 우리가 oauth를 통해 획득한 다음에 그 액세스 토큰을 통해서 그들의 서비스에 접근해서 데이터를 가져오고 수정하고 생성하고 삭제하는 작업을 할 수 있게 되고, 이것을 가능하게 해주는 기술이 oauth, oauth를 통해서 액세스 토큰을 얻어낼 수 있다.

Token

서버가, 각각의 클라이언트를 누군지 정확히 구별할 수 있도록,
유니크한 정보를 담은 암호화 데이터
유저 구별이 가능해야, 유저의 권한에 맞는 정확한 기능을 응답할 수 있다.
( 사용자 구분 및 정보 유출방지 )

역할

• resource server : 네이버, 카카오(데이터를 가지고 있는 서버)
• authorization server : 인증과 관련된 처리를 전담하는 서버
• resource owner : 고객
• client : 우리

OAuth 등록 절차

클라이언트가 리소스 서버를 이용하기 위해선 리소스 서버에 사전에 승인을 받아놔야함

---

📝 Today Review