상황
팀 프로젝트에서 구현해야하는 내용은 TMDB에서 영화 데이터를 가지고 와서 메인 페이지에서 카드 리스트 형태로 영화들의 정보를 보여주고 그 카드를 클릭하면 별도의 상세페이지가 등장해서 더 자세한 영화 정보를 보여줄 수 있게 구현해야 했다.
상세 페이지와 메인 페이지는 별도의 html파일이 있는 MPA형식이 아닌 SPA형식으로 구현하기 위해서 공부를 하였다.
고민한 내용
- 카드 리스트를 클릭하게 될 경우에 상세 페이지로 넘어가야한다.
- 상세 페이지에서 다시 돌아올 수도 있어야 했지만 브라우저 상에서 뒤로가기를 눌러서도 다시 메인페이지로 돌아와야 한다.
- 현재 URL에 movie id값에 따라 다른 영화 정보들을 랜더링하여 보여줄 수 있어야 한다.
구현 방법
카드 리스트를 클릭하게 될 경우에 상세 페이지로 넘어가기
가장 고민을 많이 했던 내용으로 window의 history 인터페이스를 사용하여 해당 기능을 구현할 수 있었다.
history 인터페이스는 현재 페이지가 로드된 탭 또는 프레임에서 방문한 페이지를 조작할 수 있는 인터페이스로 history API 중에서 pushState()를 통해서 브라우저 세션 history 스택에 항목을 추가를 할 수 있다.
이때 pushState(state, unused, url)가 매개변수로 들어오고 state를 통해서 page 구분을 할 수 있고, unused는 불필요한 매개변수다. url은 이동하고자 하는 url을 채워넣으면 된다.
이번 프로젝트에서는 아래와 같이 구현을 하였다.
export function handleLocation(link) {
return (e) => {
e.preventDefault();
console.log(link);
history.pushState(link, null, window.location.href + link);
routing(router);
};
}브라우저 상 뒤로가기를 실행할 시 상세 페이지에서 메인페이지로 넘어가기
앞서 설명한 history의 pushState()를 사용하면 뒤로가기 버튼이나 앞으로가기 버튼을 클릭할시에 window에 popstate이벤트가 발생한다. 이 이벤트를 이용해서 해당 기능을 구현할 수 있었고, 구현은 아래와 같이 하였다.
window.addEventListener('popstate', (e) => {
console.log(e, e.state);
switch (e.state) {
case '/':
renderHome();
break;
default:
routing(router);
break;
}
});router라는 객체를 만들어 각각의 path에 맞는 동작을 수행할 수 있었으나 잘 사용해보지 않은 switch를 이용하여 한번 구현을 해봤다.
해당 이벤트가 발생하면 e에는 현재 기록된 결과의 state를 통해서 어떤 페이지를 방문을 했는지에 대한 정보를 알 수 있다.
현재 URL에 movie id값에 따른 영화 정보 랜더링
1번의 경우로 영화를 클릭할 시에 url을 원하는 url로 변경할 수 있는 것은 좋았으나 막상 url에 어떻게 movie id값을 넣을 수 있을까하고 찾아봤는데 query string을 이용하여 해당 기능을 구현할 수 있었다.
query string은 사용자가 입력 데이터를 전달하는 방법 중의 하나로, url 주소에 데이터를 보낼 수 있다.
정해진 형식이 있는데 엔드포인트 주소 이후에 ?를 사용함으로써 쿼리스트링의 시작을 알리고 보내고 싶은 key와value의 쌍으로 보내게 된다. 여러 개를 보내고 싶을 경우 &를 이용하여 여러 개를 보낼 수 있다.
URI?key=value
URI?key=value&key2=value2해당 값을 사용하기 위해서는 window.location 인터페이스와 URLSearchParams를 이용하여 쿼리스트링 값을 가져와서 사용할 수 있는데 아래와 같이 구현하여 사용하였다.
const movieId = new URLSearchParams(location.search).get('movieId');회고
URL에 대해서 조작한다는게 많이 어려웠다. 이해도 제대로 되질 않았고 이상하게 받아들여지는 부분도 많았다.
이번 기회를 통해서 어느정도 흐름과 개념을 조금 잡힌 것 같으나 아직은 완전하게 잡히지 않은 것 같다.
URL, history, location에 대해서 조금 더 공부해서 SPA를 구현하는데 어려움을 느끼지 않도록 조금 더 공부를 해야할 필요성을 느꼈다.
