# 데이터 작업

## Content

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

| 메서드 | 설명 |
| --- | --- |
| [addRow](/spreadjs/api/v18/classes/GC.Spread.Sheets.TableSheet.TableSheet#addRow) | 테이블 시트에 새 행을 추가합니다. |
| [removeRow](/spreadjs/api/v18/classes/GC.Spread.Sheets.TableSheet.TableSheet#removeRow) | 지정한 행을 테이블 시트에서 제거합니다. |
| [saveRow](/spreadjs/api/v18/classes/GC.Spread.Sheets.TableSheet.TableSheet#saveRow) | 테이블 시트의 특정 행에 대한 변경 사항(수정 및 삽입된 행 포함)을 DataManager에 저장합니다. |
| [resetRow](/spreadjs/api/v18/classes/GC.Spread.Sheets.TableSheet.TableSheet#resetRow) | 테이블 시트의 지정된 행에 대한 변경 사항을 초기화합니다. |

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

![ts-rowoperation](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/ts-rowoperation.2f5719.gif)

## 다양한 동기화 보드

테이블 시트는 데이터 매니저와 연동되어 데이터를 관리합니다. 변경된 데이터를 원격 데이터베이스와 동기화하려면 자동 업데이트 또는 일괄 업데이트 기능을 활성화해야 합니다.
[addTable](/spreadjs/api/v18/classes/GC.Spread.Sheets.TableSheet.TableSheet#addTable) 메서드를 사용할 때 아래 두 가지 중 하나의 동기화 모드를 설정할 수 있습니다:

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

    ```JavaScript
    var myTable = dataManager.addTable("myTable", {
        // ... 다른 설정
        autoSync: true // autoSync 모드 활성화
    });
    ```
* **batch** 모드 : 변경 사항을 수동으로 **submitChanges** 메서드를 호출하여 원격 데이터 소스에 반영합니다. 데이터가 자주 조작되는 경우에 적합합니다.

    ```JavaScript
    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입니다.

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

```JavaScript
// 사용자 지정 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) 및 서버 데이터베이스 오류(예: 기본 키 중복, 업데이트 실패)가 반환되면, 테이블 시트는 콜백을 통해 사용자가 이를 처리하거나 오류를 표시할 수 있도록 합니다.
행 머리글에 빨간색 경고 아이콘이 표시되며, 사용자가 아이콘 위에 마우스를 올리면 오류 설명이 표시됩니다.
![ts-error](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/ts-error.fbe1c9.png)

## **데이터 변경 사항 가져오기**

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

* **Data Item**: 현재 행 데이터
* **Old Data Item**: 원래의 행 데이터 (옵션)
* **Index**: 테이블 시트 뷰 인덱스
* **Type of change**: 업데이트, 삽입, 삭제 (동기화 모드에 따라 다름)

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

```JavaScript
tablesheet.getChanges();
```