TIL 11.22

firebase updateProfile

SPA를 파이어베이스로 구현하는 프로젝트를 진행중이다.
분명 선생님의 강의를 들을 땐 이해가 잘 됐었는데...
막상 내가 코드를 짜려니 어디부터 어떤 로직으로 짜야하는지 잘 모르고 있었다!
아는것이 아무것도 없음을 인정하고... 머리를 비우고 다시 시작했다.
모르는 건 팀원분들과 튜터님께 질문하면서 차근차근...!

js파일 세 가지: 홈페이지 메인 - router - 마이페이지(내가 구현하고 싶은 창)
이렇게 세 창의 연관성에 대해서 이해를 먼저 하자면,

1. main.js는 모든 파일에서 쓰일 함수를 전역함수로 등록해둔다.
2. router.js는 SPA여도 페이지 간 이동을 하는것 처럼 보이게 하려면 # 도메인을 / 로 변경해서 보여주는 함수가 필요하다. 각 페이지들의 책갈피같은, 사전같은 파일! router파일에 모아두면 편리하다.

const routes = {
  "/": "/pages/main.html",
  "/main": "/pages/main.html",
  "/create-post": "/pages/create-post.html",
  "/mypage": "/pages/mypage.html",
  "/login": "/pages/login.html",
  "/bookmark": "/pages/bookmark.html",
  "/view-post": "/pages/view-post.html",
  404: "/pages/404.html",
};
// 변수 선언 필수 

//async function + await 비동기함수! 
export const handleLocation = async () => {
  let path = window.location.hash.replace("#", "/");
  if (path.length === 0) {
    path = "/";
  }
  console.log("handleLocation:", path);
  // "#" -> "/" 변경
  // www.goolge.com처럼 끝에 "/" 없으면  추가해줘라!

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

  const mainPage = document.querySelector("#main-page");
  mainPage.innerHTML = html;

};

3. 구현하고자 하는 페이지
   다른 파일에서 export된 함수는 import해서 쓸 수 있다. (거꾸로 다른 페이지에서도 필요할 함수는 export해둔다.)