[17일차] 오늘의 개발일지(TIL)

 

오늘은 쌤이 올려주셨던 샘플 예제에서 작업을 하는게 아니라

새로 프로젝트 파일을 파서 처음 기본 설정부터 끝까지 잘 작동하나 테스트를 해보았다.

 

<오늘 테스트해본 백엔드 기능>

1. 로그인

2. 회원가입

3. 게시물 등록

4. 게시물 삭제

5. 게시물 수정

6. 검색기능(테스트 중)

 

 

내가 담당한 부분은 로그인/회원가입/프로필 내용변경인데, 문제없이 작동하니

남은 시간동안 다른 팀원분들 잘 안되는거 같이 연구해보고 또 추가로 구현하고 싶었던 기능들 계획 짜서

프로젝트 마감일보다 하루 이틀정도는 일찍 무엇이던 끝나도록 노력해야겠다.

 

아래는 내가 쌤이 올려주셨던 샘플코드 보면서 주석달며 공부한 코드들!!

오늘 갑자기 든 생각인데 12월부터는 나도 깃허브에 잔디심기(ㅋㅋ)를 해봐야겠다

아주 짧은 코드도 괜찮다고 하던데, 다른 사람들이 어떻게 하는지 잘 살펴봐야징~~

 

// 얘가 대장 main.js
// 실제 기능구현해야되는 넘들이 Main.js에 들어있네
// auth, profile, fanLog 
import { handleAuth,logout,handleJoin,moveJoinPage,test_moveJoinPage,test_socialLogin,test_logout,test_LoginAuth,test_join,test_moveLoginPage } from "./pages/auth.js";
import { changeProfile, onFileChange } from "./pages/profile.js";
import { socialLogin } from "./pages/auth.js";
import {
  save_comment,
  update_comment,
  onEditing,
  delete_comment,
} from "./pages/fanLog.js";
//----------------------------------------------------------------------
import { handleLocation, goToProfile } from "./router.js";
import { authService } from "./firebase.js"; //authService는 뭔가 뱉음, 

//main.js에 들어있는건, 특정기능들을 Import 하라는 내용과
// hashchange가 발생했을때 해당 hash를 이용하여 페이지를 반환하는 handleLocation를 실행하라는 내용과
// html,css,js가 로딩되면 함수를(authService에 user이 있다면, fanlog를 반환하라는 함수) 실행하라


// url 바뀌면 handleLocation 실행하여 화면 변경
// hashchange란 브라우저에서 hash값이 바뀔때 발생하는 이벤트다.
// ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️ "hashchange",handleLocation
window.addEventListener("hashchange", handleLocation); // router.js 에 있음



// 첫 랜딩 또는 새로고침 시 handleLocation 실행하여 화면 변경
document.addEventListener("DOMContentLoaded", function () {
  // Firebase 연결상태를 감시 (로그인상태인지 로그아웃상태인지 모니터링을 계속 하고 잇음)
  // onAuthStateChanged -> 일종의 이벤트 리스너 (addeventListner와 비슷)
  // html.css.js가 로딩이 되면 바로 auth랑 연결이 됌
  // authService에 user값이 있으면
 
  authService.onAuthStateChanged((user) => {

    // Firebase 연결되면 화면 표시 (router.js에 있음)
    // handleLocation은 #하고 들어온 hash 값을 #을 일단 빼주고, #뒤에 있는 값들에 따라 ~~~.html로 글자를 넣어주는 함수
    handleLocation(); // 화면을 띄우는 역할을 함 (현재 url에 해당하는 걸)
    
    //⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
    //hash라는 객체에 윈도우 로케이션의 hash값을 담는다. 
    const hash = window.location.hash;

    // if(user) --> user라는 객체가 존재한다는 것= 로그인이 됐다는 것
    // authService가 뭔가를 뱉었구나
    if (user) {
      // 로그인 상태이므로 항상 팬명록 화면으로 이동
      if (hash === "") {
        // 로그인 상태에서는 로그인 화면으로 되돌아갈 수 없게 설정
        // 로그인을 했으면 fanlog로 이동을 해야하는데 안넘어갈 경우 아래처럼 강제로 이동시켜라 의미
        window.location.replace("#fanLog");

      }
    } else {
      // 로그아웃 상태이므로 로그인 화면으로 강제 이동
      if (hash !== "") {
        // 로그아웃을 했으면 fanlog에서 벗어나야하는데 안넘어갈 경우 아래처럼 강제로 이동시켜라 의미
        window.location.replace("");
      }
    }
  });
});

// onclick, onchange, onsubmit 이벤트 핸들러 리스트
// window는 전역객체다
/*
 * window 객체를 쓰면, 어디서든 접근할 수 있음 
여러가지 버튼 이벤트들이 발생할 때마다, html 에다가 연결을 시켜주어야 하는데
아래처럼 window 로 안해놓으면 연결을 못시켜준다.
이유 : 
*/
window.handleAuth = handleAuth; //회원가입 데이터 받아서 회원가입 데이터 등록하는 것
window.goToProfile = goToProfile; //진짜 프로필로 가는 내용
window.socialLogin = socialLogin; // 진짜 소셜로그인하는 내용
window.logout = logout;
window.onFileChange = onFileChange;
window.changeProfile = changeProfile;
window.save_comment = save_comment;
window.update_comment = update_comment;
window.onEditing = onEditing;
window.delete_comment = delete_comment;
window.handleJoin = handleJoin;
window.moveJoinPage = moveJoinPage;


//Test중
window.test_socialLogin=test_socialLogin;
window.test_logout=test_logout;
window.test_LoginAuth=test_LoginAuth;
window.test_join=test_join;
window.test_moveLoginPage=test_moveLoginPage;
window.test_moveJoinPage=test_moveJoinPage;
//test_socialLogin,test_logout,test_LoginAuth,test_join

 

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

const routes = {
  404: "/pages/404.html",
  "/": "/pages/auth.html",
  fanLog: "/pages/fanLog.html",
  profile: "/pages/profile.html",
  join: "/pages/join.html",
  login: "/pages/auth.html",
  test_JoinPage: "/pages/test_join.html",
  test_main:"/pages/test_main.html",
  test_login:"/pages/test_login.html",
};
import { getCommentList } from "./pages/fanLog.js";

// handleLocation은 #하고 들어온 hash 값을 #을 일단 빼주고, #뒤에 있는 값들에 따라 ~~~.html로 글자를 넣어주는 함수
export const handleLocation = async () => {
    let path = window.location.hash.replace("#", "");
    const pathName = window.location.pathname;

      // Live Server를 index.html에서 오픈할 경우
      if (pathName === "/index.html") {
        window.history.pushState({}, "", "/");
      }
      if (path.length == 0) {
        path = "/";
      }

    const route = routes[path] || routes[404];
    const html = await fetch(route).then((data) => data.text());
    document.getElementById("root").innerHTML = html;


    // 특정 화면 렌더링 되자마자 DOM 조작 처리
    // 이렇게 if문을 걸어서 해당 페이지돔을 사용할 수 있게 만들어주지 않으면, 에러뜬다고 함(path가 fanlog라고 설정을 해줘야 하는 것)
    // 이 if문은 handleLocation함수 안에 있어야 한다. 
    // 닉네임과 프로필 사진은 auth에 들어있고, authentication에 currentUser 라는 객체가 있다.
    //  currentUser에 displayName라는 값이 들어있다. 
   
   
    if (path === "fanLog") {
      // 로그인한 회원의 프로필사진과 닉네임을 화면에 표시해줌.
      document.getElementById("nickname").textContent =
      // ?? 의 의미 : displayName가 존재하면 displayName를 리턴하고 displayName가 없으면 "닉네임 없음"을 리턴해라
      // 삼항연산자와 비슷함
      // null이나 Undefined면 "닉네임없음"을 쓰는것
        authService.currentUser.displayName ?? "닉네임 없음";

      document.getElementById("profileImg").src =
        authService.currentUser.photoURL ?? "../assets/blankProfile.webp";

        //댓글리스트 불러오는 메소드
      getCommentList();
    }
    if (path === "profile") {
      // 프로필 관리 화면 일 때 현재 프로필 사진과 닉네임 할당
      document.getElementById("profileView").src =
        authService.currentUser.photoURL ?? "/assets/blankProfile.webp";
      document.getElementById("profileNickname").placeholder =
        authService.currentUser.displayName ?? "닉네임 없음";
    }
};

export const goToProfile = () => {
  window.location.hash = "#profile";
};

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

// 로그인 성공 시 팬명록 화면으로 이동
export const handleAuth = (event) => {
 
  event.preventDefault();
  const email = document.getElementById("email");
  const emailVal = email.value;
  const pw = document.getElementById("pw");
  const pwVal = pw.value;

  // 유효성 검사 진행
  if (!emailVal) {
    alert("이메일을 입력해 주세요");
    email.focus();
    return;
  }
  if (!pwVal) {
    alert("비밀번호를 입력해 주세요");
    pw.focus();
    return;
  }


  // 이메일val은 스트링인데, 문자열은 match라는 메소드 이용할 수 있다.
  // 문자열이 '정규식(=정규표현식)'=regex 와 매치되는 부분 : 
  // 정규식이 뭐냐 ? 
  // 정규식 짠건 util.js에 있음
  // match(emailRegax) : 이 규칙에 맞는게 있으면 걔를 배열로 리턴해라
  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; // 뒤로넘어가지 않게 꼭 리턴으로 끊어줘야 한다. 
  }

  // 유효성 검사 통과 후 로그인 메소드 실행
  const authBtnText = document.querySelector("#authBtn").value;
  if (authBtnText === "로그인") {
    // 유효성검사 후 로그인 성공 시 팬명록 화면으로
      signInWithEmailAndPassword(authService, emailVal, pwVal)
        .then((userCredential) => {
          // Signed in
          const user = userCredential.user;
          window.location.hash = "#fanLog";
        })
        .catch((error) => {
          const errorMessage = error.message;
          console.log("errorMessage:", errorMessage);
          if (errorMessage.includes("user-not-found")) {
            alert("가입되지 않은 회원입니다.");
            return;
          } else if (errorMessage.includes("wrong-password")) {
            alert("비밀번호가 잘못 되었습니다.");
          }
        });
  } else {
    // 회원가입 버튼 클릭의 경우
      createUserWithEmailAndPassword(authService, emailVal, pwVal)
        .then((userCredential) => {
          // Signed in
          window.location.hash = "#fanLog";

          
          // const user = userCredential.user;
        })
        .catch((error) => {
          const errorMessage = error.message;
          console.log("errorMessage:", errorMessage);
          if (errorMessage.includes("email-already-in-use")) {
            alert("이미 가입된 이메일입니다.");
          }
        });
  }
};

//-----------------------------------------

export const handleJoin = (event) => {
  alert("handlejoin");
  event.preventDefault();
  const email = document.getElementById("email");
  const emailVal = email.value;
  const pw = document.getElementById("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; // 뒤로넘어가지 않게 꼭 리턴으로 끊어줘야 한다. 
  }

    createUserWithEmailAndPassword(authService, emailVal, pwVal)
      .then((userCredential) => {
        // Signed in
       alert('회원가입 성공><')
       
       window.location.hash = "#login";

        // const user = userCredential.user;
      })
      .catch((error) => {
        const errorMessage = error.message;
        console.log("errorMessage:", errorMessage);
        if (errorMessage.includes("email-already-in-use")) {
          alert("이미 가입된 이메일입니다.");
        }
      });
};


//-------------------------------------------------------------


export const moveJoinPage = () => {
  window.location.replace("#join");

}

export const socialLogin = (event) => {
  const { name } = event.target;
  let provider;
  if (name === "google") {
    provider = new GoogleAuthProvider();
  } else if (name === "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("로그아웃 성공");
    })
    .catch((error) => {
      // An error happened.
      console.log("error:", error);
    });
};


//-----------------------------------------------휘인님 test-------------

//test_moveLoginPage
export const test_moveLoginPage = () => {
  window.location.replace("#test_login");
}

//test_moveJoinPage
//회원가입페이지로 가는 메소드
export const test_moveJoinPage = () => {
  window.location.replace("#test_JoinPage");
}

//로그인하는 기능
export const test_LoginAuth = (event) => {
  event.preventDefault();
  const email = document.getElementById("email");
  const emailVal = email.value;
  const pw = document.getElementById("pw");
  const pwVal = pw.value;

  if (!emailVal) {
    alert("이메일을 입력해 주세요");
    email.focus();
    return;
  }
  if (!pwVal) {
    alert("비밀번호를 입력해 주세요");
    pw.focus();
    return;
  }

  signInWithEmailAndPassword(authService, emailVal, pwVal)
    .then((userCredential) => {
      const user = userCredential.user;
      window.location.hash = "#test_main";
    })
    .catch((error) => {
      const errorMessage = error.message;
      console.log("errorMessage:", errorMessage);
      if (errorMessage.includes("user-not-found")) {
        alert("가입되지 않은 회원입니다.");
        return;
      } else if (errorMessage.includes("wrong-password")) {
        alert("비밀번호가 잘못 되었습니다.");
      }
    });
 

};


export const test_socialLogin = (event) => {
  const { name } = event.target;
  let provider;
  if (name === "google") {
    provider = new GoogleAuthProvider();
  } else if (name === "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 test_join = (event) => {
  event.preventDefault();
  const email = document.getElementById("email");
  const emailVal = email.value;
  const pw = document.getElementById("pw");
  const pwVal = pw.value;

  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; // 뒤로넘어가지 않게 꼭 리턴으로 끊어줘야 한다. 
  }

    createUserWithEmailAndPassword(authService, emailVal, pwVal)
      .then((userCredential) => {
        // Signed in
       alert('회원가입 성공><')
       alert('로그인을 해주세요!')
       window.location.hash = "#test_login";
      })
      .catch((error) => {
        const errorMessage = error.message;
        console.log("errorMessage:", errorMessage);
        if (errorMessage.includes("email-already-in-use")) {
          alert("이미 가입된 이메일입니다.");
        }
      });
};


export const test_logout = () => {
  signOut(authService)
    .then(() => {
      // Sign-out successful.
      localStorage.clear();
      console.log("로그아웃 성공");
    })
    .catch((error) => {
      // An error happened.
      console.log("error:", error);
    });
};

 

 

 

프로젝트 꼭 일찍 마무리하고 그동안 못하고 있던 웹퍼블리셔, 깃허브, 알고리즘 강의 복습할거야!!!