<현재상황>
- TMDB api 를 통해 데이터를 받아서
- 메인화면에 띄워주고
- 메인화면에 보여지는 영화데이터 리스트를 영화제목을 통한 검색을 할 수 있게 함
- 메인화면에 나열되어 있는 영화 카드를 선택하면, 해당 영화의 id값을 받은 각각의 상세 페이지로 이동함
<나의 task>
- api id값에 따라 데이터 화면에 보여주기 (=> 클릭한 영화의 상세 정보를 화면에 보여주기)
오늘은 이걸 해결했다.
클릭한 영화의 상세 정보를 화면에 보여주기
내가 처음에 구상했던 로직
1. 처음에 받아온 api 데이터를 다시 가져오기
2. 선택된 영화아이디를 포함한 api 데이터(=movie-detail 배열) 내 요소(객체)를 추출한핟.
3. 객체의 값을 return 한다.
에서 좀 더 디벨롭하여
1. 상세페이지 주소 값에서 parameter 추출
2. movie-detail 배열에서 ${movie.id}, 즉 선택한 영화의 id 값을 가진 요소(객체) 찾고, 반환하기
3. 반환된 객체의 필요한 요소들에게 변수 정의를 해준다음, detailCardList(상세페이지 내 상세정보를 넣어줄 영역).innerHTML로 문자열로 내용을 변수들과 함께 넣어준다.
문제
1. 상세페이지 주소값에서 parameter을 추출 시 에러
2. 객체구조분해 할당을 통해서 클릭된 영화묶음 객체 출력 에러
해결방안
1. 상세페이지 주소는 상세페이지html에 아까 넣었던 주소와는 달리, 웹브라우저에서 쓰는 주소를 넣어야 한다. 따라서 현재 페이지 url 주소를 받아오는 아래 코드를 사용한다.
const url = window.location.href;2. 객체구조분해 할당을 할 때, 배열 안에 id라는 요소를 가지고 오고 싶다면, 'id' 문자열이 아닌 id 로 인자를 받아야 한다.
const foundClickedMovie = movie_details.find(({id}) => id == idOnAddress); // 객체구조분해 할당
console.log(foundClickedMovie); // 클릭된 영화묶음 객체
나머지 코드
clicked_movie_show.js
// TMDB Movies Detail API
// https://developer.themoviedb.org/reference/movie-details
import {fetchMovieData} from "../feat_js/movieShow.js";
import {generateMovieCards} from "../feat_js/movieShow.js";
// -------------- 기존 API 다시 불러오기 ---------------- //
export const generateMovieDetailCards = async () => {
const movie_details = await fetchMovieData();
const detailCardList = document.querySelector("#detail_card_list");
const url = window.location.href;
// console.log(url);
const searchParams = new URL(url).searchParams;
const idOnAddress = searchParams.get('id');
console.log("결과: " + idOnAddress); // ${movie.id} 에 해당하는 number
const foundClickedMovie = movie_details.find(({id}) => id == idOnAddress); // 객체구조분해 할당
console.log(foundClickedMovie); // 클릭된 영화묶음 객체
const clickedMovieId = foundClickedMovie.id;
const clikedPoster = foundClickedMovie.poster_path;
const clickedTitle = foundClickedMovie.title;
const clickedOverview = foundClickedMovie.overview;
const clickedReview = foundClickedMovie.vote_average;
// console.log(clickedMovieId);
detailCardList.innerHTML =
`<div id=${clickedMovieId}>
<img src="https://image.tmdb.org/t/p/w500${clikedPoster}"/>
<h3>${clickedTitle}</h3>
<p>${clickedOverview}</p>
<p>${clickedReview}</p>
</div>`
;
};
main_detail_page.js
import {generateMovieDetailCards} from "../feat_js/clicked_movie_show.js"
generateMovieDetailCards();
movie_detail_page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FindMovie/movie/detail</title>
<!--CSS 연결-->
<link rel="stylesheet" href="./CSS/reset.css">
<link rel="stylesheet" href="./CSS/css.css">
<!-- JavaScript 연결 -->
<script type="module" src="./modules/main_js/main_detail_page.js"></script>
</head>
<body>
<header>
<h1>Movie Detail123</h1>
</header>
<main>
<ul id="detail_card_list">
</ul>
</main>
</body>
</html>
Element.innerHTML
Element.innerHTML - Web API | MDN
Element (en-US) 속성(property) innerHTML 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정합니다.
developer.mozilla.org
Array.prototype.find()
Array.prototype.find() - JavaScript | MDN
Array 인스턴스의 find() 메서드는 제공된 배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환합니다. 테스트 함수를 만족하는 값이 없으면 undefined가 반환됩니다.
developer.mozilla.org
URL Parameter
[javaScript] URL Parameter 값 다루기
순수 javaScript에서 URL Parameter를 다루어야 할 때가 종종 있다. 이를 위한 gillog이다. URL 주소 얻기 기본 객체 window에 window.location.href를 이용하면 현재 페이지의 URL을 얻을 수 있다. const url
velog.io
[JS] URL parameter 가져오기
기초 URL 중 파라미터 값만 JavaScript로 추출해야 할 경우가 생깁니다. location.href를 이용하여 현재 페이지 전체 URL을 가져올 수 있습니다. location.search를 이용하여 현재 페이지 URL의 Parameter를 얻을
gurtn.tistory.com
[javascript] 웹 브라우저의 현재 URL 가져오기 - 워드프레스 정보꾸러미
현재 웹 페이지의 전체 URL을 가져와서 변수로 지정하려는 경우 다음 스크립트를 사용할 수 있습니다.
www.thewordcracker.com
JavaScript URL Parameter 값 가져오기
1. 파라미터 값 URL에서 파라미터값만 JavaScript로 가져오는 경우, location.href를 이용하여 현재 페이지 전체 URL을 가져올 수 있다. 또한 location.search를 이용하여 현재 페이지 URL의 Parameter를 얻을 수
dejavuhyo.github.io
CRUD게시판_url에 id담아 넘기기
게시판 만들기에서 글을 쓰고 작성하기 버튼을 누르면 전체 목록을 조회할 수 있는 페이지로 넘어간다.이 부분은 아주 간단하게 ajax에서 post방식으로 데이터를 보내고 성공 시 window.location.href =
velog.io
자바스크립트에서 URL 쿼리스트링(query string) 쉽게 가져오는 방법
웹페이지에서 url/uri를 통해서 전달된 쿼리스트링 정보를 자바스크립트에서 읽어오는 방법에 대하여 알아봅니다.
webisfree.com
URLSearchParams.get() - Web API | MDN
URLSearchParams 인터페이스의 get() 메서드는 지정한 키와 연관된 첫 번째 값을 반환합니다.
developer.mozilla.org
[javascript]url에서 파라미터 추출하기
이번 포스트에서는 URL을 통해 get 방식으로 전달된 파라미터를 Javascript 영역에서 추출해서 사용하는 방법을 알아보자. queryString 추출 queryString이란 url 뒤에 ? 부분 부터로 파라미터들로 구성된 부
goodteacher.tistory.com
'부트캠프 개발일지 2023-2024 > Bootcamp 생활기록' 카테고리의 다른 글
| [5주차] 개발공부 중 멘탈이 무너질 때, 스스로에게 해야 하는 말 (0) | 2023.11.05 |
|---|---|
| [5주차] KPT : JS 그룹프로젝트 회고 (1) | 2023.10.30 |
| [4주차] 메인페이지에서 상세페이지로 이동하기 (0) | 2023.10.26 |
| [4주차] 보충반 특강1 : 함수, 반복문(for, forEach), 배열메소드(map, filter, find) (0) | 2023.10.25 |
| [4주차] html parsing, DOM tree, form-input 태그, cmd 함수로 바로가기 (0) | 2023.10.23 |