자바스크립트 객체 데이터 저장 방법

자바스크립트는 객체지향 프로그래밍 언어로, 데이터를 객체 형태로 저장하고 관리할 수 있습니다. 이번 포스트에서는 자바스크립트에서 객체 데이터를 저장하는 방법에 대해 알아보겠습니다.

1. 변수에 객체 데이터 저장하기

가장 간단한 방법은 변수에 객체 데이터를 저장하는 것입니다. 이때 객체를 생성하고 변수에 할당합니다.

const person = { 
  name: 'John', 
  age: 30, 
  profession: 'Developer' 
};

위의 예시에서 person은 객체 변수명이며, 중괄호({}) 안에 키(key)와 값(value) 쌍으로 데이터를 저장합니다.

2. 배열에 객체 데이터 저장하기

배열은 여러 개의 객체 데이터를 순서대로 저장할 수 있는 자료구조입니다. 객체 데이터를 배열에 저장하고자 한다면, 배열에 객체를 추가하면 됩니다.

const fruits = [
  { name: 'Apple', color: 'Red' },
  { name: 'Banana', color: 'Yellow' },
  { name: 'Orange', color: 'Orange' }
];

위의 예시에서 fruits는 배열 변수명이며, 각 객체 데이터는 중괄호({})로 표현되고 배열 안에 ,로 구분됩니다.

3. JSON 형식으로 객체 데이터 저장하기

JSON(JavaScript Object Notation)은 객체 데이터를 문자열 형태로 표현하는 형식입니다. 자바스크립트에서 객체 데이터를 다른 시스템에 전송하거나 저장할 때 많이 사용됩니다.

const person = { 
  name: 'John', 
  age: 30, 
  profession: 'Developer' 
};

const jsonPerson = JSON.stringify(person);

위의 예시에서 JSON.stringify() 함수를 사용하여 자바스크립트 객체를 JSON 문자열로 변환합니다. 이렇게 변환된 JSON은 다른 시스템으로 전송하거나 로컬 스토리지에 저장할 수 있습니다. JSON 데이터를 다시 자바스크립트 객체로 변환하는 방법은 JSON.parse() 함수를 사용하면 됩니다.

const person = JSON.parse(jsonPerson);

4. 데이터베이스에 객체 데이터 저장하기

만약 큰 규모의 데이터를 저장하거나 데이터를 오래 보관해야 한다면, 로컬 스토리지 대신 데이터베이스를 사용하는 것을 고려해볼 수 있습니다. 자바스크립트에서는 IndexedDB, Firebase, MongoDB 등 다양한 데이터베이스 기술을 이용할 수 있습니다.

이번 포스트에서는 IndexedDB를 사용한 예시를 보여드리겠습니다.

// 데이터베이스 열기
const request = window.indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
    console.log('Database error: ' + event.target.errorCode);
};

request.onsuccess = function(event) {
    const db = event.target.result;

    // 객체 스토어에 객체 데이터 저장
    const transaction = db.transaction(['people'], 'readwrite');
    const objectStore = transaction.objectStore('people');
    const person = { name: 'John', age: 30, profession: 'Developer' };
    const request = objectStore.add(person);

    request.onsuccess = function(event) {
        console.log('Data saved');
    };

    transaction.oncomplete = function(event) {
        console.log('Transaction completed');
        db.close();
    };
};

위의 예시에서는 IndexedDB를 이용하여 myDatabase라는 이름의 데이터베이스를 열고, people이라는 객체 스토어에 객체 데이터를 저장합니다. 데이터를 추가하기 위해 add() 메소드를 사용하며, 트랜잭션을 사용하여 데이터베이스 작업을 완료합니다.

이렇게 자바스크립트에서 객체 데이터를 저장하는 다양한 방법을 알아보았습니다. 각각의 방법은 상황에 따라 적절하게 선택하여 사용하면 됩니다.