Project 소개
Firebase를 활용하여 회원가입 정보를 데이터베이스에 저장하고 로그인하는 프로젝트를 구현해보았다. Firebase의 메소드를 사용하는 방법은 Firebase 공식 문서에 상세히 설명되어 있어서 해당 문서를 참고하면서 코드를 작성해보았다.
프로젝트를 통해 연습하고자 했던 것
- React
- useState
- React router dom
- Form 데이터 전송
- Firebase Authentication
Firebase
Firebase에서 프로젝를 생성하고 npm을 사용하여 Firebase를 React 프로젝트에 설치했다. Firebase에서는 로그인 구현 방식이 정말 다양하지만, 이번 프로젝트에서는 일반 이메일과 gmail 방식만 선택했다. 실제 백엔드 서버와 작업 할때는 API를 통해 조금 다르게 구현할 수 있지만, 이번 프로젝트를 통해 기본 구현방법을 배울 수 있었다.
React router dom
여러 개의 Route를 사용하여 각 페이지에 대한 경로(path)를 지정했다. 그리고 만약 사용자가 존재하지 않는 페이지로 이동하게 되면, 아래의 이미지와 같이 해당 페이지로 이동된다 (Error 404)
회원가입
이번 미니 프로젝트를 통해 useState의 편리성과 중요성을 더욱 알게되었다. useState는 변경 가능한 데이터를 다루는 데 사용되며, 초기값을 설정하여 기본값으로 사용할 수 있고. 사용자가 입력한 데이터에 따라 값이 변경되고, 그 변경된 값을 useState에 다시 저장할 수 있다는 점을 알게 되었다.
handleSubmit()
handleSubmit 함수는 폼(form) 제출 버튼의 역할을 한다. 먼저, preventDefault 메서드를 사용하여 회원가입 정보를 제출할 때 페이지가 새로 고쳐지지 않고 제출이 동작되도록 하는 것이다. 그리고 회원가입이 성공한 경우, 모든 input 필드를 초기화하기 위해 input 값을 초기화합니다. setNavigate는 초기값이 false로 설정되어 있으며, 회원가입이 성공하면 true로 변경되고, Navigate Router를 사용하여 로그인 페이지로 이동이 된다.
input 요소에서는 기본적으로 value, event, 그리고 다양한 메소드를 추가할 수 있다. value를 사용하면 useState의 초기값을 반영할 수 있으며, 회원가입이 성공한 후에는 input 창을 초기화하는 데 사용할 수 있다. 또한, onChange()로 통해 useState의 값에 데이터를 저장하고, 이를 활용하여 Firebase에 사용자가 입력한 데이터를 저장할 수 있는 것이다.
로그인
handleLogin();
signWithGoogle();
