파이어베이스 리액트 방명록사이트 만들기 #2

해기·2023년 1월 4일
0

이번에는 저번 글에 이어서 회원가입을 마무리짓고 로그인까지 성공시키는 글이 될거같다.

회원가입 마저 만들어놓기

저번시간에 유저의 프로필이미지 미리보기를 띄우는것까지 끝내놓았다. 오늘은 input값들을 모두 받아와서 회원가입을 시켜주면 끝일거같다.

  • input의 value값을 관리해줄 state와 함수만들기
const [joinState, setJoinState] = useState({
    joinEmail: "",
    joinPassword: "",
    joinName: "",
  });

  const handelJoinState = (e) => {
    e.preventDefault();
    setJoinState({
      ...joinState,
      [e.target.name]: e.target.value,
    });
  };

코드는 이렇게 작성이되었다. joinState라는 useState에서 빈값을 가지고 그 값을 수정해줄 함수를 만들어주었다.
이제 위 값과 함수를 input에 value와 onChange이벤트에 넣어주면 완성이다. 그리고 name속성까지 붙여주어야 제대로 작동이될것이다.

이러한 모습인데 다 거기서 거기인 코드들인데 코드가 너무 길다.
이걸 줄일 방법이 있을텐데.. 아직 숙련도의 차이이지않을까싶다.
(아니라면 내가못하는것일뿐..)

이제 input의 값을 잘 받아올 수 있게 됐고

이 값을 가지고 회원가입을 시켜주면 될것이다.
회원가입에는 저 세가지말고도 유저의 이미지도 넣어주어야한다.

전에 미리보기에 작업한것처럼 해둔것이있으니 금방할거같다.

  • 파이어베이스에 회원가입 보내주기

이제 회원가입을 하면 파이어베이스에 유저정보를 보내주어야한다.

파이어베이스에 보내줄 유저정보는 이메일,비밀번호, 유저이름,유저의프로필사진

이렇게 네개를 보내주어야한다.

코드는 다 짜두었고 메모를 남겨두기만하면 될거같다.

일단 미리보기의 useState에 담아두었던 이미지 데이터로는 파이어베이스의 스토리지에 저장이 불가능했던걸로 기억한다. 그래서 새로운 useState를 만들어주었다.

저 userPhoto라는 state에 유저가 올린 파일을 담을것이다. 파일을 담는방법은 간단하다. input의 onChange이벤트에서 e.target.files를 보내주면된다.

이미지를 여러개를 보낼건 아니기때문에 0번째의 이미지만 보내주려한다.
그리고 그 이미지를 담은 state를 이용하여 회원가입에 성공했을 때 유저의 이미지를 데이터베이스에 보낼것이다.

일단 회원가입버튼에 달아줄 함수의 이름은 joinBtn으로 지어주었고 안의 코드를 한번 살펴보면

나의 메모들이 적혀있기에 코드가 좀 길고 복잡하다.

주석처리된 메모들에도 설명이 쓰여있지만 하나씩 살펴보면
나는 유저가 이미지를 올릴수도 올리지않을수도 있기에
조건문으로 작성을해주었고 유저가 이미지를 올렸을 때는
앞서 만들어두었던 useState에 무언가 들어있을테니 저렇게 확인을해주었다.

이제 코드를 한번확인해보면 userPhoto에 데이터가 들어있다면 이미지를 스토리지에 올려줄 코드를 진행하는데
이미지를 스토리지에 올려주는 코드는

const storageRef = storage.ref();
const storagePath =storageRef.child("경로" + 파일명);
const upload = storagePath.put(업로드할 파일)

위 처럼 사용해주면 파이어베이스 storage에 파일올리기가 가능하다. 업로드 할 파일은 userPhoto에 담아두었으니 그걸 보내주면된다.
근데 나의 코드에는 저 세줄로 끝나는게아니라 무언가 더 긴 이유는 업로드가 진행중일때와, 실패했을때, 성공했을때 의 코드를 작성해준것이다.

그리고 이미지가 정상적으로 storage에 업로드가되었다면
user의 정보에 displayName을 지정해주고 photoURL에 url까지 넣어주는 작업을 진행해주도록했다.

이정도만 해도 회원가입과 회원가입겸 프로필사진 설정이 끝났다.

혹시 몰라 유저가 이미지를 올리지않았을 때의 코드도 남겨두겠다.

이제 정상적으로 잘 작동한다. 이미지를 올렸을때와 올리지않았을 때 alert창을 띄워 확인까지 끝마쳐주었다.

회원가입의 기능은 여기서 마무리지어도 될것같다.

다음에는 로그인기능을 만드는김에
로그인을했을 때 헤더에 유저의 이름과 프로필사진을 띄워주는 작업을 해보겠다.

마무리

오늘 사실 로그인까지 하려했는데 운동도가고 게임도 조금 하다보니 시간이 너무 늦어서 회원가입기능에 마무리짓도록해야할거같다.

profile
프론트엔드 개발 공부중, 글쓰는데 재주가없음

0개의 댓글