상세페이지 연결 localStorage / setTime, getTime

팀과제 중 상세페이지 를 맡게 되었고

 

localStorage 를 사용 하여 detail 버튼을 눌렀을때 해당 영화에 상세페이지가 열리면 된다.

 

우선 아주 간단해보이는데 나에겐 너무 머리가 아프다..

 

내가 정한 방법은 해당 영화 카드에 있는 detail 버튼을 눌렀을때

 

그 영화의 id값을 가져오는 것이고,

 

그 영화 id값과 전체 영화 id값과 비교하여 일치하는 값이 있다면

 

일치하는 id값의 영화정보만 불러오는 것이다!!

 

그러기 위해 detail 버튼을 눌렀을때 id값을 localStorage에 담아 와야한다.

 

function clickAllChart({ target }) {
	if (target.matches(".details")) {
        // alert(`영화 ID : ${target.id}`);
        window.localStorage.setItem("movieid",`${target.id}`);
        window.open('detail.html')
   	}

}

해당 코드를 이용해 detail이라는 버튼 target을 눌렀을때 해당 영화 id값이 뜨는지 alert로 띄었을때 성공하였고

 

그걸 localStorage.setItem을 통해 movieid라는 변수에 담아오면서 detail.html을 여는 방식으로 하였다.

 

detail.html이 열리는거 까진 성공했다.

 

그리고 id값이 잘 가져와지는지 확인해봐야한다.

 

const id = window.localStorage.getItem("movieid")

console.log(id)

detail.js 에서 해당 코드를 통해 console 창을 확인해보니 id값이 잘 가져와진다!

 

수월하게 잘 풀리는 기분이다 후훗..

 

이제 가져온 id값과 전체 영화 id값을 비교해주면 된다!

function detail() {

    const options = {
        method: 'GET',
        headers: {
            accept: 'application/json',
            Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI5MTE5ZjU0OTI3NWEyM2VjNjViNTRkZmQ2MTUyYTA4NiIsInN1YiI6IjY0NzA4YTllNzcwNzAwMDBhOTQ3ZDdmMyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.3W-E9KnuKEWvia4zXrXpCRKfHz9a5clH7RjrUwJD8iY'
        }
    };

    fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
        .then(response => response.json())
        .then(data => {
            let rows = data['results']
            rows.forEach((a) => {
                // console.log(a['id'])
                if (a['id'] === parseInt(id)) {
                    console.log("true") 
                }
                else {
                "false"
                }

영화 목록이 총 20개 이고 일치하는게 있다면 true를 나타내고, 일치하지않는다면 false를 나타낸다!

 

console 창을 확인해보니 false가 20개이다..

 

뭐가 문제인가..

 

주석 처리 되어있는 console.log(a['id']) 를 했을때는 20개의 영화 목록이 정상적으로 나온다.

 

그렇다면 여기서 문제는

 

if (a['id'] === id)

여기서 내가 가져온 setItem으로 가져온 id값이 정상적이지 않다는 건데..

 

뭐가 문제인가 계속해서 찾아봤지만 알 수가 없었다.. 그래서 팀원에게 물어본 결과

 

영화 자체의id값은 type이 number 이고 localStorage.setItem으로 가져온 type은 string 이라는 거다..

 

내가 === 을 사용해서 타입과 모든게 일치해야 해서 true가 나오지 않다는 것..

 

== 을 사용하면 true 가 1개 정상적으로 찍혔고

 

if (a['id'] === parseInt(id))

이런 식으로 타입을 number로 바꿔주니 true가 잘 찍힌다.. 

 

머리가 지끈하니 다음시간에 더 진행해보자 ㅠㅠ