내일 배움 캠프 4기 TIL(22.11.23)

-auth.js-
import { emailRegex, pwRegex } from "./util.js";

import { authService } from "./firebase.js";


import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-auth.js";
import {
    // createUserWithEmailAndPassword,
    // signInWithEmailAndPassword,
    GoogleAuthProvider,
    signInWithPopup,
    GithubAuthProvider,
    signOut,
  } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js";
  

export function handleAuth(event){
    if(document.querySelector('#signup__btn').innerText === '가입하기'){

    event.preventDefault()
    const signUpEmail = document.getElementById('signup__email').value
    const signUpPassword = document.getElementById('signup__pw').value
    const signUpNickname = document.getElementById('signup__pw').value

    createUserWithEmailAndPassword(authService, signUpEmail, signUpPassword,signUpNickname)
        .then((userCredential) => {

            console.log(userCredential)
            const user = userCredential.user;
            window.location.hash = "/";

            console.log(user)
         
        })
        .catch((error) => {
            console.log('error')
            const errorCode = error.code;
            const errorMessage = error.message;
        });
}else{
    event.preventDefault();
    const email = document.getElementById("signin__email");
    const emailVal = email.value;
    const pw = document.getElementById("signin__pw");
    const pwVal = pw.value;
  
    // 유효성 검사 진행
    if (!emailVal) {
      alert("이메일을 입력해 주세요");
      email.focus();
      return;
    }
    if (!pwVal) {
      alert("비밀번호를 입력해 주세요");
      pw.focus();
      return;
    }
  
    const matchedEmail = emailVal.match(emailRegex);
    const matchedPw = pwVal.match(pwRegex);
  
    if (matchedEmail === null) {
      alert("이메일 형식에 맞게 입력해 주세요");
      email.focus();
      return;
    }
    if (matchedPw === null) {
      alert("비밀번호는 8자리 이상 영문자, 숫자, 특수문자 조합이어야 합니다.");
      pw.focus();
      return;
    }
    //로그인

    event.preventDefault()
    const signInEmail = document.getElementById('signin__email').value
    const signInPassword = document.getElementById('signin__pw').value
    signInWithEmailAndPassword(authService, signInEmail, signInPassword)
        .then((userCredential) => {
            const user = userCredential.user;
            console.log(userCredential)
            window.location.hash = "/";
            // document.querySelector('#log__inout').innerText = '로그아웃'



        })
        .catch((error) => {
            console.log('로그인 실패')
            const errorCode = error.code;
            const errorMessage = error.message;
        });
}}


export const socialLogin = (str) => {
    let provider;
    if (str === "google") {
      provider = new GoogleAuthProvider();
    } else if (str === "github") {
      provider = new GithubAuthProvider();
    }
    signInWithPopup(authService, provider)
      .then((result) => {
        const user = result.user;
      })
      .catch((error) => {
        // Handle Errors here.
        console.log("error:", error);
        const errorCode = error.code;
        const errorMessage = error.message;
      });
  };

  export const logout = () => {
    signOut(authService)
      .then(() => {
        // Sign-out successful.
        localStorage.clear();
        console.log("로그아웃 성공");
        document.querySelector('#log__inout').innerText = '로그인'
        window.location.hash = "/"
    })
      .catch((error) => {
        // An error happened.
        console.log("error:", error);
      });
  };
  

-main.js-
import { authService } from "./firebase.js";
import { socialLogin } from "./auth.js";
import { logout } from "./auth.js";
import { handleLocation,route } from "./router.js";
import { handleAuth } from "./auth.js"

// hash url 변경 시 처리
window.addEventListener("hashchange", handleLocation);
// 첫 랜딩 또는 새로고침 시 처리
// document.addEventListener("DOMContentLoaded", handleLocation);
// 첫 랜딩 또는 새로고침 시 handleLocation 실행하여 화면 변경
document.addEventListener("DOMContentLoaded",  () => {
    // Firebase 연결상태를 감시
    authService.onAuthStateChanged((user) => {
      // Firebase 연결되면 화면 표시
      handleLocation();
    //   const hash = window.location.hash;
      if (user) {
        // 로그인 상태이므로 항상 팬명록 화면으로 이동
        document.querySelector('#log__inout').innerText = '로그아웃'
    
    } else {
        // 로그아웃 상태이므로 로그인 화면으로 강제 이동
        
      }
    });
  });

  document.querySelector('#log__inout').addEventListener('click',()=> {
    if( document.querySelector('#log__inout').innerText === '로그아웃'){
        logout()
    }
  })


// 전역함수 리스트 
window.route = route;
window.handleAuth = handleAuth;
window.socialLogin = socialLogin;
window.logout = logout

-util.js-
  export const emailRegex = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g;
export const pwRegex =
  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;

오늘은 firebase로 로그인기능 회원가입기능 소셜 로그인까지 다했다... 후.... 이거 하느냐고 4일에서 5일 정도 걸린거 같은데.... 프로젝트하면서 하는게 너무 어려우면서도 하나씩 이해하고 해나가는 작업이
미친듯이 실력이 늘어나는거 같으면서도 고통스럽기까지 한거같다.그래도 더열심히해서
내일은 crud 까지 할생각이다 프로젝트 무조건 완성한다 할수있다!!!