[TIL #13] 231026_영화 검색 사이트 만들기3 Fetch, URLSearchParams

Bora.K | 권보라·2023년 10월 26일

JavaScript TIL

TIL

목록 보기

13/51

오늘 한 일

[Project.02/Team] 영화 검색 사이트 디벨롭
- 상세페이지 열기 기능 구현
- 상세페이지에 TMBD API의 id값을 불러와서 영화정보 게시

배운 것

어제부터 본격적인 팀 프로젝트 기능 개발이 시작되었다. 내가 맡은 부분은 메인 페이지에서 영화 카드를 클릭하면 상세페이지로 넘어가고, 상세페이지에 클릭한 영화의 정보를 구현해 내는 것이다. 기존에 있던 영화 검색 사이트를 디벨롭하는 과제여서, 내가 만들었던 영화 검색 사이트를 기반으로, 팀원분께서 튜터님 해설 강의에 맞게 코드를 깔끔하게 수정 후 디벨롭에 들어갔다.

상세페이지 기능 개발

기존에 만들었던 영화 검색 사이트에서는 onclick을 활용하여 영화 카드를 클릭하면 alert창이 뜨도록 구현했었다. (물론 튜터님 해설강의 보고 수정한 코드 ㅋㅋㅋ)

const handleClickCard = (event) => {
  if (event.target === $movieList) return;

  if (event.target.matches('.movie-card')) {
    alert(`영화 ID: ${event.target.id}`);
  } else {
    alert(`영화 ID: ${event.target.parentNode.id}`);
  }
};

그래서 단순한 생각으로는 이 코드에서 수정해서 alert 부분을 삭제한 후 여기서 새로운 페이지가 열리도록 구현하면 된다고 생각했다. 그래서 테스트 html을 만들고 해당 창으로 넘어가게 하려고 어제 새벽 늦게까지 구현하느라 애를 썼다.

새 창을 열고 fetch로 데이터 불러오는 것까지 열심히 방법을 찾아봤지만, 콘솔 창에 계속 오류가 뜨고 풀리지가 않아서 결국 저희 팀에서 튜터 역(?)을 맡고 있는 팀원님께 면담 요청을 했다. 내가 찾아 본 방법 중 하나였던 하이퍼링크로 연결하는 방법이 간단하고 쉬울 것이라고 하시면서 방향성을 대충 잡아주셨다.

(1) 하이퍼링크로 상세페이지 열기

<a href="UIdetail.html?id=${movie.id}">

기존에 카드를 생성하는 함수 안에 innerHTML로 이미지와 타이틀, 평점, 오버뷰를 넣었던 li 안에 해당 하이퍼링크를 삽입했다. 저 한 줄로 바로 UIdetail.html 페이지로 넘어갔다.

(2) TMDB 오픈 API 데이터를 fetch로 가져오기

Fetch API는 HTTP의 요소를 javascript에서 접근하고 조작할 수 있도록 가져오는 것이다. 그래서 오픈 API의 데이터를 요청해서 가져와 나의 웹에서 활용할 수가 있는 것이다.

async function logJSONData() {
  const response = await fetch("오픈 API 링크");
  const jsonData = await response.json();
  console.log(jsonData);
}

이게 fetch의 기본 구문이다. 메인 카드는 TMDB의 인기 영화 리스트 20개를 불러와서 활요했었는데, 영화 포스터 이미지가 아닌 가로로 긴 이미지를 불러오고 싶어서 TMDB 상세페이지 링크를 불러왔다.

TMDB 인기 영화 링크

'https://api.themoviedb.org/3/movie/popular?language=en-US&page=1';

TMDB 영화 상세페이지 링크

'https://api.themoviedb.org/3/movie/${id}?language=en-US';

상세페이지는 id 기준으로 불러올 수 있기 때문에 상세페이지 구현하기 더 편하다.

새로 알게 된 Git 명령어

깃을 사용하다 보니 필요에 의해 이런 명령어도 있지 않을까? 하고 찾아보다 보니 좋은 기능들이 많았다. pull 해온 코드에서 내가 이것 저것 만져보다가 만져보던 것들을 날리고 싶을 때, 원복하는 기능이 있다.

(1) 로컬에서 단순히 저장했던(staging 되지 않은) 파일 원복

git restore .
실행해 보니 새로 추가한 파일은 사라지지 않고, 기존에 있던 파일들은 원복되었다.

(2) git add 취소

git restore --staged <파일 이름>
git reset HEAD <파일 이름>
인자로 전달한 파일들을 unstaged 상태로 바꿔준다.

(3) 최근 commit 수정

git commit --amend
새로 staging한 변경사항을 최근 commit에 덮어 쓰고, 커밋 메세지도 바꿀 수 있다.
commit history를 깔끔하게 관리할 수 있다.

(4) git commit 취소

git reset --soft HEAD^
최근 커밋을 취소하고, 커밋했던 변경사항들은 staged 상태로 남겨준다.
git reset --hard HEAD^
최근 커밋을 취소하고, 커밋했던 변경사항들은 모두 삭제한다.
-> 이 때 git 히스토리에서는 커밋이 완전 삭제됨

(5) git push 취소

git revert HEAD
최근 커밋을 되돌리는 새로운 커밋을 추가해 준다.

(6) merge 취소

git reset --merge ORIG_HEAD
바로 직전 병합을 취소하는 명령이다.

(7) 로그를 그래프로 보여줌

git log --oneline --graph

오늘의 회고

오늘 팀 프로젝트를 진행하고 Github를 사용하면서 깃허브와 깃의 다양한 기능들을 새롭게 알았다. 깃허브에 push하고 PR 날린 것을 팀원이 승인 거절을 하면? 그냥 다시 수정사항을 수정한 후 add . commit push하면 된다. 그럼 Git history에 커밋한 내역들이 남는다. 이 때 이미 승인한 경우 다시 push를 하면 별도 승인 없이 merge를 할 수 있다.
오늘 팀원들이랑 회의를 많이 했다. 서로 막히는 부분에 대해서 기능 구현도 협동하여 하고, 기능 구현을 완성했을 때 기쁨도 같이 나눴다. 오늘도 우리 팀이 가장 늦게까지 남아있었던 것 같다. 기능이 하나씩 구현돼서 붙여질 때마다 뿌듯했다. 팀 프로젝트가 확실히 재밌다.