728x90
상품 상세나 카트가 추가되면서 경로가 꽤 많아졌다.
효과적인 js파일들 관리를 위해 index.html이라는 하나의 html파일의 콘텐츠 컨네이너 안에서 상품 콘텐츠나 카트 콘텐츠 같은 것들이 바뀌도록 구성을 했는데, 이렇게하다보니 문제가 해당 경로로 갔을 때 새로고침을 하면 에러가 발생했다. 경로를 다시 불러들이면서 발생한 에러인듯했다.
따라서 해당 경로를 다시 불러들일 때 거기에 맞는 해당 경로에 맞는 함수를 실행시켜서 문제가 안생기도록 세팅을 했다.
일단 public파일들의 라우팅 처리를 해주는 코드 경로 설정을 추가해주었다.
여기서 product/* 라고 설정되어있으면 product 다음에 어떤 경로가 더 있든 index.html로 보내준다는 뜻이다.
//상품 페이지
apiRouter.get('/product/*', (req, res) => {
res.sendFile(path.join(__dirname, '../public', 'index.html'));
});
//카트
apiRouter.get('/cart', (req, res) => {
res.sendFile(path.join(__dirname, '../public', 'index.html'));
});
다음은 index.html의 윈도우가 로드될 때의 함수.
window.onload = function () {
const path = window.location.pathname;
if (path === "/" || path === "/product") {
getProducts(page = 1); //상품 페이지
} else if (path.startsWith("/product/")) {
const productId = path.split("/")[2];
getProductDetail(productId); //상품 디테일 페이지
} else if (path === "/cart") {
getCartPage(); // 카트 페이지
}
}
이렇게 path 경로를 지정해주고 거기에 맞다면 함수를 실행시킨다.
상품 상세페이지의 경우는 주소가 /product/:id로 요청이 가기 때문에 product 뒤에 추가적인 경로가 붙는다. 이 부분을 인식해서 함수를 실행해야하기 때문에 startsWith("/product/")라는 조건을 넣어서 /product/ 로 시작하는 경로를 찾아낸 후 split이라는 기능을 이용해서 /로 나눠진 부분 중 [2], 즉 3번째 배열 값을 가져오는데 지금의 경우 /product/:id 이기 때문에 :id 값을 가져올 수 있다.
그 아이디 값을 이용해서 함수를 실행하면 됨.
'나의 개발 일지' 카테고리의 다른 글
| 간편한 방식의 웹컴포넌트 사용기. (2) | 2024.11.10 |
|---|---|
| 프론트엔드 페이지 라우팅 정리 - window.addEventListener("DOMContentLoaded"), window.addEventListener("popstate") (1) | 2024.11.10 |
| 장바구니 기능 구현 - javaScript + node.js (0) | 2024.11.02 |
| 수정과 삭제 기능 - URL에 params(path parameter)로 api 요청하고 응답받기 (0) | 2024.10.30 |
| 페이지네이션 기능 - URL에 query string 붙여서 요청과 응답 해보기 (2) | 2024.10.27 |