내일배움캠프 3일차 TIL - 회원가입과 로그인

오늘은 프로젝트에서 회원가입과 로그인 기능을 구현하기로 하여,
관련된 기능을 찾아보는 시간을 가졌다.

MySQL을 사용하여 SQL와 Node.js를 자유자재로 다뤄 번듯한 구현을 할 수 있다면 정말 좋겠으나... 이 부분에 관해서는 예제 코드를 겨우겨우 실행하는 정도에 그쳤고,
대신 상대적으로 익숙해진 Firebase를 활용하는 방법을 알아보았다.

Firebase의 경우에는 이미 잘 만들어진 설명 문서가 있다.
https://firebase.google.com/docs/auth/web/firebaseui?hl=ko

따라서 기능은 문서를 따라가면 큰 문제 없이 완성되고,
주의할 점을 몇 개 소개하고자 한다.

1. 여전히 Import가 문제다

1-1. 어디서 가져올 것인가?

기존에 구현한 기능들(방명록, Todo리스트)은 전부 firestore의 것을 사용했다.
따라서, 새로운 기능을 추가할 때 이런 식으로 이름만 덧붙여도 문제가 없었다.

import { getFirestore, collection, addDoc, getDocs, doc, deleteDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

다만, 이번 로그인 기능에 필요한 것들은 analytics와 auth로 참조할 문서가 달랐다.

import { initializeAnalytics, getAnalytics } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-analytics.js";
import { createUserWithEmailAndPassword, signInWithEmailAndPassword, getAuth } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js';

기본적이기도 하고 꼼꼼히 따라했다면 문제가 없을 부분이지만, 여러 기능을 Import할 때 혹시 놓칠 수 있으니 잘 확인하도록 하자.

1-2. 버전이 통일되어 있는가?

나는 1-1을 깨닫지 못했을 때 혹시 이것이 버전의 문제는 아닐까 생각했다.
아주 틀린 말도 아니었던 것이, 1-1을 고쳤을 때는 이러한 문제가 있었다.

import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
import { initializeAnalytics, getAnalytics } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-analytics.js";
...
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-auth.js";

이것은 강좌를 들으면서 코드를 따라 치다 보니 발생한 문제인데,
윗부분은 고치는 과정에서 버전까지 통일했지만 아랫부분에 덜 고친 부분이 남아 서로 다른 버전으로 인해 오류가 발생했던 것이다.

되도록이면 최신 버전을 확인해서 사용하는 습관을 들여야겠다.
Tip : Import는 코드의 상단에서 몰아서 하도록 하자.

2. 유효한 이메일과 비밀번호를 쓰자

코드에는 문제가 없는데 자꾸 오류 메시지가 떠서 firebase에 들어가 같은 데이터를 직접 입력해봤더니, 이메일과 비밀번호의 양식에 간단한 조건이 있었다.

2-1. 이메일

abcd@ef.gh

와 같이 @뒤에 .을 포함한 도메인이 들어가야 한다.
메일을 보내 인증을 받도록 하는 방법도 구현할 수는 있지만,
일단 입력은 이 형식만 갖춰지면 문제 없이 된다.

2-2. 비밀번호

6자리 이상이기만 하면 된다.

이 점은 테스트 시에는 알기 힘들기 때문에, 다음과 같이 유효성을 검사할 수 있는 if문을 추가했다.

        $('#signUpButton').click(function (event) {
            event.preventDefault()
            const signUpEmail = document.getElementById('signUpEmail').value
            const signUpPassword = document.getElementById('signUpPassword').value

            if (pattern.test(signUpEmail) === false) {
                alert('유효하지 않은 이메일 형식입니다(abcd@defg.com)')

            }

            else if (signUpPassword.length < 6) {
                alert('비밀번호는 6자 이상이어야 합니다.')
            }

            else {
                createUserWithEmailAndPassword(auth, signUpEmail, signUpPassword)
                    .then((userCredential) => {
                        alert('가입 성공')
                        // Signed in
                        const user = userCredential.user;
                        // ...
                    })
                    .catch((error) => {
                        alert('오류가 발생했습니다!')
                        const errorCode = error.code;
                        const errorMessage = error.message;
                        // ..
                    });
            }
        });

비밀번호는 length만 검사하면 되기 때문에 간단하고,
이메일의 경우는

const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;

이러한 패턴이 있기 때문에 이를 상수로 저장하고 이에 맞는지 검사하면 된다.
(는 것을 검색을 통해 알게 되었다.)

회고

오늘 구현한 것은 회원가입을 통해 정보를 저장하고 로그인으로 이를 불러와서 검사하는 정도인데,
로그인한 상태를 유지하고 이를 가시적으로 표현하고, 또 로그아웃까지 할 수 있어야 로그인 기능의 의미가 있지 않나 싶다.
시간이 닿는다면 이 부분까지 해보고 싶은 바람이 있다.