데이터 작업

테이블 시트는 행 단위의 생성(Create), 조회(Read), 수정(Update), 삭제(Delete) 작업을 통해 데이터와 상호작용할 수 있는 기능을 제공합니다. 이러한 작업을 통해 편리하게 수정된 행 데이터를 데이터베이스와 동기화할 수 있습니다.

다음 테이블 시트 클래스 메서드를 통해 행 작업을 수행할 수 있습니다:

아래 GIF는 이러한 행 작업이 실행되는 모습을 보여줍니다.

다양한 동기화 보드

테이블 시트는 데이터 매니저와 연동되어 데이터를 관리합니다. 변경된 데이터를 원격 데이터베이스와 동기화하려면 자동 업데이트 또는 일괄 업데이트 기능을 활성화해야 합니다.

addTable 메서드를 사용할 때 아래 두 가지 중 하나의 동기화 모드를 설정할 수 있습니다:

• autoSync 모드 : 변경 사항을 원격 데이터 소스에 자동으로 실시간 반영하며 데이터 변경이 드물게 발생하는 경우에 적합합니다.

  var myTable = dataManager.addTable("myTable", {
      // ... 다른 설정
      autoSync: true // autoSync 모드 활성화
  });

• batch 모드 : 변경 사항을 수동으로 submitChanges 메서드를 호출하여 원격 데이터 소스에 반영합니다. 데이터가 자주 조작되는 경우에 적합합니다.

  var myTable = dataManager.addTable("myTable", {
      // ... 다른 설정
      batch: true, // batch 모드 활성화
      remote: {
          // ... 다른 설정
          batch: {
              url: BatchApiUrl // api url 특정
          }
      }
  });
  
  // 모든 변경 사항 저장
  tablesheet.submitChanges();
  // 또는 변경 사항 폐기
  tablesheet.cancelChanges();

원격 요청 사용자 정의

테이블 시트는 원격 요청 옵션을 설정하기 위해 사용자 정의 함수를 지원합니다. 기본적으로 테이블 시트는 원격 요청을 객체로 구성하지만, 요청을 직접 처리하고자 할 경우 객체를 함수로 대체할 수 있으며 데이터 변경 사항은 해당 함수에 전달됩니다.

사용자 정의 함수를 사용할 경우, autoSync 및 batch 모드에서 다음과 같은 파라미터를 가집니다:

• autoSync: create, update, delete 함수의 파라미터는 데이터 항목이며, 반환값은 원격에서의 데이터 항목을 포함하는 Promise입니다. read 함수의 반환값은 데이터 항목들을 포함하는 Promise입니다.

• batch: batch 함수의 파라미터는 데이터 변경 사항이며, 함수의 반환값은 원격에서의 성공 정보를 포함하는 Promise입니다.

다음 코드 샘플은 사용자 정의 요청 함수를 생성하고 구현하는 방법을 보여줍니다.

// 사용자 지정 request 함수 
function sendRequest(url, options) {
    options.method = options.method || 'POST';
    options.headers = { 'Content-Type': 'application/json; charset=utf-8' };
    if (options.body) {
        options.body = JSON.stringify(options.body);
    }
    return fetch(url, options).then(resp => {
        if (resp.ok) {
            return resp.json();
        } else {
            throw resp.statusText;
        }
    });
}

//데이터 매니저 생성
var dataManager = spread.dataManager();
myTable = dataManager.addTable("myTable", {
    remote: {
        read: function () {
            return sendRequest(apiUrl, { method: 'GET' });
        },
        update: function (item) {
            return sendRequest(apiUrl, { body: item, method: 'PUT' });
        },
        create: function (item) {
            return sendRequest(apiUrl, { body: item });
        },
        delete: function (item) {
            return sendRequest(apiUrl, { body: item, method: 'DELETE' });
        },
        batch: function (changes) {
            return sendRequest(batchApiUrl, { body: changes });
        }
    },
    batch: true,
    onFailed: function(type, args) {
        console.log("error", type, args);
    }
});

오류 처리

서버에서 연결 오류(예: HTTP 404, HTTP 500) 및 서버 데이터베이스 오류(예: 기본 키 중복, 업데이트 실패)가 반환되면, 테이블 시트는 콜백을 통해 사용자가 이를 처리하거나 오류를 표시할 수 있도록 합니다.

행 머리글에 빨간색 경고 아이콘이 표시되며, 사용자가 아이콘 위에 마우스를 올리면 오류 설명이 표시됩니다.

데이터 변경 사항 가져오기

테이블 시트는 변경된 내용을 서버에 저장하기 전에 현재 데이터 뷰에서 변경 사항을 가져오는 기능을 지원합니다. TableSheet 클래스의 getChanges 메서드를 사용하면, 각 동기화 모드에 따라 다음 객체들의 배열을 반환합니다.

• Data Item: 현재 행 데이터

• Old Data Item: 원래의 행 데이터 (옵션)

• Index: 테이블 시트 뷰 인덱스

• Type of change: 업데이트, 삽입, 삭제 (동기화 모드에 따라 다름)

autoSync 모드에서는 getChanges메서드가 ‘업데이트된 행’ 또는 ‘삽입된 행’ 정보를 반환합니다.

그러나 batch 모드에서는 getChanges메서드가 ‘업데이트된 행’, ‘삽입된 행’, ‘삭제된 행’ 정보를 모두 반환합니다.

tablesheet.getChanges();