[TIL] 영화 검색 사이트 만들기 (1)

개인프로젝트가 끝나고, 팀프로젝트가 다시 시작되었다.
팀프로젝트는 지난번에 했던 인기 영화 API를 불러와서 검색하는 사이트를 조금 더 발전시킨 버전인데, 아.. 갈길이 구만리 같아 보인다. 😇

[자바스크립트 팀과제]

• [1] TMDB 또는 영화진흥위원회 오픈 API 이용
• [2] 영화 정보 상세 페이지 구현
  • 기존 영화 정보 카드 리스트에서 특정 item 선택 시 상세 페이지로 이동
  • 상세 페이지에서 메인 페이지(홈)으로 이동하는 UI 함께 구성
• [3] 상세 페이지 영화 리뷰 작성 기능 구현
  • 상세 페이지에서 특정 영화에 대해 의견을 작성할 수 있는 UI 구현
    • 작성자, 리뷰, 확인비밀번호를 입력하도록 구현
  • 작성한 정보는 브라우저의 localStorage 에 적재
• [4] gitjub PR(Pull Request) 사용하여 협업
• [5] UX를 고려한 validation check (유효성 검사)

우선 내가 조장이라서(?) 내가 완성한 기존 개인프로젝트를 새로운 리포지토리에 복제하였고, Collaborators 에 조원들을 추가하였다. 그리고 지난 번 조의 팀프로젝트에서도 협업 툴로 github을 사용하는게 익숙하지 않아서 애를 먹었는데 이번에는 다같이 숙지하고 팀플을 시작했으면 좋겠어서 화면 공유를 통해 branch 를 생성하는 방법, branch 에서 commit, push 후 Pull Request 하는 방법 등을 설명해주었다. (나도 완~벽하게 안다고는 할 수 없지만..😂) 그리고 일부러 conflict 도 내 보면서 어떻게 대처해야 하는지도 경험하는 시간을 가졌다. 마지막으로 main branch 랑 merge 까지 개개인별로 직접 해보면서..

팀 프로젝트의 시작

일단 기존에 사용하던 TMDB API를 그대로 사용하기로 했고, 두번째.. 영화 카드 클릭했을 때 상세페이지로 이동하는 것 부터가 문제였다.. React-router (또는 라우팅을 구현하기 위한 다른 어떤 방법...) 을 아직 학습하지 않은 상태에서 각 카드마다 페이지를 이동시키기 위해 어떤 방법을 써야할지 감이 오지 않았다.

의식의 흐름

• window.location.href 를 쓰면 페이지 이동이 가능하긴 한데.. 그렇다고 html 파일 20개를 만드는 건 아닌 것 같고..
• url 에 영화id값을 넣어서 URL파라미터 값 (쿼리스트링 값)으로 뭔가를 해보고 싶은데 어떻게 전달할까?
• localhost/movie?id=${movie.id} -> 이 url 로 이동하고 싶은데..
• 각 카드에 다음과 같은 이벤트리스너를 추가할까?

div.addEventListener("click", () => {
    const url =
      window.location.href + "movie?id=" + movie.id;
    window.location.href = url;
  });

• 이 코드를 추가하고 카드를 클릭했을 때
  
• 그럼 GET 요청을 처리하기 위해 fetch를 또 해야 하나?
• javascript로 localhost에 GET 요청이 가능한가? => 불가능

div.addEventListener("click", () => {
    const url =
      window.location.href + "movie.html?id=" + movie.id;
    window.location.href = url;
  });

• 그럼 movie.html 파일을 미리 만들어놓고 거기로 이동해보자.
• movie.html에는 body태그에 <span>영화상세</span> 만 써놓았다.
  
• 오 된다.! url에 각각의 다른 id 값을 가지고 페이지를 이동한다.
• 그런데 똑같은 기능을 한 줄로 구현한 조원이 있었으니...

div.innerHTML = `<div class="movie-card__poster">
  <a href='movie.html?id=${movie.id}'> 
    <img src=${base_url}${file_size}${file_path} /></div>
  <div class="movie-card__content">
    <div class="movie-card__title">${movie.title}</div>
    <div class="movie-card__overview">${movie.overview}</div>
    <div class="movie-card__vote-average">Ratings : ${movie.vote_average}</div>
  </div>`;

• 처음에 카드를 생성할 때 <a/> 태그를 추가하는 방법이다.
• <a href='movie.html?id=${movie.id}'> 이 한줄을 추가했더니 똑같이 동작하더라.....😩
• 아직 넘어야 할 산이 너무 많지만... 첫 산을 넘은 기분..
• 이제 저 쿼리스트링으로 지지고 볶고는 내일 해보아야지..

느낀점

• react-router를 빨리 배워보고 싶다는 생각이....
• 팀 프로젝트 시작하니까 개인공부 할 시간이 없어..😂
• 나중에 이걸 본다면 별 문제 아닌 걸로 오랫동안 고민한게 되겠지?
• 오늘도 1보 전진..ㅎ