5/8 TIL

오늘의 TIL (Today I Learned)

HTML과 JavaScript를 사용하여 영화 목록에서 상세 페이지로 이동하는 방법

• 목적: index.html에서 영화 목록을 보여주고 사용자가 영화를 클릭할 때, 해당 영화의 상세 정보를 보여주는 detail.html로 이동하는 기능을 구현하는 것이었습니다. 이 과정에서 영화의 ID를 URL을 통해 전달하는 방법을 배웠습니다.

• 기술 스택: HTML, JavaScript, URLSearchParams

• 주요 개념:

  • HTML: 영화 목록(index.html)과 영화 상세 정보(detail.html)를 표시하기 위한 구조를 제공합니다.
  • JavaScript: 영화 목록을 동적으로 생성하고, 사용자가 영화를 클릭했을 때 detail.html로 이동하도록 하는 이벤트 리스너를 추가합니다. 또한, detail.html에서는 URL에서 영화 ID를 추출하여 해당 영화의 상세 정보를 표시합니다.
  • URLSearchParams: URL의 쿼리 스트링에서 데이터(여기서는 영화 ID)를 추출하는 데 사용됩니다.

• 구현 방법:

  1. index.html에서는 각 영화를 링크(<a href="detail.html?id=${movie.id}">)로 표시합니다. 이 링크는 클릭 시, detail.html로 이동하면서 URL에 영화 ID를 포함시킵니다.
  2. movies.js에서는 영화 목록을 동적으로 생성하여 index.html에 추가합니다. 이때, 각 영화 링크에는 영화의 ID가 포함되어 있습니다.
  3. detail.html에서는 movieDetail.js를 통해 URL에서 영화 ID를 추출합니다. URLSearchParams 객체를 사용하여 쿼리 스트링에서 id 값을 가져옵니다.
  4. 상세 페이지에서는 추출한 영화 ID를 사용하여 해당 영화의 상세 정보를 표시할 수 있습니다. 실제 구현에서는 TMDB API 등 외부 데이터 소스에서 영화 정보를 가져오는 과정이 추가됩니다.

• 학습 포인트: 이번 학습을 통해 웹 페이지 간에 데이터(URL을 통한 영화 ID)를 전달하고, JavaScript를 사용하여 동적으로 웹 페이지의 내용을 조작하는 방법을 배웠습니다. 또한, URLSearchParams를 사용하여 URL에서 데이터를 추출하는 방법에 대해서도 알게 되었습니다.