이 랩에서는 "FinTech Valley"의 활기찬 스타트업 현장을 배경으로, 급성장하는 기술 회사의 재무 추적 시스템을 개선하는 임무를 맡은 신진 소프트웨어 엔지니어 Alex 의 입장이 되어보겠습니다. 회사의 재무팀은 조직의 전반적인 재정 상태를 동적으로 볼 수 있는 방법이 필요합니다. 여러분의 목표는 기존 웹 기반 회계 애플리케이션에 총 수입, 총 지출 및 순 잔액을 계산하고 표시하여 실시간 재무 통찰력을 제공하는 기능을 구현하는 것입니다.
지식 포인트:
JavaScript 의 Array.prototype.filter() 및 Array.prototype.reduce() 메서드는 배열 조작을 위한 강력한 도구로, 데이터 처리를 보다 효율적이고 간결하게 만들어줍니다. 이 메서드는 배열의 요소를 필터링하고 배열 요소의 값을 누적하는 데 사용됩니다.
filter() 메서드는 제공된 함수에 의해 구현된 테스트를 통과하는 모든 요소를 포함하는 새로운 배열을 생성합니다. 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.
구문:
let result = array.filter(function (element, index, array) {
// Test condition
return true; // or false
});element: 배열에서 처리 중인 현재 요소입니다.index (선택 사항): 현재 요소의 인덱스입니다.array (선택 사항): filter가 호출된 배열입니다.예를 들어, 10 보다 큰 숫자를 필터링합니다.
let numbers = [5, 12, 8, 130, 44];
let filtered = numbers.filter(function (number) {
return number > 10;
});
console.log(filtered); // Output: [12, 130, 44]
reduce() 메서드는 배열의 각 요소에 대해 리듀서 함수 (사용자가 제공) 를 실행하여 단일 출력 값을 생성합니다.
구문:
let result = array.reduce(function (
accumulator,
currentValue,
currentIndex,
array
) {
// Return the accumulated result
return accumulator + currentValue;
}, initialValue);accumulator: 콜백의 반환 값을 누적합니다. 마지막 콜백 호출에서 이전에 반환된 누적 값 또는 initialValue (제공된 경우) 입니다.currentValue: 배열에서 처리 중인 현재 요소입니다.currentIndex (선택 사항): 처리 중인 현재 요소의 인덱스입니다.array (선택 사항): reduce가 호출된 배열입니다.예를 들어, 배열의 모든 숫자의 합을 계산합니다.
let numbers = [5, 12, 8, 130, 44];
let total = numbers.reduce(function (accumulator, number) {
return accumulator + number;
}, 0);
console.log(total); // Output: 199
이 두 가지 메서드를 염두에 두고, 다음 단계는 수입과 지출의 총액을 계산하는 것입니다.
이 단계에서는 총 수입, 총 지출 및 잔액을 계산하는 로직을 구현합니다. 여기에는 거래 기록을 반복하고, 수입과 지출을 합산하며, 순 잔액을 계산하는 JavaScript 함수를 추가하는 작업이 포함됩니다.
script.js에 다음을 작성하십시오.
document.addEventListener("DOMContentLoaded", function () {
const updateSummary = () => {
const totalIncome = records
.filter((record) => record.type === "income")
.reduce((acc, record) => acc + parseFloat(record.amount), 0);
const totalExpense = records
.filter((record) => record.type === "expense")
.reduce((acc, record) => acc + parseFloat(record.amount), 0);
const balance = totalIncome - totalExpense;
totalIncomeEl.textContent = `Total Income: ${totalIncome}`;
totalExpenseEl.textContent = `Total Expense: ${totalExpense}`;
balanceEl.textContent = `Balance: ${balance}`;
};
// Function to save records to localStorage and update the UI
const saveRecords = () => {
localStorage.setItem("records", JSON.stringify(records));
renderRecords();
updateSummary();
};
renderRecords();
updateSummary();
});이 JavaScript 함수인 updateSummary는 records 배열에서 총 수입과 지출을 계산하고 잔액을 업데이트합니다. 그런 다음 요약 섹션의 해당 HTML 요소의 텍스트 내용을 업데이트합니다.
이 랩에서는 "FinTech Valley"의 스타트업 회사의 재무 환경을 탐험하는 여정을 시작했습니다. Alex 의 역할을 수행하여 웹 기반 회계 도구를 개선하여 실시간 재무 요약을 제공했습니다. 동적 요약 기능을 통합함으로써 재무 팀이 회사의 재무 상태에 대한 즉각적인 통찰력을 얻을 수 있도록 하여 HTML, CSS 및 JavaScript 를 결합하여 대화형 및 유익한 웹 애플리케이션을 만드는 능력을 보여주었습니다. 이 경험을 통해 JavaScript 를 사용하여 DOM 을 조작하는 방법을 배우고 실제 애플리케이션 개발에 대한 이해도를 높였습니다.
