[TIL] 내배캠4기 React 26일차

hare·2022년 11월 25일

Firebase TIL 내일배움캠프

내배캠-TIL

목록 보기

20/75

오전

프로필설정 브랜치와 병합
- 오류가 많이 나서 인간 깃이 되어 수작업으로 할 수 밖에 없었다,,
스타일 충돌/중복되는 부분 고치기

오후

자바스크립트 스터디
- 이벤트핸들러에 대한 문서였는데 잘 이해못한채로 구글링해서 쓰던 걸
  원리라고 할까 대충이라도 알고 넘어가는걸로 지금은 만족하려 한다..
회원탈퇴 기능 추가하기
- 로그인/회원가입까지 있는 웹사이트라면 모름지기 탈퇴 기능도 있어야 한다는 생각에 사로잡혀.. 낑낑 대며 구현..
  파이어베이스에서 친절하게 코드스니펫도 주는데 왜 곧바로 적용이 안되졍..?? 하 놔~
  어찌됐든 함.. 아무튼 함..

오늘의 에러

이미지 로딩 오류

이미지파일이 들어있는 assets 폴더가 팀원 마다 assest, assests 이런식으로 다르게 설정되어있어서 로딩이 안되는 이슈가 있었다,,!!
머지해올때 생긴 이슈 같았다. 똑똑한 팀원이 발견해서 빠르게 해결해결😊

로그인 여부에 따른 정보 제한

이런 식으로 toggle버튼 누르면 로그인 여부에 따라 내용이 다르게 드롭다운되어야 하는데, 일단 구현이 된 상태로 뭔가 더 괜찮은 방법이 없을까...
하다 되던 기능도 잃은 사람..
ctrl+z로 심신안정을 얻고 시간이 있을 때 더 고민해보기로 한다..

//.js
// 홈 화면 드롭다운 버튼 기능
export function onToggle() {
    let ulElementBeforeLogin = document.querySelector(".navbarBeforeLogin")
    let ulElementAfterLogin = document.querySelector(".navbarUserAccountMenu")

    // 사용자 상태 확인
    authService.onAuthStateChanged((user) => {

        if (user) {
            ulElementAfterLogin.classList.toggle("active");
        }
        else {
            ulElementBeforeLogin.classList.toggle("active");
        }
    });


}

변수.classList.toggle("클래스명") - on/off 기능처럼 작동
변수.classList.add/remove("클래스명") - 클래스 추가/ 삭제

이걸 며칠전에 분명히 정리한거 같은데 완전히 내것이 되진 않았나보다..
도저히 어떻게 써야할지 지금은 이렇게 한게 최선쓰..하핫..😅

/* .css */
/* 디폴트값: 숨기기 */
.navbarUserAccountMenu,
.navbarBeforeLogin {
  display: none;
  list-style: none;
  margin: 0;
  padding: 5px;
  position: absolute;
  top: 50px;
  min-width: 150px;
  right: 0;
  background-color: #eae7de;
  box-shadow: 0px 8px 16px 0px #00000033;
  overflow: hidden;
}

/* 드롭다운 버튼 클릭 시 보임 */
.active {
  display: block;
}

<!-- .html -->
<!-- 로그인 후 노출 -->
        <div class="navbarUser">

            <a href="#newPost" id="newPost" class="btnIcon"></a>
            <button type="button" class="btnIcon" onclick="onToggle()" id="dropDown"></button>

            <ul class="navbarUserAccountMenu">
                <li><a class="userName" href="#blog">내 블로그</a></li>
                <li><a class="userSetting" href="#profile">프로필 설정</a></li>
                <li><a class="logoutBtn" href="#" onclick="logout()">로그아웃</a></li>
            </ul>

            <!-- 로그인 후 노출 -->
            <!-- 로그인 전 노출 -->
            <!-- a태그 클릭하면 콘솔에 Uncaught ReferenceError: route is not defined
    at HTMLAnchorElement.onclick 이란 오류가 생겨서 route(event) 삭제했음 -->
            <ul class="navbarBeforeLogin">
                <li><a class="signIn" href="#login">로그인</a></li>
                <li><a class="join" href="#register">회원가입</a></li>
            </ul>
        </div>

회원탈퇴 기능 추가

import { deleteUser } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js";
import { authService } from "../firebase.js";


export const leave = async (event) => {
    event.preventDefault();
    const user = authService.currentUser;
    if (window.confirm('정말 탈퇴하시겠습니까?')) {
        console.log('user 탈퇴');

        // They clicked Yes
        deleteUser(user).then(() => {
            // User deleted.

            console.log("유저 삭제");
            window.location.replace("");



        }).catch((error) => {
            const errorMessage = error.message;
            console.log('error:', errorMessage);
            // An error ocurred
            // ...
        });
        // [END auth_delete_user_modular]
    }
    else {
        // They clicked no
        console.log("탈퇴 취소");
    }

};