[개발일지05/🌉포폴사이트 JS] 프로젝트 상세보기 버튼에 detail.html 페이지 연결

✅ 오늘의 작업 내역
     1. 상세 보기 버튼에 detail.html 연결
     2. detail.html 마크업 진행(10%)

 

1. 상세보기 버튼에 detail.html 연결

<a> 태그에 직접적으로 url을 연결해 줬다가 동적으로 portfolio 요소를 생성하고 있으니 페이지 이동도 자바스크립트로 처리해 주는 게 맞다는 생각이 들었다. 문제는 동적으로 요소가 추가되는 경우 추가되지 않은 요소는 DOM에 존재하지 않아 이벤트 핸들러를 바인딩할 수 없는 이슈 1)를 마주하게 되었다.

👾 이슈 1) Uncaught (in promise) project.is:170 TypeError: Cannot read properties of null (reading 'addEventListener')

button에 id를 주고, onclick을 통해 함수로 이벤트 처리를 해주려고 했다. 하지만 함수 자체를 찾을 수 없다는 에러 및 id값을 읽지 못하는 이슈를 발견했고, 해결 방법을 찾아본 결과 이때 이벤트 위임을 활용하여 부모 요소에 이벤트 핸들러를 바인딩하여 원하는 요소를 제어할 수 있다는 것을 알게 되었다.

 

🛠️ 이벤트 핸들러 추가

이벤트 핸들러를 바인딩 해줄 요소는 portfolio라는 id값을 가지고 있는 부모 컨테이너인 section이다. 이미 displayPortfolioData 함수에서 해당 요소를 참조하여 markup 변수에 할당해 줬기 때문에 createHTML 함수에 매개변수로 markup 변수를 추가해 줬다.

function displayPortfolioData(dataProtfolio) {
  const markup = document.querySelector("#portfolio");
  const portfolioData = dataProtfolio.projects;
  const sectionTitle = dataProtfolio.sectionTitle.find(
    (title) => title === "PortFolio"
  );

  markup.insertAdjacentHTML(
    "beforeend",
    createHTML(portfolioData, sectionTitle, markup)
  );
}

 

createHTML 함수에서 그려줄 요소들을 처리해 주는데, 이때 각 project와 detail 페이지가 매칭되도록 쿼리 스트링에 project id값을 통해 정보를 구분해 주기로 했다. 그리고 button에도 구분을 위해 id값을 할당해주었다.

function createHTML(portfolioData, sectionTitle, markup) {
 // stack 함수 mapping
 
    const detailPageURL = `./detail.html?id=${data.id}`;
    const projectCard = ` 
      <article class="w-full h-ful bg-white rounded-2xl" id="project${data.id}">
        
        // ...
         <button
          id="project-${data.id}"
          class="h-[4rem] rounded-[0.625rem] bg-green font-LINESeedKR-Bd 
          text-white text-md flex items-center justify-center gap-1 
          hover:brightness-125 sm:text-lg lg:mt-4"
          >상세보기</button>
         </div>
       </div>
    </article>
`;

 

이제 매개변수로 받아온 markup에 이벤트 핸들러를 바인딩해주는데, 이때 button이라는 것을 구분해주고자 조건 처리를 통해 detail 페이지를 할당해주면 성공!

  markup.addEventListener("click", (e) => {
    if (e.target && e.target.id == `project-${data.id}`) {
      window.location.href = detailPageURL;
    }
  });

  return projectCard;
});

 

💡 적용 결과

 

 

2. detail.html 마크업 진행(10%)

datil.html 마크업도 진행 중!

구현된 화면은 바로 위의 적용 결과에서 볼 수 있다.

 

---

참고

[사이트] 모던 자바스크립트 딥다이브 - 5.33 Event(링크)

[유튜브] Build a Pokedex with Vanilla HTML, CSS, and JavaScript - How to Become a Developer(링크)

 

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!