바닐라 자스(keyword프로젝트) 리팩토링 해보기

[개선한 부분]

1. data를 불러오는 똑같은 작업을 하는 부분을 함수로 만들기

2. 실제 data.text로 추출한 html내용을 넣어주는 로직 함수 만들기

3. fetch를 통해 데이터를 뽑아오는 부분이 여러개 필요한 부분(header,footer,sidebar)은 Promise.all을 사용해서 병렬적으로 스타트 될수 있도록 개선하기

  // header,footer,
  async function fetchContent(name) {
    const content = await fetch(routes[name] || routes[404]).then((data) =>
      data.text()
    );
    return content;
  }

  // 페이지 내용을 채우는 함수
  // 여기서 pageContent는 path 받고 잇는거
  async function fillPageContent(pageContent) {
    const pagehtml = await fetchContent(pageContent);
    document.getElementById("index_page").innerHTML = pagehtml;
  }

  // 로그인,join, /로 들어올땐 header,sidebar,footer모두 비워주기
  if (path === "login" || path === "join" || path === "/") {
    await fillPageContent(path);
    document.getElementById("index_header").textContent = "";
    document.getElementById("index_sidebar").textContent = "";
    document.getElementById("index_footer").textContent = "";
  } else {
   // 그렇지 않은 경우에는 채워주기
   // 아까 만들어놓은 fetchContent이용해서 text형식의 데이터 추출하고 꽂아주기
    const yheader = "header";
    const ysidebar = "sidebar";
    const yfooter = "footer";
    // 어차피 똑같이 데이터 받아오는 로직이니 Promise.all로 수정해보자
    const [headerhtml, sidebarhtml, footerhtml] = await Promise.all([
      fetchContent(yheader),
      fetchContent(ysidebar),
      fetchContent(yfooter),
    ]);

    document.getElementById("index_header").innerHTML = headerhtml;
    document.getElementById("index_footer").innerHTML = footerhtml;

    if (path === "main") {
      document.getElementById("index_sidebar").innerHTML = sidebarhtml;
      document.getElementById("nickname1").textContent =
        authService.currentUser.displayName ?? "닉네임 없음";
      document.getElementById("cmtImg").src =
        authService.currentUser.photoURL ?? "../image/test1.jpg";
      document.getElementById("nickname").textContent =
        authService.currentUser.displayName ?? "닉네임 없음";
      document.getElementById("profileView1").src =
        authService.currentUser.photoURL ?? "../image/test1.jpg";
      getpostList();
    } else if (path === "mypage" || path === "comment") {
      document.getElementById("index_sidebar").innerHTML = "";
      await fillPageContent(path);
    }
  }

f

 

 

** 마지막으로, innerHTML을 사용하여 HTML 코드를 추가하는 것은 XSS(Cross-Site Scripting) 공격에 취약할 수 있으므로, 이를 방지하기 위해 textContent를 사용하는 것이 좋습니다