19일차 팀 과제(상세페이지 구현)

개인과제가 마무리되자마자 팀과제가 시작되었다.

팀과제 주제는 '팀원분들의 개인과제 결과물 중 하나를 대표로 선택해 바닐라 JS로 온전히 결과물을 만들기'였다.

필수 요구사항

• TMDB 또는 영화진흥위원회 오픈 API 이용(택 1 또는 중복 사용)
• 영화정보 상세 페이지 구현
  • 기존 영화정보 카드 리스트에서 특정 item을 선택할 시, 상세 페이지로 이동하도록 구현합니다.
  • 상세 페이지에서 메인 페이지(홈)로 이동하는 UI도 함께 구성합니다.
• 상세 페이지 영화 리뷰 작성 기능 구현
  • 상세페이지에서 특정 영화에 대해 의견을 작성할 수 있는 UI를 구현합니다.
    • 작성자, 리뷰, 확인비밀번호를 입력하도록 구현합니다.
  • 작성한 정보는 브라우저의 localStorage에 적재하도록 합니다.
• github PR(=Pull Request) 사용한 협업

등등

나는 이 필수 요구사항 중 '영화정보 상세 페이지 구현' 역할을 맡았다.

내 생각에는 필수 요구사항인 상세 페이지에서 메인 페이지(홈)로 이동하기 위해서는 상세페이지를 열때 새 페이지로 열리기 보다는 말 그대로 새 페이지로 이동하는게 좋을 것 같아 구글링을 해보았다.

그래서 처음에 해본 방법은

<a onclick="location.replace(`movie_detail.html?id=${id}`)"></a>

이 location.replace() 사용해보았는데 문제는 뒤로가기를 눌렀을때 메인페이지가 나오지 않는다는것이였다.

그렇게 이 문제를 해결하기 위해 검색해보다가 아래 방법을 택하게 되었다.

<a onclick="info_click(${id})" type="button">

 function info_click(id) {
  location.href = `movie_detail.html?id=${id}`;
}

그러나 내가 잊고 있었던게 있었다..
팀과제가 마무리될 즘 우리 조원분께 피드백을 받게 되었는데 이 점을 깨닫게 해주신 우리 조원분께 너무나도 감사했다.

일단 내가 잊고 있었던건 < a > 태그의 역할이다..

< a > 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다.

그 피드백을 얻고 수정한 코드가 다음과 같다.

<a href='movie_detail.html?id=${id}'>

이 계기를 통해 html에 대해 다시 공부해야겠다고 마음 먹게 되었다..