자바스크립트에서 JSON 데이터를 이용하여 관리자 패널 생성하기

15 Sep 2023

javascript

안녕하세요! 오늘은 자바스크립트를 이용하여 JSON 데이터를 활용하여 관리자 패널을 생성하는 방법을 알아보겠습니다.

JSON이란?

JSON은 JavaScript Object Notation의 약자로, 데이터를 효율적으로 저장하고 전송할 수 있는 경량 데이터 형식입니다. 이를 사용하여 데이터를 구조화하고 전달할 수 있습니다.

관리자 패널 생성하기

HTML 파일을 생성하고 <div> 요소에 관리자 패널을 표시할 준비를 합니다. 예를 들어, 다음과 같은 HTML 코드를 사용할 수 있습니다.

<div id="admin-panel"></div>

JavaScript 파일을 생성하고 다음과 같은 코드를 사용하여 JSON 데이터를 가져옵니다.

const panelData = [
  {
    title: "사용자 관리",
    link: "/admin/users"
  },
  {
    title: "상품 관리",
    link: "/admin/products"
  },
  {
    title: "주문 관리",
    link: "/admin/orders"
  }
];

fetchPanelData()
  .then(data => {
    renderAdminPanel(data);
  })
  .catch(error => {
    console.error("데이터를 가져오는 중 에러가 발생했습니다.", error);
  });

function fetchPanelData() {
  return new Promise((resolve, reject) => {
    // JSON 데이터를 가져오는 비동기 요청
    resolve(panelData);
    // 비동기 요청 예외 처리
    // reject("에러 메시지");
  });
}

JSON 데이터를 받아와 관리자 패널을 생성하는 renderAdminPanel 함수를 작성합니다.

function renderAdminPanel(data) {
  const adminPanelElement = document.getElementById("admin-panel");
  
  data.forEach(item => {
    const linkElement = document.createElement("a");
    linkElement.href = item.link;
    linkElement.innerText = item.title;
    
    adminPanelElement.appendChild(linkElement);
  });
}

실행 결과 확인하기

위의 코드를 실행하면 JSON 데이터를 사용하여 관리자 패널이 생성됩니다. 각 항목은 제목과 링크를 바탕으로 생성되며, 클릭하면 해당 링크로 이동합니다.

이렇게 자바스크립트와 JSON 데이터를 활용하여 관리자 패널을 생성하는 방법에 대해 알아보았습니다. 이를 바탕으로 다양한 기능을 추가할 수 있으니 참고해보세요!

#javascript #JSON