[TIL] 팀프로젝트 영화 사이트(추가 기능)

대빵·2023년 10월 24일

내일배움캠프에서 새로 팀을 짜주셔서 새로운 팀원분들과 첫 팀프로젝트날이닷..!!

개인프로젝트로 만들었던 영화 검색 사이트를 추가 기능 구현하는걸 이번 팀 프로젝트로 받았다ㅎㅎ

과제 개요

개인과제에서 작성한 [내배캠 인기영화 콜렉션]을 발전시키는 팀 프로젝트
팀원들의 프로젝트 N개 중 1개를 대표로 선택, 팀 프로젝트로 발전

필수 요구사항

TMDB 또는 영화진흥위원회 오픈 API 이용(택 1 또는 중복 사용)
영화정보 상세 페이지 구현
상세 페이지 영화 리뷰 작성 기능 구현
github PR(=Pull Request) 사용한 협업
UX를 고려한 validation check
하기 기재된 Javascript 문법 요소를 이용하여 구현

일단.. 누구의 홈페이지를 가져오는 것부터가 고민이여서 우리 알고10조팀은 사다리로 팀장뽑은거처럼 이번에도 사다리로 뽑게 되었다!! 두-둥... 바로.. 내거 당첨..ㅎㅎ(누구꺼 되던 상관은 없다보니!!)

클릭이벤트로 arlet창 띄운것을 응용해서 각 카드마다 상세페이지로 이동할 수 있게 먼저 생각해 보잣..!!

첫번째 생각은 detaile_page.html을 만들어서 전에 구현했던 onclick이벤트에 넣는것이다.

<div class="movieCard" onclick='hrefLink()'></div>

link = 'detaile_page.html';

function hrefLink() {
	location.href = link;
}

location.href

a태그와 동일하게 페이지 이동을 하는 메서드이다. replace()와 다르게 이전 페이지로 돌아갈 수 있다.

그러나, 여기에 id값을 넣어서 원하는 카드의 값을 가져오는 것을 생각했을때... id값을 어떻게 넣을지 고민이 너무 되었다..하지만 해답은 나오지 않았고.. 튜터님께 가서 문의는 했지만 원하는 답을 얻을 수는 없었다.. 그래서 결국 내배캠에서 잘하시는 분들중 한분을 찾아가서 물어보니 답을 얻을 수 있었다

<div class="movieCard" onclick='location.href='/detaile_page.html?movie-id${id}'></div>

/detail_page.html?movie-id ${id}(/html파일.html?변수$ {id})

이렇게하면 원하는 id값을 얻을 수 있었다... 우왕... 나는 저기에 ?빼고는 다 넣어봤는데 ?때문이여서.. 약간 어이가 없었다.. 왜.. ? 일까했지만 /는 폴더이고 ?는 값이닷..!!

일단 저렇게 id값을 가져오면 되는구나 알고 이제는 내꺼에 접목해보려했으나... 내 코드에 오류가 이만저만아니게 슬금슬금 나오기 시작했다..

기존코드

function renderMovies(data) {
  data.results.forEach(element => {
    cardList.innerHTML += `
      <div class="movieCard"token interpolation">${elemnet.id})">
        <img src="https://image.tmdb.org/t/p/w300/${element.poster_path}" alt="">
        <div class="movieInfo">
            <h3>${element.title}</h3>
            <span class="vote_average">평점 : ${element.vote_average}%</span>
        </div>
        <div class="overview">
            <h4>overveiw</h4>
            ${element.overview}
        </div>
      </div>
    `
  });
}

수정코드

function renderMovies(data) {
  cardList.innerHTML = "";
  data.results.forEach((element) => {
    cardList.innerHTML += `
    <div class="movieCard" data-id=${element.id}>
        <img
          src="https://image.tmdb.org/t/p/w500/${element.poster_path}"
          alt="${element.title}"
        />
        <div class="back">
          <div class="movieInfo">
            <h3>${element.title}</h3>
            <span class="vote_average">Percent : ${Math.ceil(element.vote_average) * 10}%</span>
          </div>
          <div class="overview">
            <h4>overveiw</h4>
            ${element.overview}
          </div>
        </div>
      </div>
    `;
  });

  const movieCard = document.querySelectorAll(".movieCard");

  movieCard.forEach((movie) => {
    console.log(movie.dataset.id);
    movie.addEventListener("click", function () {
      return (location.href = `/detaile_page.html?movie_id=${movie.dataset.id}`);
    });
  });
}

data-** 공식문서 확인

data- 속성을 추가함으로써, 평범한 HTML 요소조차 복잡하고 강력한 프로그램 객체가 될 수 있습니다. 예컨대, 게임의 우주선 스프라이트는 단순한 img태그와 class 특성, 그리고 여러 data- 특성으로 나타낼 수 있습니다.

dataset 공식문서 확인

속성은 데이터 세트의 객체 속성인 camelCase 이름/키로 설정하고 읽을 수 있습니다
element.dataset.keyname.
대괄호 구문을 사용하여 속성을 설정하고 읽을 수도 있습니다
element.dataset['keyname'].
운영자 in는 주어진 속성이 존재하는지 확인할 수 있습니다
'keyname' in element.dataset.

이렇게해서 다음 상세페이지로 이동할때 url값이 그 카드프로퍼티의 id값이 잘 적용되는 것을 확인할 수 있었다... 휴... 이것만 하는데도 하루를쓰는 나.. 언제쯤 안물어보고 할 수 있는지 모르겠지만.. 그래도 오늘 하루도 조금은 알아가는 시간이 되어서 나름 뿌뜻한거 같다!!(시간은 너무 부족하지만.. 그래도 완전 초급 알고리즘문제라도 1-2문제씩은 무조건 풀어야되는데ㅠㅠ 프로젝트로 시간을 엄청 잡아먹는 기분이닷..ㅠㅠ)

대빵

이전 포스트

[TIL] 개발환경 세팅

다음 포스트