[TIL] MY VERY FIRST PRJECT - ASYNC & AWAIT

DAY 20 <Project D-3>

메인 페이지 마크업 작업을 마치고 로그인이 감지되면 헤더의 logo는 가만히 있고 로그인 창만 바뀌는 작업을 했다.

처음에는 일단 헤드 두개를 만들고 하나를 display:none; 으로 숨기는 작업을 해서 하나가 사라지면 위로 올라가며 그 위치를 대체하게 만들었다.

로그인이 파트가 끝나게 아니라 아직 연결된게 아니라 튜터님이 주신 파일에 끼워넣어서 어찌저찌 로그인, 로그아웃이 되게 만들었는데 (이것도 너무너무 오래걸린 작업이었다..)

document.querySelector('선택자').style.display = 'none';

코드를 사용하니 화면이 전환되며 보였다가 사라졌다 하는게 너무 눈에 띄워서 다른 코드를 사용해보기로 했다. 여기저기 sos를 쳐서 사용하기로 한 방법은

document.addEventListener("DOMContentLoaded", function () {
  authService.onAuthStateChanged(async (user) => {
    handleLocation();
    const hash = window.location.hash;
    if (user) {
      afterLogin();
      
    } else {
      beforeLogin();
    }
  });
});

이 방법이었다.

if문을 사용하고 afterLogin() 과 beforeLogin() 함수를 사용해서 그 자리에 붙여주기로 했다.

//header
export function afterLogin() {
  // document.getElementById("header-after").style.visibility = "visible";
  const login = document.querySelector(".login");
  login.innerHTML = ` <div class="btn-wrapper">
<div class="img profile_small" > <img id="commentImg" src="https://post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/02/322868_1100-800x825.jpg"></div>
<button class="btn-triangle"></button>
</div>
<div class="dropdown-menu">
<a href="#" onclick ="logout()">로그아웃</a>
<a href="#myPage">마이페이지</a>
</div>`.trim();
}

export function beforeLogin() {
  const login = document.querySelector(".login");
  login.innerHTML = `
<button"class="sign-in">로그인</button>`.trim();
}

튜터님한테 가서 물어보고 연결하며 오류를 찾고 되는것을 확인했는데, 팀원들 코드 사이에 끼워넣으니 또 안돼서 또 여기저기 붙잡아서 알아낸 결론은 async 와 await를 사용해야한다는 것.

무슨 의미인줄 알겠지만 아직 명확하게 사용하는 방법을 이해하지 못해서 당장은 프로젝트때문에 바쁘니 프로젝트가 끝나면 공부해야할 리스트 1 번에 넣어놨다.

어떤 문제든 시간이 오래걸릴 뿐 해결은 된다! 정말로! 어떻게든!