[작품] - REST API를 사용해서 동적 페이지 만들기

이 내용을 보기 전에 아래의 링크들을 먼저 학습한 후 본다면 도움이 될 것이다.

2023.03.25 - [Javascript] - [JavaScripte] - Fetch란?

[JavaScripte] - Fetch란?

2023.03.25 - [Javascript] - [프론트엔드] - JSON Server 이용해서 postman 사용하기

[프론트엔드] - JSON Server 이용해서 postman 사용하기

 

이번 시간에는 백엔드DB안에 있는 데이터들을 프론트엔드 화면에 뿌려주는 방법에 대해 배워 보겠습니다.

위의 내용을 다 학습했다면 시작하겠습니다. 

제가 구현 할 목표는 백엔드DB에 저장된 가게의 수 만큼 메인페이지에 가게 목록을 만드는 것입니다. 그리고 각각의 가게들을 클릭을 하면 그 정보에 맞는 가게 페이지가 나오게 하는 것 이였다.

---

1. 가게 목록 나타내기

const Store_Zone = document.querySelector(".Store_Zone");

// db의 데이터를 가져와서 가게 리스트들을 나열
fetch("http://localhost:4000/mainpage")
.then(res=>{
    return res.json();
})
.then(data=>{
    storeList(data);
})
.catch(error=>{
    console.log(error);
});

function storeList(data){
  for(let i=0;i<data.length;i++){
    let adminCafe = data[i].adminCafe;
    let intro = data[i].storeIntroduce; 
    let addr = data[i].addressName;
    let stores = document.createElement("div");
    stores.setAttribute("class","store");
    stores.setAttribute("value",i+1);
    stores.innerHTML = `<div class="Sign" onclick=location.href="/JoJinHyeong/Store_info/store.html">
      <div class="Store_Sign">
        <div class="Store_Image"></div>
        <div class="Store_Name">
          <h4 class="Store_Title">"${adminCafe}"</h4>
          <p class="detail">"${intro}"</p>
          <div class="rating">
            <span class="Star">⭐</span>
            <span class="Star_Rating">4.5</span>
            <span class="Review_Rating">(412)</span>
          </div>
          <span class="tags">연어 및 각종 일식</span><br>
          <span class="address">"${addr}"</span>
        </div>
      </div>
    </div>`;
    Store_Zone.appendChild(stores);
  }
}

가게 목록을 나타내는 것은 어렵지 않았다. fetch의 get방식을 사용해서 api정보들을 불러온 다음, 요청이 성공했을 때 storeList함수를 부르는 방식이다. storeList함수 안에는 각각의 가게 div을 만드는 방법이 있다.

몇개의 리스트를 만들껀지 for문을 통해 나타내 준다.(저는 3개 밖에 안되기 때문에 모든 배열을 돌았습니다)

바꾸려는 데이터를 가져와서 변수로 만들어 준다. 그리고 원하는 자리에 넣으면 성공!

다만 똑같은 div박스를 만들더라도 나중에 각각의 박스들을 구분할 수 있게 value값은 다르게 줘야 합니다.

[
    {
        "adminNo": 1,
        "adminCafe": "성결대학교",
        "guName": "만안구",
        "addressName": "성결대학교 만안구 구구구 123",
        "clty_loc": null,
        "storeIntroduce": "환영합니다 현식돈국수입니다",
        "foodType": "한식",
        "savedNm": "Storeimage1.jpg",
        "openingTime": "09:00:00",
        "closingTime": "21:00:00",
        "weekday": 1234,
        "storePhone": "031-1234-4566",
        "latitude": 126.92883626779027,
        "longitude": 37.37989691469408,
        "menuList": null
    },
    {
        "adminNo": 2,
        "adminCafe": "현식돈국수",
        "guName": "강서구",
        "addressName": "서울 강서구 마곡동 785-2",
        "clty_loc": null,
        "storeIntroduce": "안녕하세요 현식돈국수입니다.",
        "foodType": "분식",
        "savedNm": "Storeimage2.png",
        "openingTime": "09:00:00",
        "closingTime": "20:00:00",
        "weekday": 123,
        "storePhone": "011-1234-4566",
        "latitude": 127.0243,
        "longitude": 37.5434,
        "menuList": null
    },
    {
        "adminNo": 3,
        "adminCafe": "안양현식",
        "guName": "만안구",
        "addressName": "안양대학교 구구구 123",
        "clty_loc": null,
        "storeIntroduce": "어서오세요 안양현식",
        "foodType": "중식",
        "savedNm": "Storeimage3.png",
        "openingTime": "08:00:00",
        "closingTime": "19:00:00",
        "weekday": 123456,
        "storePhone": "014-1234-4566",
        "latitude": 126.92042079261175,
        "longitude": 37.391462944015544,
        "menuList": null
    }
]

 저희는 테스트를 위해 DB안에 3개의 가게정보들을 넣은 상태다.

이렇게 하면 가게 리스트들이 나오는 것을 볼 수 있다.

2. 클릭했을 때 원하는 페이지 렌더링

//mainpage/storeList.js

stores.onclick = function(event){
      const selectedValue = stores.getAttribute("value");
      sessionStorage.setItem("selectedValue", selectedValue);
      location.href="/JoJinHyeong/Store_info/store.html";
};

이 함수가 해당 페이지가 눌렸을 때 그 페이지로 이동하게 도와주는 역할을 한다. 아까 각각의 리스트마다 value값을 다르게 줘서 구분해 준 것을 쓰면 된다. 나는 여기서 sessionStorage를 써서 브라우저에 값을 저장해 두었다. 여기서 저장해둔 값을 다른 불러 올려는 JS 파일에 변수 값으로 넣어줬다.

//Store_Info/createStore.js

const value = sessionStorage.getItem("selectedValue");

내가 불러올려는 api는 adminNo의 값에 따라 페이지가 달라진다. 따라서 이 값을 쿼리스트링의 값으로 넣을 것이다. 

const url = `http://localhost:4000/store?adminNo=${value}`;

이러면 다 완성이 됐다. 

이전 페이지에서 불러온 value값을 sessionStorage에 넣어서 현재 페이지에서 쓴다고 보면 쉽게 이해가 될 것이다.

---

완성 코드

const value = sessionStorage.getItem("selectedValue");

const storeName = document.querySelector(".storeName");
const storeIntro = document.querySelector(".storeIntro");
const addr = document.querySelector(".AddressInfo");
const category1 = document.querySelector(".Menu1");
const menuName1 = document.querySelector(".MenuName1");
const menuName2 = document.querySelector(".MenuName2")
const menuPrice1 = document.querySelector(".MenuPrice1");
const menuPrice2 = document.querySelector(".MenuPrice2");


const url = `http://localhost:4000/store?adminNo=${value}`;
fetch(url)
.then((res)=>{
    return res.json()
})
.then((data)=>{
    renderPage(data);
})
.catch((err)=>console.log(err))

function renderPage(data){
    console.log(data[0]);
    storeName.innerHTML=`${data[0].adminCafe}`
    storeIntro.innerHTML=`${data[0].storeIntroduce}`
    category1.innerHTML=`${data[0].categories[1].categoryName}`
    menuName1.innerHTML=`${data[0].categories[1].menuList[0].menuName}`
    menuPrice1.innerHTML=`${data[0].categories[1].menuList[0].menuPrice}`
    menuName2.innerHTML=`${data[0].categories[1].menuList[1].menuName}`
    menuPrice2.innerHTML=`${data[0].categories[1].menuList[1].menuPrice}`
}

현재는 가게 이름이랑 소개글 정도만 바꾼 거라서 완벽히 다 바꾸진 못했다.

---

느낀점

이 문제를 보고 저는 메인 페이지에 가게 목록을 나오게 하는것은 for문을 통해 나타내면 되고 각각의 가게 목록들을 생성할 때마다 고유의 value값을 줘서 이 값을 export하면 될 것이라고 생각했다. 하지만 export,import를 하기 위해선 module에 대해 알아야 했으며 사용 방법에 대해서도 공부하는 계기가 되었다. 비록 진짜 구현에서는 필요한 방법이 아니였으나 이 과정에서 새로운 개념을 배웠다는 것이 만족스러웠다. 그리고 나는 HTML에 작성한 자바스크립트 파일의 순서가 잘 못된 줄 알고 HTML렌더링 과정에 대해서도 공부하였다.  

해결하는 과정에서 많은 것을 배웠고 처음으로 동적 페이지를 만들었다는 것에 기뻣다.