깃허브 페이지에서 상세 페이지로 안 가지는 문제

결론부터 말하자면 애매하게 해결

function handleMovieCardClick(event) {
  const movieId = event.currentTarget.dataset.movieId;
  window.location.href = `/detail.html?id=${movieId}`;
}

위의 url로 상세페이지로 가는 기능을 구현했다
로컬에서는 문제 없이 동작했는데
깃허브 페이지에 올리니 안 돌아감...

깃허브 페이지는 https://유저 아이디/레포 이름 으로 만들어진다
상세 페이지는 당연히 https://유저 아이디/레포 이름/detail.html일 줄 알았는데...
https://유저 아이디/detail.html 이렇게 넘어갔다
아니 이유가 뭐야..?
그래서 머쓱하게 404를 만나고...

상세페이지로 넘어가는 링크를 바꿨다

function handleMovieCardClick(event) {
  const movieId = event.currentTarget.dataset.movieId;
  window.location.href = `/레포이름/detail.html?id=${movieId}`;
  //로컬에서는 window.location.href = `./detail.html?id=${movieId}`; 로 바꿔주세요
}

저렇게 해놓으면 로컬에서는 안돌아가니 주석 참고

코드를 바꿨더니 이제 css가 안불러와진다.....ㅎ..
경로문제인듯하여 html에서 불러오는 모든 경로를 수정했다

 <link rel="stylesheet" href="./css/style.css" />
 <script src="./js/app.js" type="module"></script>

더 자세한 경로 이야기는 이 블로그를 참고하면 좋을 것 같다