home 버튼 / prev,next 버튼 ( 해결 )

https://byeongil00.tistory.com/30#comment13612470

home 버튼 / prev,next 버튼

이전 글에서 생겼던 문제가 팀원이 해결해주었다..

 

빠르게 해결방법을 알아봅시다!

---

let rank = movies.indexOf(movie) + 1

------------------------------------

localStorage.setItem("movierank", `${target.rank}`);

이전 글에서 이런 식으로 rank에 순위값을 담아왔고 console.log로 찍었을때는 1부터 20까지 찍혔으나

 

setitem을 통해 movierank에 담아오면 20이라는 값이 찍혔다.

 

그 이유가 무엇인지 팀원께 물어보니..

 

setitem의 경우 하나의 키값에 하나의 데이터 값만 담을 수 있어란다..

 

아주 간단한거 였구만...

 

그래서 1부터 20까지 생성은 되지만 movierank 라는 키값에 데이터가 계속해서 덮어지고

 

마지막으로 생성된 20이 찍혔던 것!!

 

그래서 팀원이 코드를 만들어 주었는데

let allmovies = []
            for (let i = 0; i < movies.length; i++) {
                allmovies.push(movies[i]["id"])
                localStorage.setItem("rankof" + movies[i]["id"], allmovies.indexOf(movies[i]["id"]) + 1)
                localStorage.setItem(i + 1, movies[i]["id"])
            }

allmovies 라는 변수를 임의로 만들어 빈 배열을 만들어 주고

---

localStorage.setItem("rankof" + movies[i]["id"], allmovies.indexOf(movies[i]["id"]) + 1)

 

for문을 통해 movies의 갯수만큼 반복해준다.

 

여기서 movies는 영화 api를 fetch로 가져와 담아준거다!

 

영화가 총 20개이니 20번 반복!

 

여기서 팀원이 생각해낸 방법은 allmovies라는 빈 배열에 moives의 id값을 하나씩 push 해주는 것이다!

(for문 반복)

---

sort라는 코드를 사용하여

평점 순으로 정렬해주고 평점이 같을 경우에는 제목 알파벳순으로 정렬해준다.

//movies를 sort 하는데 1. 평점 2. 평점 같으면 제목 순으로 정렬한다.
            movies.sort(function (prev, next) {
                if (next.vote_average === prev.vote_average) {
                    if (prev.title < next.title) {
                        return -1;
                    } else if (prev.title > next.title) {
                        return 1;
                    } else {
                        return 0;
                    }
                } else {
                    return next.vote_average - prev.vote_average;
                }
            });

---

요길보면 rankof + 영화id 라는 키값에 영화 순위를 담았고

localStorage.setItem("rankof" + movies[i]["id"], allmovies.indexOf(movies[i]["id"]) + 1)

---

요걸 통해 i + 1 이라는 키값에 영화 키값을 담았다.

 

i + 1 이 갑자기 왜 튀어나왔냐면

 

영화 순위가 영화의 인덱스(순서)에서 1을 더해주는 방식인데

 

인덱스 값이 0부터 시작하기 때문에 1을 더해주어 순위를 나타낸것이다!

localStorage.setItem(i + 1, movies[i]["id"])

---

근데 지금 보니 

            for (let i = 0; i < movies.length; i++) {
                localStorage.setItem("rankof" + movies[i]["id"], i + 1)
                localStorage.setItem(i + 1, movies[i]["id"])
            }

애초에 i + 1를 데이터 값으로 담아주고 allmovies를 사용한 코드를 다 지워도 문제가 없다..

i + 1 이 곧 순위를 나타내주는 값이기 때문..

---

이제 localstorage 값에 담았으니 상세 페이지에서 해당 영화의 순위와 id값만 불러오면 된다.

---

prev 라는 버튼을 누르면 prevfunc 라는 함수가 실행되고,

next 라는 버튼을 누르면 nextfunc 라는 함수가 실행된다.

const prev = document.querySelector("#prev");
const next = document.querySelector("#next");
prev.addEventListener("click", prevfunc);
next.addEventListener("click", nextfunc);

function prevfunc() {
  let ranknum = parseInt(localStorage.getItem("rankof" + sendid)) - 1
  if (ranknum > 0) {
    sendid = localStorage.getItem(ranknum)
    detailload()
  } else { alert("제일 처음 영화입니다.") }
}
function nextfunc() {
  let ranknum = parseInt(localStorage.getItem("rankof" + sendid)) + 1
  if (ranknum < 21) {
    sendid = localStorage.getItem(ranknum)
    detailload()
  } else { alert("제일 마지막 영화입니다.") }
}

prevfunc 함수를 보면 ranknum 이라는 변수를 선언해주고 

parseInt(localStorage.getItem("rankof" + sendid)) - 1 요걸 데이터 값으로 줬다.

---

let sendid = localStorage.getItem("movieid")

"rankof" + sendid 이부분을 보면 sendid 선언을 통해 sendid 가 영화의 아이디값이라는 걸 알 수 있고

 

"movieid" 는 https://byeongil00.tistory.com/29 요 게시글을 보면 해당 영화의 아이디 값을 가져오는 걸 알 수 있다!

 

다시 한번 살펴보면 "rankof" + movies[i]["id"] 이거랑 똑같다고 보면 된다! 쉽게 rankof 라고 부르겠다.

 

rankof 에는 순위 값이 들어 있고 순위 값에는 id 값이 들어있다.

( 이 부분이 잘 이해가 안되면 위로 가서 코드를 다시 한번 살펴보길 )

 

let ranknum = parseInt(localStorage.getItem("rankof" + sendid)) - 1

 

요 코드는 rankof 를 숫자 타입으로 바꿔주고 ranknum 에 담아 준거다.

 

코드를 살펴보면..

function prevfunc() {
  let ranknum = parseInt(localStorage.getItem("rankof" + sendid)) - 1
  if (ranknum > 0) {
    sendid = localStorage.getItem(ranknum)
    detailload()
  } else { alert("제일 처음 영화입니다.") }
}

prev 버튼을 클릭시  prevfunc 함수 실행 > 영화의 순위 ( rankof )  - 1 >

ranknum이 0보다 클때 sendid 가 ranknum 이되고 detailload 함수를 실행한다는 거고

 

0보다 작을 경우 alert 를 띄우는 거다.

 

여기서 0 이란 영화의 순위 ( rankof ) 를 확인해 1순위일때 -1 을 하면 0순위가 되므로 현재 1순위라는 뜻이고

 

즉, 제일 처음 영화라는 뜻이다!

---

function nextfunc() {
  let ranknum = parseInt(localStorage.getItem("rankof" + sendid)) + 1
  if (ranknum < 21) {
    sendid = localStorage.getItem(ranknum)
    detailload()
  } else { alert("제일 마지막 영화입니다.") }
}

next 는 반대로 + 1을 해준다.

21보다 작으면 alert 실행 (마지막 영화 20번째에서 + 1을 하면 21이므로!)

---

자 여기서 나는 하나의 궁금증이 생겼다...!

 

let allmovies = []
            for (let i = 0; i < movies.length; i++) {
                allmovies.push(movies[i]["id"])
                localStorage.setItem("rankof" + movies[i]["id"], allmovies.indexOf(movies[i]["id"]) + 1)
                localStorage.setItem(i + 1, movies[i]["id"])
            }

바로 이 부분인데

 

아까도 말했지만 i + 1 이 즉, 순위 이고

 

순위에 아이디 값을 담오는거니

 

조금 더 짧게 할 수 있지 않을까 생각해서 만든 코드를 짜봤다..

 

let rank = i + 1
for (let i = 0; i < movies.length; i++) {
	localStorage.setItem(rank, movies[i]["id"])
}

rank 라는 변수에 i + 1 해주고

 

for 문과 setitem을 통해 rank에 아이디 값을 넣어주면 되지 않을까? 라는 생각을 했고

 

consol.log를 찍어보니 총 20개의 값이 각각 예쁘게 찍혔다.

 

되는건가..? 생각이 들쯤.. 요 값을 getitem을 하면서 문제가 생겼다..

 

메인 페이지와 상세페이지 js파일을 구분해줬는데

 

상세페이지 js파일에서 rank가 getitem으로 불러와지지 않는다..

 

혼자 계속해서 우째 불러와야하는지 고민하다 팀원께 물어보니

 

setitem을 해주는 js파일과 getitem을 해주는 js 파일이 달랐는데 우리팀은 js파일을 모듈로 사용하였고

 

js파일을 모듈로 사용할때 연결 할 순 있지만 현재 우리 코드상 갈아엎어야한다는 수준이라하였고..

 

만약 불러오더라도 이렇게 하면 우리가 필요한 rank값 즉 순위를 불러오는게 아니라 해당영화의 id값만 불러오게 되는거라

 

버튼클릭을 했을때 작동하지 않을거라는 답변을 받았다...

 

그럼 처음에 id값들 가져온 이유가 뭐냐면

 

버튼을 클릭했을때 순위값이 +-1 되고 그 순위값에 담긴 id값을 통해

 

우리가 상세페이지를 그릴때 하나의 영화 id값을 사용한 코드에 넣어 줄 수 있기 때문이였다.

 

생각은 좋았으나 까빙...