자바스크립트에서 JSON 데이터를 이용하여 가계부 생성하기

15 Sep 2023

javascript

가계부를 생성하고 관리하는 것은 우리 일상에서 중요한 부분입니다. 이제 자바스크립트를 사용하여 JSON 데이터를 이용하여 간단한 가계부를 생성하는 방법을 알아보겠습니다.

JSON 데이터 생성하기

먼저, 우리는 가계부 항목을 저장할 JSON 데이터를 생성해야 합니다. 다음과 같은 형식을 따르는 JSON 데이터를 생성할 수 있습니다.

{
  "transactions": [
    {
      "date": "2022-01-01",
      "description": "식료품 구매",
      "amount": 10000
    },
    {
      "date": "2022-01-02",
      "description": "전기 요금 납부",
      "amount": 50000
    },
    // 추가적인 거래 항목들...
  ]
}

위의 예시에서는 “transactions”라는 배열 안에 각각의 거래 항목을 객체로 저장하고 있습니다. 각 거래 항목은 “date” (날짜), “description” (설명), “amount” (금액) 속성을 가지고 있습니다.

이제 JSON 데이터를 변수에 저장하여 자바스크립트 코드에서 활용해봅시다.

const ledger = {
  transactions: [
    {
      date: "2022-01-01",
      description: "식료품 구매",
      amount: 10000
    },
    {
      date: "2022-01-02",
      description: "전기 요금 납부",
      amount: 50000
    },
    // 추가적인 거래 항목들...
  ]
};

가계부 항목 출력하기

다음으로, 우리는 가계부에 저장된 거래 항목들을 화면에 출력하는 기능을 구현해야 합니다. 이를 위해서는 HTML과 자바스크립트를 조합하여 동적으로 화면을 생성해야 합니다.

HTML에서 가계부 항목을 출력할 공간을 마련한 후, 자바스크립트를 통해 JSON 데이터를 읽어와 화면에 동적으로 추가해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>가계부</title>
</head>
<body>
  <h1>가계부</h1>
  <div id="ledgerContainer"></div>

  <script src="ledger.js"></script>
</body>
</html>

위의 예시에서는 “ledgerContainer”라는 id를 가진 <div> 요소를 통해 가계부 항목을 출력할 공간을 마련했습니다. 자바스크립트 코드는 “ledger.js” 파일에 작성하도록 했습니다.

// ledger.js 파일

const ledger = {
  transactions: [
    {
      date: "2022-01-01",
      description: "식료품 구매",
      amount: 10000
    },
    {
      date: "2022-01-02",
      description: "전기 요금 납부",
      amount: 50000
    },
    // 추가적인 거래 항목들...
  ]
};

const ledgerContainer = document.getElementById("ledgerContainer");

ledger.transactions.forEach((transaction) => {
  const transactionElement = document.createElement("div");
  transactionElement.innerHTML = `<p>Date: ${transaction.date}</p>
                                 <p>Description: ${transaction.description}</p>
                                 <p>Amount: ${transaction.amount}</p>`;
  ledgerContainer.appendChild(transactionElement);
});

위의 자바스크립트 코드는 JSON 데이터를 반복문을 통해 순회하면서 각 거래 항목별로 <div> 요소를 생성하고 화면에 추가하고 있습니다.

결론

위의 예시를 참고하여, 자바스크립트에서 JSON 데이터를 이용하여 간단한 가계부를 생성하는 방법을 알아보았습니다. 이를 응용하여 사용자의 입력을 받고 추가, 수정, 삭제 등의 기능을 구현할 수도 있습니다.

가계부 관리는 개인이나 가정에서 중요한 역할을 하는데, 자바스크립트와 JSON을 활용하면 효과적으로 이를 관리할 수 있습니다. 추가적인 기능을 구현하고 확장하여 보다 유용한 가계부 애플리케이션을 만들어보세요.

#JSON #자바스크립트 #가계부 #WebDevelopment