본문 바로가기
Projects

로그인 지옥에 빠지다...

by 해-온 2021. 10. 7.

오늘 한 내용

  • 이메일, 비밀번호 오류 시 한글 오류 출력 (그 외의 오류의 경우 영어로 그대로 출력)
  • 이미지 파일 출력
  • oauth 로그인 시 화면 이동 불가 오류 수정

오늘 배운 내용

  • firebase의 이메일 중복을 처리하는 api는 따로 없는 듯하다.
  • form에 onSubmit를 설정하면 그 안에 있는 모든 버튼에 onSubmit가 설정된다.
  • csshake를 이용해 요소들을 떨리게 만들 수 있다.
  • 사진을 업로드하기 위해서는 input에 설정을 하고 button이 input의 설정을 받아 파일 창을 띄우는 방식으로 접근해야 함.await authService.signInWithPopup(provider)을 선언하고 (나는 data라고 선언) if(data){history.push("/home")};으로 적어주면 로그인 상태 변화 함수를 쓰지 않고도 페이지를 이동할 수 있음. (왜 이걸 쓰면 안 되냐? 회원가입도 로그인 상태 변화로 인식해서 회원가입만 해도 페이지가 이동함,,,)

캡쳐

*이번 캡쳐는 생략하도록 하겠음. 노션에만 올리겠다. 

소감

아직 본 프로젝트는 시작도 안 했는데 로그인으로 벌써 지쳐버렸다. 생각보다 복잡하고 어려워서 기능을 몇개나 없애버렸는지 모르겠다. (아깝다...) 그래도 직접 해보니 이제 hook도 알고 쓰는 느낌이 나고 전체 구조의 흐름을 느낄 수 있었다. 혼자 하는 두번째 프로젝트인데 너무 과도하게 진행하는 거 같아 걱정이 되기도 한다. 제발 지치지 말고 너무 멀지 않은 기간내 번듯하게만 만드는 것에 집중하자.

오류 일지

  • onChange를 이용해 password와 passwordCheck의 값이 같은지 평가하고 싶었지만 한박자 늦게 출력. callback 함수를 사용해도 그대로,,, 결국 submit를 이용해 값이 제출 되었을 때로 변경함.
  • form에 onSubmit를 줘서 그 안의 button이 덩달아 이상해짐. 이메일 중복 여부를 처리하는 방법을 몰라 결국 버튼을 없애고 firebase 자제 오류 메세지를 받아와 한글로 출력.
  • 이미지 파일을 화면에 출력하고 이미지들을 데이터베이스에 저장하려고 했음. 그러나 firebase storageBucket 값이 읽어들여지지 않음. 직접 key를 입력하고 하니 사진 한개만 받아져오는 오류가 또 생성. 일단 회원가입창에 올리는 것을 의의로 두려고 함.

'Projects' 카테고리의 다른 글

프로젝트 마무리  (0) 2021.10.28
메인 페이지 구성  (0) 2021.10.26
firebase를 이용한 로그인, 로그아웃  (0) 2021.10.01
로그인 화면 디자인 - react , postCSS  (0) 2021.09.23
로그인 페이지 구현 - Firebase 사용  (0) 2021.09.16

댓글