2021.08.29 개발 일지 (Firebase Authentication 회원가입 및 로그인 구현 / Formik, Yup 라이브러리 유효성

프로젝트 첫번째 날, 회원가입과 로그인 기능을 구현했다.
사용한 기술은 다음과 같다.

• 회원가입, 로그인 인증 - Firebase Authentication
• 유효성 검사 - Formik, Yup 라이브러리
• 사용자 정보 저장 - Firebase Firestore

웹페이지에 처음 접속하면 로그인과 회원가입 버튼을 볼 수 있다.

 

회원가입

회원가입은 이름, 이메일, 아이디, 비밀번호를 입력하여 진행한다.
아직 이메일, 아이디 중복 체크와 비밀번호 확인 기능은 구현하지 않았다.
Firebase Authentication을 이용해서 인증을 하고, Firestore에 사용자 정보를 저장하는걸 구현하는게 우선이기 때문!

그래도 유효성 검사는 미리 해두는게 좋을 것 같아서
리액트에서의 유효성 검사에 대해 찾아보다가 Formik 라이브러리와 Yup 라이브러리를 이용한 사례를 찾았다.

라이브러리를 사용하지 않고 유효성 검사를 구현하려면 코드가 굉장히 길어지고
각 폼의 양식마다 입력한 값을 관리하기가 쉽지 않다고 한다.
이것을 편하게 할 수 있도록 Formik 라이브러리가 제공되며
Yup을 이용해 각 필드의 유효성 검사 스키마를 쉽게 작성할 수 있었다.

내가 참고한 포스팅 링크 : https://velog.io/@roh160308/%EB%A6%AC%EC%95%A1%ED%8A%B8React-Formik-Yup

이런 식으로 유효성 검사에 어긋나는 값을 입력한 경우, input 아래에 자동으로 메세지가 출력된다.
이름 유효성 검사에 대한 코드만 간단히 작성하자면 다음과 같다.

<Formik initialValues={{ name: '', email: '', id:'', password: ''}}
	validationSchema={
    	Yup.object({ name: Yup.string()
        .max(10, '이름은 10글자 이하로 작성해주세요.')
        .required('이름을 입력해주세요.'), })}
        onSubmit = {(values, { setSubmitting }) => {
        	//모든 유효성 검사를 통과했을 때
        }}>
        {formik => (
        	<form onSubmit={formik.handleSubmit}>
            	<Input id="name" type="text" placeholder="이름"
                	{...formik.getFieldProps('name')} />
                    {formik.touched.name && formik.errors.name ? ( <div>{formik.errors.name}</div> ) : null}
                <SignUpBtn type="submit">가입하기</SignUpBtn>
            </form>
        )}
 </Formik>

Formik 태그 안에 폼 양식과 유효성 검사 스키마를 작성했다.
Yup 라이브러리에서 max로 최대 글자수 제한을, required로 작성 여부 확인을 할 수 있다.
아주 간단하게 코드 작성이 가능해서 유용했다!

로그인

회원가입을 완료하면 Firestore에 사용자 정보를 등록하고 나서
로그인 화면으로 이동하게 되고 이메일과 비밀번호를 입력하여 로그인할 수 있다.

사용자 계정 정보는 Firebase Authentication을 이용했고 로그인을 할 때 현재 세션에서 인증 상태를 유지하도록 했다.
참고한 공식 문서 : https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ko

로그인에 성공하면 alert가 뜨고 메인 화면으로 이동한다.

로그인 성공 후 메인 화면

로그인 상태를 현재 세션동안 유지되도록 하는 것은 어렵지 않았는데
App.js에서 로그인 상태를 파악하기 위해 이것저것 시도하느라 시간이 꽤 걸렸다.
해결한 방법은 Firebase auth의 onAuthStateChanged 메소드를 이용하는 것이었다.

 componentDidMount() {
 	auth().onAuthStateChanged((user) => {
    	if(user) { //로그인한 상태일 때
        	console.log('로그인한 이메일 : ' + user.email);
            this.setState({email: user.email});
        } else { //로그인 안한 상태일 때
        	console.log('로그인 안된 상태');
        }
    });
 }

리액트 라이프 사이클 함수 중 첫번째 렌더링을 마친 후에 실행되는 componentDidMount에서
onAuthStateChanged를 이용하여 로그인 여부를 파악해서 로그인이 되어있으면 state를 변경하여 리렌더링한다.
관련 내용을 찾다가 react-redux-firebase라는 패키지가 있는 것을 알게 되었는데
추후에 redux도 사용할 예정이라 해당 패키지에 대해서 좀 더 조사해봐야겠다.

---

지난 달에 리액트 강의를 듣긴 했으나 직접 코드를 작성하는 것은 처음이라 기억이 가물가물한 부분도 많았고
새로운 라이브러리를 사용하니까 사용법을 익히는데 시간도 좀 걸렸다.
하지만 역시 눈으로 보는 것에 비해 실제로 코드를 작성하는 것이 학습 효과가 더 뛰어난 것 같다.
프로젝트 첫날이지만 많은 것을 복습하고 배울 수 있었다!👍