웹 저장소 마스터하기: 세션 간 데이터 유지

소개

이 Lab 에서는 활기찬 기술 스타트업에서 웹 개발자로 일하며 데이터 지속성 영역으로 진출하려는 의지가 강한 Alex 와 함께합니다. 개인 재무 추적기에서 재무 기록을 추적하고 표시하는 메커니즘을 성공적으로 만든 후, 다음 과제는 이러한 기록이 브라우저 세션 간에 유지되도록 하는 것입니다. 목표는 사용자가 앱으로 돌아와 이전에 입력한 모든 데이터를 그대로 찾을 수 있도록 하여 앱의 사용성과 사용자 만족도를 향상시키는 것입니다. 이 작업은 Alex 에게 웹 스토리지 개념을 소개하며, 특히 localStorage API 를 활용하여 애플리케이션의 상태를 저장하고 검색하는 방법을 배우게 됩니다.

이 Lab 에서는 localStorage를 사용하여 사용자의 브라우저에 데이터를 로컬로 저장하는 방법을 배우고, 이를 통해 웹 애플리케이션에서 데이터 지속성을 구현하는 방법을 배우게 됩니다.

지식 포인트:

localStorage 사용법
JSON 직렬화 및 역직렬화 (JSON.stringify, JSON.parse)

LocalStorage

localStorage는 클라이언트 측에 세션 데이터를 저장하는 메커니즘을 제공하며, 일반적으로 5MB 정도의 저장 공간 제한이 있습니다. 세션 스토리지 (sessionStorage) 와 달리, localStorage의 데이터는 세션이 종료되어도 사라지지 않습니다.

데이터 저장

setItem() 메서드를 사용하면 localStorage에 데이터를 저장할 수 있습니다. 이 메서드는 두 개의 매개변수를 받습니다: 키와 값입니다.

예를 들어:

localStorage.setItem("username", "Alice");

데이터 검색

getItem() 메서드는 localStorage에서 데이터를 읽는 데 사용됩니다. 이 메서드는 하나의 매개변수를 받습니다: 키입니다.

예를 들어:

localStorage.setItem("username", "Alice");
let username = localStorage.getItem("username");
console.log(username); // Outputs: Alice

localStorage data storage example

LocalStorage 에 기록 저장하기

이 단계에서는 Alex 와 함께 새로운 기록이 추가될 때마다 재무 기록 배열을 localStorage에 저장하는 기능을 구현합니다. 이렇게 하면 사용자의 데이터가 장치에 로컬로 저장되어 브라우저를 닫거나 새로 고친 후에도 사용할 수 있습니다.

script.js의 시작 부분에서 addFinancialRecord 함수를 정의하기 전에, 저장된 기록을 localStorage에서 로드하고 financialRecords 배열을 초기화하기 위해 다음 코드를 추가합니다.

script.js를 수정하여 localStorage에서 기록을 로드합니다:

document.addEventListener("DOMContentLoaded", function () {
  let records = JSON.parse(localStorage.getItem("records")) || [];
});

JSON.parse() 정적 메서드는 JSON 문자열을 구문 분석하여 문자열로 설명된 JavaScript 값 또는 객체를 구성합니다. 선택적 reviver 함수를 제공하여 반환되기 전에 결과 객체에 대한 변환을 수행할 수 있습니다.

기록 지속성 구현

addRecord 함수에 localStorage에 기록을 저장하는 로직을 추가합니다:

document.addEventListener("DOMContentLoaded", function () {
  const saveRecords = () => {
    localStorage.setItem("records", JSON.stringify(records));
    renderRecords();
  };

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

이제 새로운 재무 기록이 추가될 때마다 localStorage에 저장되어 데이터 지속성을 보장합니다.

다음으로, 회계의 삭제 기능을 구현해야 합니다. 삭제 기능을 작성하기 전에 새로운 배열 연산 메서드를 배워야 합니다.

Splice 메서드 사용법

splice() 메서드는 세 가지 매개변수를 사용할 수 있습니다: 시작 위치, 삭제할 요소의 수, 추가할 새 요소.

구문:

array.splice(start, deleteCount, item1, item2, ...)

start: 배열 변경을 시작할 인덱스.
deleteCount: 제거할 요소의 수. 제거할 요소가 없으면 0 이어야 합니다.
item1, item2, ...: 배열에 추가할 새 요소.

요소 제거

배열에서 요소를 제거하려면 새 요소를 추가할 필요 없이 deleteCount 매개변수를 설정합니다.

let fruits = ["Apple", "Banana", "Cherry", "Date"];
fruits.splice(1, 2); // 인덱스 1 부터 2 개의 요소 제거
console.log(fruits); // 출력: ['Apple', 'Date']

Array splice removing elements

요소 추가

splice()는 또한 요소를 제거하지 않고 배열의 특정 위치에 요소를 추가할 수 있습니다. deleteCount를 0 으로 설정하고 추가할 요소를 지정합니다.

let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(2, 0, "Date"); // 인덱스 2 에 'Date' 추가
console.log(fruits); // 출력: ['Apple', 'Banana', 'Date', 'Cherry']

Adding elements with splice

요소 교체

deleteCount를 설정하고 새 요소를 추가하면 splice()는 요소를 제거하고 추가하여 효과적으로 교체할 수 있습니다.

let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(1, 1, "Date"); // 인덱스 1 의 1 개 요소를 'Date'로 교체
console.log(fruits); // 출력: ['Apple', 'Date', 'Cherry']

Replacing array elements with splice

기록 삭제 기능 추가

기록 삭제 기능을 추가합니다.

script.js 파일에 다음 코드를 작성합니다:

document.addEventListener("DOMContentLoaded", function () {
  window.deleteRecord = (index) => {
    records.splice(index, 1);
    saveRecords();
  };
});

요약

이 랩에서 당신과 Alex 는 개인 재정 추적기 애플리케이션에서 데이터 지속성 문제를 해결했습니다. localStorage API 사용법을 배우면서 브라우저 세션 간에 재무 기록을 저장하고 검색할 수 있게 되어 사용자 경험이 크게 향상되었습니다. 웹 저장소에 대한 이러한 소개는 더 복잡하고 사용자 친화적인 웹 애플리케이션을 만들 수 있는 새로운 가능성을 열어줍니다.

실습을 통해 JSON.stringify를 사용하여 데이터를 문자열 형식으로 직렬화하여 저장하고, JSON.parse를 사용하여 다시 JavaScript 객체로 역직렬화하여 검색하는 방법을 살펴보았습니다. 이 프로세스는 클라이언트 측 웹 개발에서 애플리케이션 상태를 관리하는 데 매우 중요하며, 향후 웹 개발 프로젝트에 도움이 될 기본적인 기술을 형성합니다.

데이터 저장 및 검색

소개