Colin's Blog
자바스크립트 Local Storage를 이용한 가계부 애플리케이션 개발

가계부 애플리케이션

소개

가계부는 우리의 소비와 수입을 기록하는 중요한 도구입니다. 이전에는 종이 가계부를 사용했지만, 최근에는 디지털 형태로 가계부를 관리하는 것이 인기를 얻고 있습니다. 이 튜토리얼에서는 자바스크립트 Local Storage를 사용하여 간단한 가계부 애플리케이션을 개발하는 방법을 알아보겠습니다.

필요한 도구

이 튜토리얼을 따라하기 위해 다음 도구를 설치해야 합니다.

개발 단계

1. HTML 구조 생성

먼저, 가계부 애플리케이션의 기본적인 HTML 구조를 생성해야 합니다. 다음은 간단한 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <title>가계부 애플리케이션</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>가계부</h1>
        <form id="expense-form">
            <div class="form-group">
                <label for="title">제목</label>
                <input type="text" class="form-control" id="title">
            </div>
            <div class="form-group">
                <label for="amount">금액</label>
                <input type="number" class="form-control" id="amount">
            </div>
            <button type="submit" class="btn btn-primary">추가</button>
        </form>
        <div id="expense-list"></div>
    </div>

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

위 코드는 Bootstrap을 사용하여 애플리케이션의 기본 UI를 구성합니다. 추가하기 버튼을 클릭하면 자바스크립트 코드에서 데이터를 처리하도록 설정됩니다.

2. JavaScript 코드 작성

이제, Local Storage를 사용하여 데이터를 저장하고 검색할 수 있는 JavaScript 코드를 작성해야 합니다. 아래는 예시 코드입니다.

// Local Storage에서 가계부 항목을 가져오는 함수
function getExpenses() {
    let expenses = localStorage.getItem('expenses');
    if (expenses) {
        return JSON.parse(expenses);
    } else {
        return [];
    }
}

// Local Storage에 가계부 항목을 추가하는 함수
function addExpense(title, amount) {
    let expenses = getExpenses();
    expenses.push({ title, amount });
    localStorage.setItem('expenses', JSON.stringify(expenses));
}

// 화면에 가계부 항목을 표시하는 함수
function renderExpenses() {
    let expenses = getExpenses();
    let expenseList = document.getElementById('expense-list');
    expenseList.innerHTML = '';

    expenses.forEach((expense) => {
        let div = document.createElement('div');
        div.innerHTML = `<h3>${expense.title}</h3><p>${expense.amount}</p>`;
        expenseList.appendChild(div);
    });
}

// 추가 버튼 클릭 시 동작하는 이벤트 리스너
document.getElementById('expense-form').addEventListener('submit', (e) => {
    e.preventDefault();
  
    let title = document.getElementById('title').value;
    let amount = document.getElementById('amount').value;
  
    addExpense(title, amount);
    renderExpenses();
  
    document.getElementById('title').value = '';
    document.getElementById('amount').value = '';
});

// 초기 실행 시 화면에 저장된 가계부 항목 표시
renderExpenses();

위의 코드는 Local Storage에서 가계부 항목을 가져오고 추가하는 함수들을 포함하고 있습니다. 또한, renderExpenses 함수는 화면에 가계부 항목을 표시합니다. 마지막으로, submit 이벤트 리스너로 추가 버튼을 클릭할 때 데이터를 처리하는 로직을 작성합니다.

마무리

위의 단계를 따라가면 자바스크립트 Local Storage를 이용하여 간단한 가계부 애플리케이션을 개발할 수 있습니다. 이제 사용자는 가계부 항목을 추가하고 저장할 수 있고, 저장된 항목은 다시 화면에 표시됩니다. 이를 통해 소비와 수입을 관리하는 데 도움이 될 것입니다.

#가계부 #자바스크립트

© 2018 Colin. All rights reserved.