1. 페이지 이동처리하기
상품리스트페이지에서 상세페이지로 이동 처리 시켜야 한다.
태그를 이용할수도 있지만 이렇게 하면 페이지를 매번 새로 불러오게 된다. 반면 SPA로 구현하기 위해서는 페이지를 매번 새로 불러오는 것이 아니라 변경되는 부분만 새로 그리도록 해야한다.
열심히 구글링을 한 결과 history.pushState() 사용하기로 했다.
history.pushState()를 사용하면 페이지 이동 없이 주소만 바꿔주고 브라우저의 뒤로가기 버튼도 사용할 수 있다.
기본 형태 : history.pushState(state, title, url)
state: 브라우저 이동할 때 넘겨줄 data
title: 변경할 브라우저 title (없으면 null)
url: 변경할 주소
//router.js
const ROUTE_CHANGE_EVENT = 'ROUTE_CHANGE'
export const init = (onRouteChange) => {
window.addEventListner(ROUTE_CHANGE_EVENT, () => {
// addEventListener(type, listener)
onRouteChange()
})
}
// URL 업데이트하고 커스텀 이벤트 발생시키는 함수
export const routeChange = (url, params) => {
history.pushState(null, null, url)
window.dispatchEvent(new CustomEvent(ROUTE_CHANGE_EVENT, params))
// dispatchEvent: 이벤트 객체를 생성한 다음 el.dispatchEvent(event)를 호출해 요소에 있는 이벤트를 '실행'시킴
}
ListPage에 onClick 함수로 처리하기!
//ListPage.js
...
$page.innerHTML += $products;
$app.appendChild($page);
};
$products.addEventListener('click', (event) => {
const $li = event.target.closest('li')
// event.target.closest(selector) : event.target이 <li>안에 있지 않으면 null을 반환함
const { productId } = $li.dataset
if(productId) {
routeChange(`/products/${productId}`)
}
})
}
복기
문제 1.
TypeError: $products.addEventListener is not a fuction at ListPage.render 에러 처리에 시간이 많이 걸림
시간이 오래 걸린 이유
-
.addEventListener is not a function일때addEventListener를 쓴 게 잘 못 되었다는 말인지$products가 잘 못 되었다는 말인지 이해하지 못함 -
console.log($product)를 찍어보고 Elements 탭에<ul>....</ul>이 잘 들어오는데 왜그러지..? 하면서 한참 들여다보고 있었음 -
알고보니
$products가addEventListener적용할 수 있는 타입 상태가 아니었기 때문이었다.
The method addEventListener() works by adding a function, or an object that implements EventListener, to the list of event listeners for the specified event type on the EventTarget on which it's called.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener -
그렇게 콘솔을 찍어보고 코드를 들여다봐도 현재
$products의 상태가 string인지 몰랐다..
코드내용:var $products = "<ul>"; -
따라서
$products대신document.querySelector("ul").addEventListener로 적용해줬더니 잘 되었다.
문제 2
.dataset이 뭘 의미하는지 찾는데 한참 걸림
시간이 오래 걸린 이유
- 효율적인 구글링이 잘 안되는 것 같다.. 구글링은 열심히 하는데 검색 키워드를 잘 못 선택하는 건지 원하는 자료를 찾는데 시간이 너무 많이 걸린다.
- 모르는 개념이 나왔을 때 공식문서를 찾아보긴 하지만 대충 훑고 이해가 안된다고 포기하고 쉽게 설명한 글을 찾겠다고 시간을 버리는 경향이 있다.
- 사실 이제와서 MDN을 다시 읽어보니 당시에 자세하게 공들여서 읽었어도 멘토분이 설명해주기 전에 이해했을 수도 있을것 같다.
An HTML data-* attribute and its corresponding DOM dataset.property modify their shared name according to where they are read or written:
<div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth> Carina Anand </div> // const el = document.querySelector('#user'); // // el.id === 'user' // el.dataset.id === '1234567890' // el.dataset.user === 'carinaanand' // el.dataset.dateOfBirth === ''
문제 3
api불러오는데 자꾸 CORS 에러가 뜸 => 아직 미해결
- api.js에서 이미
BASE_URL ="https://h6uc5l8b1g.execute-api.ap-northeast-2.amazonaws.com/dev/products";로 해놨는데 DetailPage.js에서 아래와 같이 /products가 중복되게 써놨었다. 개발자도구창 에러메세지를 보고 수정을 했지만 CORS 에러 문제는 다른데에 있나보다.. 해결하지 못했다.
const productDetails = await request(`products/${productid}`);