엘리스 SW 엔지니어 트랙 9주차 (팀프로젝트 상품 상세페이지 데이터 불러오기)

서버에서 받아온 json 형식 데이터를 토대로 map을 돌려 item들을 나열해두고,item을 클릭했을 때 상세페이지로 넘어가며 해당 item이 가지고 있는 데이터 값을 서버에서 불러오도록 해야한다.

계획은 너무 쉬웠다. 사실 코딩 좀 배운 다른 사람들한테는 너무 쉬운 일이었을지도 모르겠다. 나도 말은 쉬웠지만 이걸 어떻게 구현해야할지 막막하고 감조차 오지 않았다. 하루종일 고민하고 gpt한테도 물어보고(내가 질문을 너무 못했던 탓인지 원하는 답변이 나오지 않았다. 모르는 걸 물어보다 보니, 정확하게 질문하지 못했던 것 같다.)
구글링까지 한참 하고 나서야 제품이 가지고 있는 고유 id값을 queryString으로 주소 값 뒤에 붙여서 보내면 된다는 걸 알아냈다.
팀프로젝트 팀장님께도 이런 방식으로 진행하려고 하는데 어떤지 여쭤봤는데 좋은 방법인 것 같다고 말씀하셨고 어떻게 하는지 또 한참동안 구글링을 하면서 진행했다. (이 작업 하나로 또 밤샘작업을 진행했다....)

 const links = jsonDataData.map(data => `
            <a href="../list-detail/list-detail.html?id=${data._id}" class="item-box">
            <img src="../../assets/product-imgs/${data._id}.jpeg" alt="${data.name}" class="item-image">
            <h5 class="item-name">${data.name}</h5>
            <p class="item-price">${data.price}원<br>(부가세포함)</p>
        </a>
          `);

방법은 정말 간단하기 그지 없었다. 그저 a 태그 뒤에 id값을 id=${data._id} 이거 하나 붙여주면 제품 클릭해서 상세 페이지로 넘어갈 때 id값을 주소 값 뒤에 담아 함께 넘겨준다.

        //현재 URL에서 쿼리 문자열을 추출해서 URLSearchParmas 객체 생성
        const params = new URLSearchParams(window.location.search);
        //객체에서 값만 추출해서 변수 data에 저장
        let data = "";
        for (const value of params.values()) {
            data = value;
        }
        console.log(data)

        //fetch() 메서드에서 http://34.64.252.224/product/detail? 문자열과 URLSearchParmas 객체를 조합해서 요청 URL 생성 및 서버에 요청
        const response = await fetch(`${URI}/api/product/detail?` + new URLSearchParams({ id: data }));

        const jsonData = await response.json();

제품 상세페이지에서 브라우저 URL의 쿼리 값 즉 id 값을 추출하고 추출한 값을 data 변수에 저장했다.
그 다음 fetch() 메서드를 이용하여 http://34.64.252.224/product/detail? 문자열과 URLSearchParams 객체를 조합하여 요청 URL을 생성하고, 서버에 요청을 보냈다.
서버에서 반환한 JSON 데이터를 response.json()을 이용하여 파싱하고, 파싱한 결과를 jsonData 변수에 저장했다.

이렇게 하면 서버에서 해당 id값과 일치하는 json데이터를 받아올 수 있다. 결과적으로 보면 정말 간단할 수도 있지만 밤샘 작업을 하면서 공부하고 작성한 코드였기에 더 값진 코드였던 것 같다.
뿌듯하다.