필수 실무 케이스로 배우는 Javascript 핵심 문법

여기서는 로컬 스토리지(Local Storage)를 사용하여 데이터를 관리하고, 이를 기반으로 표(table)를 만들어 보겠습니다. 로컬 스토리지에 저장된 데이터를 동적으로 표에 표시하는 예제를 나열해 보겠습니다.

1. 로컬 스토리지에 데이터 저장하기
   • 사용자가 입력한 정보를 로컬 스토리지에 저장합니다.

// key-value pairs를 사용하여 데이터 저장
localStorage.setItem('key', 'value');

2. 저장된 데이터 읽기
   • 로컬 스토리지에서 저장된 데이터를 읽어옵니다.

// 저장된 데이터 가져오기
const value = localStorage.getItem('key');
console.log(value); // 'value'라는 문자열이 출력됩니다.

3. 저장된 데이터 전체 읽고 처리하기
   • localStorage 객체에서 key를 통해 모든 저장된 데이터에 접근합니다.

// 모든 key를 가져오고, 각 key에 대한 value를 처리
for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    // value를 기반으로 HTML table에 표시
    const tableRow = document.createElement('tr');
    const tableData = document.createElement('td');
    tableData.textContent = value;
    tableRow.appendChild(tableData);
    // ... 추가적인 DOM 조작을 통해 표를 완성
}

4. 동적인 데이터로 표 생성하기
   • JSON 형식의 데이터를 로컬 스토리지에 저장한 후, JavaScript를 사용하여 해당 데이터를 읽어서 HTML 표(table)로 변환합니다.

// JSON 형식의 데이터를 문자열로 저장 (예: JSON.stringify(data))
localStorage.setItem('items', JSON.stringify(items));

// 읽어서 처리
const storedData = localStorage.getItem('items');
const items = JSON.parse(storedData); // JSON 문자열을 JavaScript 객체로 변환

// DOM에 표를 동적으로 생성
const table = document.createElement('table');
for (const item of items) {
    const row = table.insertRow();
    for (const key in item) {
        const cell = row.insertCell();
        const textNode = document.createTextNode(item[key]);
        cell.appendChild(textNode);
    }
}
document.body.appendChild(table);

5. 추가적인 기능
   • 데이터 추가, 수정, 삭제 등의 기능을 UI 요소를 통해 구현합니다.
   • 사용자가 입력한 새로운 데이터를 로컬 스토리지에 저장하고, 표를 갱신하는 기능을 구현합니다.

// 데이터 추가
function addItem(key, value) {
    const items = JSON.parse(localStorage.getItem('items')) || [];
    items.push({ key, value });
    localStorage.setItem('items', JSON.stringify(items));
    refreshTable(); // 표를 갱신하는 함수 호출
}

// 표 갱신하는 함수
function refreshTable() {
    const table = document.querySelector('table');
    table.innerHTML = ''; // 기존의 표 초기화
    // ... (위에서 설명한 동일한 방식으로 새로운 데이터를 표에 추가)
}

6. 스타일링과 레이아웃
   • HTML table을 CSS로 스타일링하고, 필요에 따라 Bootstrap 또는 다른 UI 프레임워크를 사용하여 레이아웃을 개선합니다.

table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 8px;
    text-align: left;
}

이러한 단계를 통해 로컬 스토리지에 저장된 데이터를 기반으로 동적인 HTML 표를 만들고, 사용자가 상호작용할 수 있는 UI를 구성할 수 있습니다.