엘리스 SW 엔지니어 트랙 9주차 (팀프로젝트 카테고리 별 데이터 불러오기)

팀원분께서 만드신 상단 nav바를 연결했고, nav바의 상단 카테고리별로 제품 데이터를 불러와야한다.
처음에는 이벤트 리스너를 통해 해당 카테고리 class를 가지고 있는 a태그를 누를 때마다 해당 데이터를 불러오게 하려고 했다. 하지만 카테고리로 이동하고, 데이터는 불러와지지 않아 텅 빈 제품 페이지만 자꾸 나왔었고, 이 문제 또한 해결하기 위해 한참동안 구글링, 스택오버플로우에 질문까지 올렸었는데, 결론적으로 해결방법은 이전에 사용했었던 쿼리스트링을 한번 더 사용하는 것이다.

<ul>
 	<li class="product-list"><a href="../list/list.html?c=MUG" class="mug-list">MUG & CUP</a></li>
	<li class="product-list"><a href="../list/list.html?c=TUMBLER" class="tumbler-list">TUMBLER & BOTTLE</a></li>
	<li class="product-list"><a href="../list/list.html?c=TEA" class="tea-list">TEA-WARE</a></li>
</ul>

nav바 링크 주소를 작성할 때 카테고리별 키값을 추가해주었다.

const category = new URLSearchParams(window.location.search).get("c");
const productListUrl = `${URI}/api/product/list?category=${category}`;

위는 제품 페이지 자바스크립트 파일에 추가한 코드다. 이전과 비슷하게 키값을 추출했고, 서버에서 데이터를 불러오는 값 마지막에 해당 키값을 넣어 불러올 수 있도록 했다.
해결완료!