[TIL]230606

페이지 이동할 때 주소

다른 실습을 같이 했더니 포트 주소가 변경되어서 페이지 이동이 제대로 이루어지지 않았다.
변경하지 않아도 값을 찾아서 해당 페이지의 주소에 맞게 자동으로 변경할 수 있는 방법을 찾아봐야겠다.

어제 막혔던 것

코드를 실행까지 했었는데
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
해당 error가 발생했고, detail 페이지가 로딩이 되지 않아 발생한 문제 같았다.

오늘의 시도

main.js 에서 api를 불러왔을 때 로컬이 비어있지 않다면, 영화들의 정보를 문자열로 localStorage에 저장해주었다.

const movieData = function(movies) {
  if(localStorage !== null){
    movies.forEach(movie =>{
      const mData = JSON.stringify({movie})
      //console.log(mData);
      localStorage.setItem(movie.id, mData)
    });
  }
};

detail.js에서 페이지가 로딩되면 페이지의 id를 기반으로 필요한 데이터를 가져와 HTML을 재구성한다.

window.addEventListener("DOMContentLoaded", () => {
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get("id"); // 영화 id 출력됨
    let movie = JSON.parse(localStorage.getItem(id));
    displayDetail(movie);
  });

URLSearchParams

url은 protocol + domain + path + query string 으로 구성되어 있다.

Query String : ?부터 시작한다.

데이터를 이것저것 시도해보면서 다뤄볼 수 있었다.