JavaScript 배열과 객체 마스터하기 - 개인 재무 추적기 구축

소개

이 Lab 에서는 Alex 가 기술 스타트업의 웹 개발자로서 겪는 여정을 계속 따라갑니다. 장면은 개발팀의 작업 공간에서 펼쳐지며, Alex 는 여러 재무 기록을 처리할 수 있는 기능을 통합하여 개인 재무 추적기를 개선하는 임무를 맡습니다. 이 중요한 기능은 Alex 가 JavaScript 의 배열과 객체를 깊이 파고들어 각 재무 기록을 배열 내의 객체로 저장해야 합니다. 목표는 사용자의 재무 데이터를 효율적으로 추적하고 정리하는 동적이고 상호 작용적인 애플리케이션을 만드는 것입니다. 이 노력을 통해 Alex 는 사용자에게 재무 활동에 대한 명확한 개요를 제공하여 앱을 더욱 유용하고 매력적으로 만들고자 합니다.

이 Lab 에서는 배열과 객체를 조작하여 회계 기록을 저장해야 합니다. 초점은 배열을 사용하여 객체를 저장하는 방법과 배열에 새로운 요소를 추가하는 방법을 이해하는 것입니다.

지식 포인트:

배열 조작 (생성, 순회, 요소 추가)
객체 (객체 생성, 속성 접근 및 설정)

함수

이 Lab 에서는 개념을 이해하는 데 도움이 되는 몇 가지 기본적인 JavaScript 코드 조각을 포함합니다. 이러한 코드 조각은 브라우저 콘솔 또는 Node.js 환경에서 실행할 수 있습니다.

웹 페이지에서 마우스 오른쪽 버튼을 클릭하고 "검사 (Inspect)"를 선택하거나 F12를 눌러 브라우저 콘솔을 엽니다.
터미널에서 node 명령을 실행하여 Node.js 환경을 엽니다.

함수 (Function)

JavaScript 에서 함수는 작업을 수행하거나 값을 계산하도록 설계된 코드 블록입니다. 함수는 function 키워드를 사용하여 정의됩니다.

function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("Alice")); // output: "Hello, Alice!"

여기서 greet 함수는 매개변수 name을 받아 인사를 반환합니다.

화살표 함수 (Arrow Function)

ES6 에 도입된 화살표 함수는 함수를 더 간결하게 작성하는 방법을 제공합니다. 익명 함수 표현식에 특히 유용합니다.

const greet = (name) => "Hello, " + name + "!";
console.log(greet("Bob")); // output: "Hello, Bob!"

화살표 함수는 현재 컨텍스트의 this 값을 자동으로 바인딩하며, 콜백 함수 및 메서드 체이닝에 유용합니다.

배열 연산

JavaScript 에서 배열은 여러 값을 저장하는 데 사용되는 객체입니다.

배열 생성 (Creating an Array)

let fruits = ["Apple", "Orange", "Cherry"];

JavaScript 배열은 0 부터 시작하는 인덱스를 사용합니다. 배열의 첫 번째 요소는 인덱스 0 에, 두 번째 요소는 인덱스 1 에 있으며, 마지막 요소는 배열의 length 속성 값에서 1 을 뺀 값에 있습니다.

각 인덱스는 고유한 배열 요소에 해당합니다.

Array index element relationship

그렇다면 배열의 요소를 어떻게 읽을까요?

배열 순회 (Traversing an Array)

forEach 메서드를 사용하여 배열을 순회합니다.

forEach 메서드는 value와 index의 두 가지 매개변수를 사용하는 콜백 함수를 사용합니다.

예를 들어, fruits 배열의 각 요소를 로그에 기록하려면 다음과 같이 합니다.

fruits.forEach(function (value, index) {
  console.log(index, value);
});

Array traversal with forEach

요소 추가 (Adding Elements)

push 메서드를 사용하여 배열의 끝에 요소를 추가합니다.

예를 들어, 포도를 fruits 배열에 추가해 보겠습니다.

fruits.push("Grape");
console.log(fruits);

Adding element to array

객체 (Objects)

객체는 JavaScript 의 기본적인 구성 요소이며, 키 - 값 쌍을 저장하는 데 사용됩니다.

객체 생성 (Creating an Object)

let person = {
  name: "Alice",
  age: 30
};

속성 접근 및 설정 (Accessing and Setting Properties)

점 (.) 또는 대괄호 ([]) 표기법을 사용하여 객체 속성에 접근할 수 있습니다.

console.log(person.name); // Using dot notation

person["age"] = 31; // Using bracket notation to set a property
console.log(person.age);

JavaScript object properties example

배열과 객체의 기본적인 사용법을 이해했으니, 프로젝트의 코드를 개선해 보겠습니다.

재무 기록 생성 및 저장

이 단계에서는 Alex 와 함께 배열 내 객체로 재무 기록을 저장하기 위한 구조를 만들 것입니다. 이 설정은 재무 추적기의 데이터 관리 시스템의 중추를 형성하여 재무 기록의 동적 업데이트 및 조작을 가능하게 합니다.

먼저, 재무 기록이 어떻게 생겼는지 정의해 보겠습니다. 각 기록은 설명, 금액 및 유형 (수입 또는 지출) 을 갖습니다. script.js를 열고 이러한 기록을 보관할 배열을 생성하는 것으로 시작합니다.

let records = [];

다음으로, 이 배열에 새 기록을 추가하는 함수를 만듭니다. 각 기록은 객체가 됩니다.

const addRecord = (description, amount, type) => {
  records.push({ description, amount, type });
};

아직 제출을 기다리는 함수를 완성하지 않았기 때문에 페이지에서 아무것도 볼 수 없습니다.

~/project/script.js에서 "Add" 버튼을 클릭했을 때 상호 작용을 감지하기 위해 form.addEventListener("submit", (e) => {})를 정의합니다.

// Event listener for form submission to add a new record
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const description = document.getElementById("description").value;
  const amount = document.getElementById("amount").value;
  const type = document.getElementById("type").value;
  addRecord(description, amount, type);
});

Event 인터페이스의 preventDefault() 메서드는 이벤트가 명시적으로 처리되지 않으면 기본 동작이 평소처럼 수행되지 않도록 사용자 에이전트에게 알립니다.
HTMLDataElement 인터페이스의 value 속성은 HTML 속성 값을 반영하는 문자열을 반환합니다.

이 시점에서 addRecord 함수를 추가하고 console.log(records);를 추가하면 기록에 추가된 데이터가 기록에 기록되는 것을 볼 수 있습니다.

원장에 추가된 기록을 표시하려면 renderRecords 함수를 만들어야 하지만, 그 전에 템플릿 문자열에 대해 알아야 합니다.

템플릿 문자열 (Template String)

템플릿 문자열은 백틱 (`)을 사용하여 정의되며, ${expression} 형식의 자리 표시자를 포함할 수 있습니다. 여기서 expression은 유효한 JavaScript 표현식일 수 있습니다.

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, Alice!

Template string example code

변수 삽입 (Variable Interpolation)

템플릿 문자열은 변수 값을 문자열에 편리하게 삽입하여 동적 문자열 정보 구성을 단순화합니다.

let age = 25;
let message = `She is ${age} years old.`;
console.log(message); // Output: She is 25 years old.

Variable interpolation example

여러 줄 문자열 처리 (Handling Multi-line Strings)

기존 JavaScript 에서는 여러 줄 문자열을 처리하려면 종종 백슬래시 또는 문자열 연결을 사용해야 합니다. 템플릿 문자열은 여러 줄 텍스트를 처리하는 더 간결한 방법을 제공합니다.

let poem = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;
console.log(poem);

Multi line string example

재무 기록 표시

이제 Alex 가 재무 기록을 저장하는 방법을 설정했으므로 다음 단계는 이러한 기록을 웹 페이지에 동적으로 표시하는 것입니다. 재무 기록 배열을 반복하고 각 기록을 재무 추적기의 UI 의 일부로 표시하는 방법을 배우게 됩니다.

그런 다음, script.js에서 이러한 기록을 렌더링하는 함수를 만듭니다.

const renderRecords = () => {
  recordsList.innerHTML = "";
  records.forEach((record, index) => {
    const recordElement = document.createElement("div");
    recordElement.classList.add("record-item");
    recordElement.innerHTML = `
                ${record.description} - ${record.amount} (${record.type}) <button onclick="deleteRecord(${index})">Delete</button>
            `;
    recordsList.appendChild(recordElement);
  });
};

테스트 기록을 추가한 후, renderRecords를 호출하여 페이지에 표시되는지 확인합니다.

renderRecords();

이 함수는 financialRecords 배열을 반복하여 각 기록에 대해 새 단락을 만들고 웹 페이지의 지정된 컨테이너에 추가합니다.

요약

이 랩에서, 여러분은 Alex 를 따라 개인 재무 추적기를 강력한 애플리케이션으로 만드는 데 중요한 진전을 이루었습니다. 배열과 객체를 사용하는 법을 배움으로써, 앱이 여러 재무 기록을 동적으로 저장하고 표시할 수 있게 되었습니다. 이는 앱의 기능을 향상시킬 뿐만 아니라 웹 개발의 중요한 기술인 JavaScript 에서 복잡한 데이터 구조를 관리하는 방법을 소개합니다.

이러한 실습 경험을 통해 배열과 객체가 의미 있는 방식으로 데이터를 구성하고 조작하기 위해 어떻게 함께 작동할 수 있는지 확인했습니다. 이 기본적인 지식은 앞으로의 개발 여정에서 상호 작용 및 데이터 지속성과 같은 추가적인 개선을 위한 기반을 마련합니다.