[TIL] #12. 230925

어제 목표 & 오늘 완료한 한 일 

• 알고리즘 문제
• 웹개발 A to Z 복습 (4, 5주차)
• 웹개발 A to Z 응용 (지브리영화 소개 사이트)
• 스프링 강의

 
내일 목표

• 알고리즘 문제
• 웹개발 A to Z 응용 (지브리영화 소개 사이트)
• 내배캠 팀플

 

구현 내용

회원가입, 로그인 기능

 

발생한 문제와 해결

회원가입 기능을 구현하는 과정에서 아래와 같은 에러가 발생했다.

Failed to resolve module specifier "firebase/auth". Relative references must start with either "/", "./", or "../".

import 부분이 문제인 것 같아 import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

이와 같이 작성했던 코드를 전에 작성했던 코드들과 비슷하게 아래와 같이 수정하였다.

import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js";

그랬더니 처음에 발생했던 에러가 아닌 새로운 에러가 발생했다.

Uncaught ReferenceError: createUserWithEmailAndPassWord is not defined

에러메세지를 자세히보니 대소문자 실수가 있었다. (PassWord -> Password)

 

수정을 하고 파이어베이스를 확인했더니 회원가입 정보가 저장되지 않은 것을 확인할 수 있었다. 그리고 

POST https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=API_KEY 400

위와 같은 에러가 발생했다. console.log(errorMsg)를 해보니 

Firebase: Password should be at least 6 characters (auth/weak-password).

해당 에러메세지를 볼 수 있었다. 그래서 회원가입할 때 비밀번호를 6자이상으로 설정하여 다시 시도해본 결과 회원가입에 성공하였다.

 

느낀점

회원가입, 로그인 시 속도가 느리다는 생각이 들었다. 

그리고 로그인을 하지 않았을 경우, 네비게이션 바에 로그인, 회원가입 버튼이 나타나게 한 상태이고 로그인을 했을 경우에는 네비게이션 바에 해당 사용자의 이메일 앞부분과 로그아웃 버튼이 나타나게 하였다.

onAuthStateChanged(auth, (user) => {
            if (user) {
                let email = user.email;
                let nickname = email.split('@');
                let uid = user.uid;

                $('#aboutLogin').append(`
                    <a style="color: white">${nickname[0]} 님</a>
                    <button id="logout" type="button" class="btn btn-danger">Logout</button>
                `);
            } else {
                $('#aboutLogin').append(`
                    <button id="gologin" type="button" class="btn btn-outline-light me-2">Login</button>
                    <button id="gosignup" type="button" class="btn btn-danger">Sign-up</button>
                `);

                $('#aboutLogin').on('click', '#logout', function () {
                    auth.signOut();
                })
            }
        })

append()를 이용해 붙여준 부분이라 그런지는 몰라도 .click()을 이용하여 코드를 작성했을 때 버튼을 눌러도 실행되지 않았다. 그래서 마지막 부분과 같이 코드를 변경했더니 로그인, 회원가입 버튼은 잘 작동하지만 로그아웃 버튼이 제대로 작동하지 않는다.. 이유는 잘 모르겠다. 콘솔창에 에러메세지도 보이지 않고.. 뭐 때문인지 참 답답하다. 내일 꼭 해결하고 싶다.