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

어제 각 카드를 클릭했을 때 movieid값을 url을 통해 전달받아 페이지를 이동하는 것 까지는 성공했다.

이제 저 URL에 있는 id 값을 어떻게 가져와서 이용할까?
URL에 포함된 파라미터(쿼리스트링) 값을 읽어오는 방법을 알아보자.

그 전에, 쿼리스트링이 뭔지부터 알아보자😀

쿼리스트링 이란?

[Query String]

• 사용자가 웹으로 데이터를 전달하는 방법중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다.
  ex) http:// localhost:port/path?querystring
• ? : 쿼리스트링의 시작을 나타낸다.
• key=value 한 쌍으로 구성된다.
• & : 여러 쌍의 변수와 값을 전달할 경우 & 로 구분한다.
  ex) http:// localhost:port/main?id=HTML&page=12

URL에서 쿼리스트링 추출하기

• 현재 페이지의 URL을 알아오기 위해 window.location 속성을 사용할 수 있다.

• 이 location 객체의 속성들을 이용해 현재 페이지의 URL 정보를 알아낼 수 있다.
  

• 이제 id 뒤에있는 값 278 을 읽어오는 방법을 알아보자.

특정 파라미터 값 읽기

전체 URL에서 id의 값 278을 읽으려면 split 메서드를 사용하거나, 정규표현식을 사용하는 방법 등이 있겠지만, 내가 선택한 방법은 URLSearchParams 를 이용하는 방법이다.

URLSearchParams 사용 방법

사용하기 위해 우선 URLSearchParams()에 파라미터(매개변수)로 location.search를 넘겨주어야 한다.

const URLSearch = new URLSearchParams(location.search);

이제 URLSearch에 다양하고 편리한 메서드들을 사용할 수 있다.

• has() : 값의 여부를 불리언으로 반환
• get() : 일치하는 경우 해당하는 값을 반환
• getAll() : 일치하는 값이 여러개인 경우 배열로 모두 반환
• delete() : 특정 값을 삭제
• append(a, b) 새로운 값을 append하여 추가
• set(a, b) : 값을 변경 또는 기존 값 변경

우리는 그 중에서 get() 만 사용할 것이다.

let id = URLSearch.get("id");
console.log(id);

키 가 id 이고, = 옆에 붙는 값들은 페이지마다 다른 값인데 위 코드를 실행해보니, 각 카드마다 다른 id 값이 콘솔에 잘 찍히는 것을 확인했다.

이제 이 id 값을 가지고 Details를 fetch해야지!!
슥슥

async function fetchMovieContent() {
  const options = {
    method: "GET",
    headers: {
      accept: "application/json",
      Authorization:
        `Bearer ${ACCESS_KEY}`,
    },
  };
  const response = await fetch(
    `https://api.themoviedb.org/3/movie/${id}?language=en-US`,
    options
  );
  const data = await response.json();
  return data;
}

각각의 id 값을 가지고 새롭게 Details를 fetch 했다.
test로 상세페이지에 포스터 이미지만 그려주었더니 잘 된다~!
아직 갈길이 구만리... 이지만 큰 산을 넘었다는 것에 의의를 두자.ㅎ ㅏ
localStorage를 이용한 리뷰 기능은 아직 시작도 안한 상태ㅎ..
잘 하고 있는 거겠지?

느낀점

⛰️ 넘고 ⛰️ 을 넘으면 또 ⛰️ 이 기다린다~ 😇
눈을 뜨자마자 코딩하고 자기 직전까지 코딩하는 삶... 예.. 재밌습니다..

while(true) {
  "기상";
  "코딩";
  let 위장 = empty ? 밥 : null;
  "코딩";
  "취침";
}