[firebase] authentication④ 회원 탈퇴 구현

이민선(Jasmine)·2023년 3월 25일
0

지난 시간에는 이메일 회원가입과 이메일 로그인을 구현해보았다. 당시에 오류 날 때마다 실낱같은 희망으로 회원가입 시킨 수많은 가상의 회원들 ㅋㅋㅋㅋㅋㅋㅋ

지난 시간에 로그인했던 jasmine2@gmail.com으로 로그인을 해보았다. session storage에도 정보가 잘 뜨고 있다.
물론 logout을 누르면 session storage에 있는 로그인 정보도 사라진다.

이번 시간에는 withdraw를 눌렀을 때 회원 탈퇴를 할 수 있도록 구현할 것이다.
docs를 보면서 코드를 짜보았다.

  const handleWithdraw = () => {
    const user = auth.currentUser;
    deleteUser(user as any).then(() => {
      console.log("계정이 삭제되었습니당");
    });
  };

withdraw를 클릭!

다시 홈 화면으로 넘어온다.
계정이 삭제되었습니당
이라는 문구도 성공적으로 console 출력되고 있다.

jasmine2@gmail.com도 사라졌다!!
(jasmine@naver.com은 아직 회원 탈퇴를 안시켰다.)

물론 이메일 로그인 뿐만 아니라 구글 로그인했던 것도 성공적으로 삭제 된다!!

MyPage.tsx

import React from "react";
import styled from "styled-components";
import { Link, useHistory } from "react-router-dom";
import { signOut, deleteUser } from "firebase/auth";
import auth from "./service/firebase";

// styled components 생략

function MyPage() {
  const history = useHistory();
  const handleGoogleLogout = () => {
    signOut(auth)
      .then(() => {
        history.push("/");
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const handleWithdraw = () => {
    const user = auth.currentUser;
    deleteUser(user as any).then(() => {
      console.log("계정이 삭제되었습니당");
    });
  };
  return (
    <>
      <BtnWrapper className='MyPage'>
        <Btn onClick={handleGoogleLogout}>Log-Out</Btn>
        <Link
          to={{
            pathname: `/`,
          }}
        >
          <Btn onClick={handleWithdraw}>withdraw</Btn>
        </Link>
      </BtnWrapper>
    </>
  );
}

export default MyPage;

이로써 hosting 뿐만 아니라 authentication의 기본이 되는 구글 로그인, 이메일 로그인, 이메일 회원가입, 회원 탈퇴까지 구현해보았다.
처음에는 방법을 몰라 많이 헤맸지만(특히 docs에 있던 코드를 함수에 넣는건지도 몰랐을 때 ㅋㅋㅋㅋㅋ), 매번 논리가 비슷하다보니 시간이 갈수록 덜 헤매게 되고 더욱 자신감이 생겼다! 이제 미니 프로젝트할 때도 가장 기본적인 authentication은 금방 할 수 있을 것 같은 자신감이 든다!
물론 firebase에서 제공하는 authentication 기능은 다양하기 때문에 필요할 경우 더 공부해야겠지만, 이 정도 경험만으로도 추후 firebase 인증 구현에 필요한 학습의 최소한의 초석 정도는 쌓아둔 것 같다.

무엇보다도 온전히 내 힘으로 기능 구현을 해본 건 사실상 처음이어서 그런지 보람이 있다! 이전에는 대부분 클론 코딩이나 과제만 해봤지만, 이렇게 내 스스로 구현해보고 싶은 기능을 찾는 것부터 실제로 결과가 나오기까지 일련의 과정이 나의 실력 측면에서도 자신감 측면에서도 도움이 많이 되었던 것 같다. 아주 나이스 스따뜨!

다만 여전히 아쉬운 건 type을 어쩔 수 없이 계속 any로 주고 있다는 점 ㅠㅠ typescript를 빨리 공부하던가 해야지 영 찝찝한 건 어쩔 수 없구나
typescript 공부해서 지금까지 any로 준 type들을 얼른 알맞게 바꾸며 리팩토링 하고 싶다.

다음 시간부터는 firebase의 클라우드 서비스인 firestore로 CRUD 구현하기를 연습하기로 계획 중이다! 어떤 프로젝트를 하더라도 데이터는 필수적으로 다루게 될 것이고, 데이터를 다루려면 DB를 다룰 준비도 해야할 것이다. 그래서 배우기로 결정한 뽜이어스토어이지만.. 사실 firestore는 장단점이 명확하긴 하다.

장점은 나 같은 서버 초보가 다루기에 장벽이 압도적으로 낮다는 점 (딱 나처럼 백엔드 없이 손쉽게 서버를 다루고 싶은 사람을 위해 개발된 서비스임), 아마존과 달리 일정 사용량을 달성하지 않으면 무료라는 점이다.
단점은 서버 응답 속도가 비교적 느리다는 점과 쿼리 구성이 빈약한 점이라고 한다. 나는 아직 쿼리에 대해 잘 모르지만.. 이 단점은 SQL에 익숙한 개발자들이 겪는 어려움이라고 한다. (비슷한 글자나 데이터를 검색하는 게 어렵다고 한다. ) 나는 noSQL인 MongoDB만 아주 슬쩍 건드려봤기 때문에 나에게 해당되는 단점은 아닐 듯 하다.

firebase 장단점 참고:
https://www.icia.co.kr/community/board/view/2/1/81

앱 규모가 커지고 데이터 필드가 많아질수록 이런 단점이 더 크게 작용한다고는 하지만, 미니 프로젝트로 시작할 나에게는 서버에 대한 큰 걱정 없이 앱 개발에 집중할 수 있게 해준다는 것만으로도 큰 장점이 될 것이다.

각설하고 다음 시간부터는 firestore를 본격적으로 시작하는 걸루! 화이띵~~~

나의 앱 링크
https://learn-firebase-2ebf6.web.app/

참고
https://firebase.google.com/docs/auth/web/manage-users?hl=ko

profile
기록에 진심인 개발자 🌿

0개의 댓글