기초프로젝트 진행중..죽을거같..지만 많은것을 배웠다.

오늘 배운것 및 느낀점을 나열해보고자 한다.

• 안될때는 의심가는곳에 콘솔 찍어보기
• 로그아웃 함수

export const logout = (event) => {
  event.preventDefault(); // a태그가 가지고있는 새로고침하는 기본 이벤트를 없애줌
  console.log('로그아웃클릭');
  signOut(authService)
    .then(() => {
      // Sign-out successful.
      localStorage.clear();
      console.log('로그아웃 성공');
    })
    .catch((error) => {
      // An error happened.
      console.log('error:', error);
    });
};

• a태그는 기본적으로 누르면 새로고침을 하는 기능이 내장되어 있다.
  a태그를 누를 때 무언가를 실행하고 싶다면, 매개변수로 event를 넣어주고 'event.preventDefault();' 문구를 추가해준다.
  그럼 새로고침을 하지 않는다.

• firebase.js 파일을 만들어주고 거기에 sdk를 연결해주었다.
  그곳에 initializeApp(firebaseConfig)를 app이라는 함수에 담아 다른 함수에서도 사용할 수 있게 구성해주었다.

export const app = initializeApp(firebaseConfig);
export const dbService = getFirestore(app);
export const authService = getAuth(app);
export const storageService = getStorage(app);

• 이제 여기서 authService.currentUser 를 확인해야되는데, 이것이 뭐냐?
  로그인 되어있다면 로그인 된 유저의 정보를 말한다. 콘솔로 찍으면 별의별 정보가 다 나온다.

• 근데 오늘 그 authService.cureentUser를 찍어도 정보가 나오지 않았는데, 그때의 코드를 적어보겠다.

  if (path === 'mypage') {

    document.getElementById('profileView').src =
      authService.currentUser.photoURL ?? '../assets/mypageimg.png';
    document.getElementById('profileNickname').placeholder =
      authService.currentUser.displayName ?? '닉네임 없음';
    document.getElementById('profileEmail').placeholder =
      authService.currentUser.email;
  }
};

• 대충 이 코드이다. 해석을 해보자면,
  지금 현재 해쉬태그(path=해쉬태그)가 mypage 라면,
  유저정보의 photoURL이 있으면, 그걸 쓰고, 없으면 기본이미지로 사용해라/
  유저정보의 displayName이 있으면 그걸 쓰고, 없으면 닉네임없음 이라는 문구를 플레이스홀더에 적어라./
  등등..뭐 이메일도 마찬가지.

• 근데 이 코드 실행이 안됐었다. 왜일까?

• 서버 통신은 비동기이다. 비동기의 특징은 먼저 동기 프로그램부터 실행하고 비동기를 실행한다.
  그 이유는 브라우저 엔진, 자바스크립트 엔진이 비동기 실행되기 전 먼저 읽어오기 때문이다.
  근데 비동기 프로그램을 먼저 실행하려고 하니 정상적으로 동작이 안됐던것이다.
  해결 방법은 아래와 같다.

  if (path === 'mypage') {

    document.getElementById('profileView').src =
      authService.currentUser?.photoURL ?? '../assets/mypageimg.png';
    document.getElementById('profileNickname').placeholder =
      authService.currentUser?.displayName ?? '닉네임 없음';
    document.getElementById('profileEmail').placeholder =
      authService.currentUser?.email;
  }
};

• 물음표 하나씩 추가해줬다.
  authService.currentUser 는 비동기이기 때문에 끝에 ?를 붙혀주면, null일 때 신경쓰지 말고 데이터가 있을 때만 신경쓰라는 뜻의 코드이다.

• 로그인/ 비로그인 시 버튼 클릭했을 때 나오는 메뉴 다르게 하기
  이거는 튜터님 도움을 안받고 혼자 구현해보았다.

if (user) {
      console.log('로그인상태')
      const topProfile = document.querySelector('#nav_profile');
      const menuDisplay = document.querySelector('#menu_display');
      const navProfileImg = document.querySelector('#nav_profile_img');
      topProfile.addEventListener('click', function () {
        menuDisplay.style.display = 'block';
      });
      document.getElementById('nav_profile_img').src =
        authService.currentUser.photoURL ?? '../assets/mypageimg.png';
      // 다른 영역 클릭 시 메뉴 없어짐
      document.addEventListener('click', function (event) {
        if (event.target != navProfileImg) {
          menuDisplay.style.display = 'none';
        }
      });
    } else {
      console.log('로그아웃상태')
      const topProfile = document.querySelector('#nav_profile');
      const menuDisplay = document.querySelector('#menu_display');
      const navProfileImg = document.querySelector('#nav_profile_img');
      const logoutMenu = document.getElementById('profile-menu-logout');
      const menuDisplayLogOut = document.getElementById('menu_display-logout');
      menuDisplay.style.display = 'none';
      topProfile.addEventListener('click', function () {
        console.log('menuDisplayLogOut', menuDisplayLogOut);
        menuDisplayLogOut.style.display = 'block';
      });
      // 다른 영역 클릭 시 메뉴 없어짐
      document.addEventListener('click', function (event) {
        
        if (event.target != navProfileImg) {
          console.log('다른영역');
          menuDisplayLogOut.style.display = 'none';
        }
      });

    }
  });

• 이렇게, 동일한 메뉴를 두개를 만들어놓고 안에 text만 변경해주었는데,
  로그인 시 버튼 클릭하면 menuDisplay를 보여주고,
  비로그인 시 버튼 클릭하면 menuDisplayLogOut 을 보여주는 코드이다.
  시행착오가 조금 있긴 했지만 잘 구성을 했다.
  근데 돔이 들어간 변수들은 if랑 else 따로 적용이 되는지 오류가 나길래 각각 넣어줬다.
  자바스크립트 공부를 더 해야될 것 같다 ㅠㅠ 파이어베이스에 사용되는 문법 뭐가뭔지 이해가 안된다..