231025 TIL

팀프로젝트 2일 차-1.

내가 맡은 것은 영화 리스트 중, 영화 카드 1개를 클릭하면 해당 영화에 대한 상세 페이지가 뜨게 하는 것이다.
(물론, 해당 상세 페이지에서 브라우저의 뒤로가기 버튼 말고 따로 홈 화면으로 돌아가는 버튼을 만드는 것도 필요할 거다. 그 외에도 유저 친화적인 UI/UX가 있다면 구현하도록 노력할 필요가 있다.)

무튼, 팀프로젝트 1일차에 세워둔 순서를 바탕으로 하나씩 일단 알아보기로 했다.
1. 영화 카드를 클릭했을 때, 이벤트가 발생하는 것.
2. 1번의 이벤트 동작으로 인해, 새로운 html 페이지로 이동하게끔 하는 것.
3. 2번의 새로운 html 페이지에 TMDB Details API에서 받아온, 조건에 맞는 데이터를 뿌리는 것.

우선은 개인프로젝트에서 클릭을 이용한 검색 기능을 구현해봤었기에, 개인프로젝트의 코드를 빌려와 1번 순서를 구현해보려 했다.

하지만 보기 좋게 실패했다.
몇 번 더 해보다가 막막해서 팀원 분께 힌트를 주실 수 있겠냐고 요청을 드렸고, 팀원 분께서는 친절히 설명해주시고 문자로 써주기까지 하셨다.

1. 메인 페이지에서 카드 클릭시 detail.html?movieId=영화아이디 로 이동시킴
e.g. ) a.href = `detail.html?movieId=${movieId}`

2. 상세 페이지에서는 상세 페이지 주소가 https://localhost:63342/project3/detail.html?movieId=3 일 때
 let urlSearch = new URLSearchParams(location.search);
 let movieId = urlSearch.get('movieId'); // 3
예제 처럼 URL에 적혀 있는 moveId값을 가져올 수 있음

3. detail.js에서 movieId값을 가져와지면 그 때 detail 호출

예시도 적어주시다니...어흐흑

일단은 팀원 분께서 주신 힌트를 기반, 내 나름대로의 코드를 완성시켜 다시 부딪혀보기 시작했다.

이곳에도 넣어보고 저곳에도 넣어보고, 라이브를 이용해 재차 개발자 툴을 보며 조금씩 수정해나갔다.

헌데 그러다 어떻게 에러가 안 뜨는 상황을 맞이하긴 했는데, 애석하게도 클릭이 작동하진 않았다.
개인 과제 때 구현했던 alert 코드와의 충돌일까 그저 어렴풋이 추측할 뿐이었다.

또 1시간 정도 고민하다가 팀원 분에게 양해를 구하고 질문을 드렸다.
그저 빛...

일단은 약간 기분 좋은 점은 어렴풋이했던 추측이 어느 정도 맞았다는 거다.

팀원 분께서도 alert 코드 때문에 그런 것 같다고 말씀하시고는 alert 코드 대신에 내 코드를 집어넣어 보자고 하셨다.

let alertId = function () {
  movies.forEach(movie => {
    let id = movie.id;
    let eachMovie = document.getElementById(id);
    eachMovie.parentElement.parentElement.addEventListener('click', function () {
      window.location.href = `detail.html?id=${id}`;
      console.log(movieList);
    });
  });
};

그 결과다.
let alertId가 남아있는 것을 보면 얼추 알 수 있을 것이다...
나중에 수정을 거쳐 제대로 이름을 정해야할 것 같다.

무튼, 그렇게 완성된 것을 라이브서버로 띄워서 확인하니 잘 동작했다.
물론...온전히 나 혼자 작성한 코드라 할 수는 없지만 개인프로젝트 때와 달리, 조금이나마 나아간 스스로의 모습에 솔직히 좀 뿌듯했다.

아직 css를 추가해야할 점이 많다.
그건 내일 할 일이다.

아, 또 저 데이터를 받아오는 것에 있어서 또 배운 것이 있는데...
그건 내일 계속 이어서 써봐야겠다.
라고 말하지만 이어 쓰는 게 참 어렵다.
이렇게 일기 형식으로 쓰는 것도 좀 그렇고...
내 나름대로의 TIL 폼을 좀 생각해둘 필요가 있을 것 같다.
집중력 고갈...깨꼬닥