[TIL] 최종 프로젝트 4주 차_월요일

유진·2023년 2월 27일

TIL

TIL Today I Learned

목록 보기

83/116

2023.02.27.(월)

TIL Today I Learned
해당 깃허브

Good: 머리를 굴려 구글 소셜 로그인 시 마이페이지 회원정보 수정에 비밀번호 변경 토글이 뜨지 않게 했다.

Bad: 리코일 공부하는데 당최 무슨 말인지 모르겠다.

[ 최종 프로젝트 오류]
문제점: 구글 소셜 로그인 시 비밀번호를 바꿀 필요가 없다. 회원 정보 수정에서 보이지 않게 하고 싶다.

해결점: localStorage 추가함. (읽기, 쓰기, 삭제)

//AuthSocial component
//setItem
  const signInWithGoogle = async () => {
    setSocial(true);

    signInWithPopup(authService, new GoogleAuthProvider())
      .then(() => {
        userState = {
          ...userState,
          uid: authService.currentUser?.uid,
          userName: authService.currentUser?.displayName,
          userImg: '/profileicon.svg',
        };
        props.closeModal();
        customAlert('로그인에 성공하였습니다!');
      })
      //* 구글 로그인 시 user 추가하기
      .then(() => {
        onAddUser(userState);
        localStorage.setItem('googleUser', 'true'); //key, value
      })
      .catch(() => {
        setSocial(false);
      });
  };

//ModalProfile component
//getItem
  const [googleUser, setGoolgleUser] = useState(true);
  
    useEffect(() => {
    const googleIdUser = localStorage.getItem('googleUser');
    if (googleIdUser) {
      setGoolgleUser(false);
    } else {
      setGoolgleUser(true);
    }
  }, []);

////ModalProfile component
reture(
 {/* 비밀번호 변경 */}
 {/* 구글 유저 숨기기 */}
            <div>
              {googleUser ? (
                <PwToggleContainer
                  onClick={() => {
                    setPwToggle((e) => !e);
                  }}
                >
                  <PwToggleText>
                    비밀번호 변경하기
                    {pwToggle ? (
                      <ClosePwToggleImg src="/under-arrow.png" />
                    ) : (
                      <OpenPwToggleImg src="/right-arrow.png" />
                    )}
                  </PwToggleText>
                </PwToggleContainer>
              ) : (
                ''
              )}
)

//Profile component
//removeItem
  // 로그아웃
  const logOut = () => {
    signOut(authService).then(() => {
      // Sign-out successful.
      localStorage.clear();
      setCurrentUser(false);
      customAlert('로그아웃에 성공하였습니다!');
      localStorage.removeItem('googleUser');
    });
  };

localStorage란?

localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있다.

저장한 데이터는 세션간에 공유된다.

즉, 세션이 바뀌어도 저장한 데이터가 유지된다.
setItem() - key, value 추가
getItem() - value 읽어 오기
removeItem() - item 삭제
clear() - 도메인 내의 localStorage 값 삭제
length - 전체 item 갯수
key() - index로 key값 찾기

[ 18주 차 계획 ]

- 스파르타코딩클럽 계획