# 데이터 매니저

## Content

데이터 매니저는 강력한 로컬 데이터 엔진으로, 서버 측에 요청을 보내고 데이터가 준비되면 테이블 시트에 데이터를 바인딩합니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ts-overview-flowchart.png)

데이터 매니저는 데이터베이스와 상호작용하며, 정렬, 필터, 그룹, 집계 작업을 수행하고 실시간 데이터를 다시 데이터베이스와 동기화합니다. 이러한 기능은 [GC.Data.DataManager](/spreadjs/api/v19/classes/GC.Data.DataManager) 클래스를 통해 제공되며, [addTable](/spreadjs/api/v19/classes/GC.Data.DataManager#addTable) 과 [addRelationship](/spreadjs/api/v19/classes/GC.Data.DataManager#addRelationship) 메서드를 사용하여 테이블 또는 관계를 매핑할 수 있습니다. 반대로, DataManager 클래스 메서드를 사용하여 테이블이나 관계를 제거할 수도 있습니다.
데이터 매니저는 애플리케이션의 데이터 중심 역할을 하며, 비즈니스 로직과 렌더링에 집중할 수 있도록 도와줍니다. REST API, OData, GraphQL과 같은 원격 소스뿐만 아니라, JSON 형식의 객체 배열, CSV 문자열, XML 등 로컬 소스도 지원하여 테이블 시트를 생성할 수 있습니다.

## 데이터 원본 스키마

데이터 소스를 추가할 때 스키마를 제공하여 데이터 테이블의 구조를 정의할 수 있습니다. 스키마는 다음과 같은 속성들을 포함합니다:

| **속성** | **설명** |
| --- | --- |
| type<br>*string* | 데이터 유형. 'JSON', 'CSV', 'XML', 'columnJson' 중 하나를 사용합니다. 기본값은 'JSON'입니다. |
| countPath<br>*string* | 데이터 소스 컬렉션의 길이를 가져오는 데 사용됩니다. |
| dataPath<br>*string* | 파싱된 후 데이터 소스 컬렉션을 가져오는 데 사용됩니다. |
| columns<br>*GC.Data.IColumnCollection* | 데이터 소스 테이블의 열 정의입니다. 키는 열 이름이며, 값은 열 정보로, `dataType`, `dataPattern`, `dataMap`, `dataName`을 포함합니다.<ul><li>`dataType`**은 `"string"`, `"number"`, `"boolean"`, `"null"`, `"object"`, `"array"`, `"date"` 중 하나입니다.이는 원래 값의 실제 데이터 유형입니다.특히 `"date"`는 JSON 데이터에서 문자열로 존재하므로 변환이 필요할 때 유용합니다.**`dataPattern`**은 문자열을 값으로 파싱할 때 사용하는 문자열입니다.예를 들어 날짜 문자열을 위한 포맷터 `"dd/MM/yyyy"`,불리언 문자열을 위한 `"Yes|No"`와 같은 truthy/falsy 값 쌍,숫자 문자열을 위한 소수점 구분자 `","` 등이 있습니다.**`dataMap`**은 원래 값을 더 의미 있는 방식으로 표시하기 위한 간단한 매핑입니다.키는 숫자 또는 문자열일 수 있으며, 값은 숫자, 문자열 또는 날짜(Date)일 수 있습니다.**`dataName`은 데이터 소스에서 가져온 원래 데이터 필드의 이름을 나타냅니다.이 속성을 사용하면, 원래 필드 이름을 데이터 매니저 내의 새 필드 이름으로 매핑할 수 있습니다.</li></ul> |

>type=warning
> **참고**: `dataType`이 `"date"`인 경우 날짜 선택기가 자동 활성화됩니다.

스냅샷은 **dataName**, **dataType** 및 **dataMap**이 포함된 **데이터 스키마**를 보여줍니다.
![dataname-datatype-datamap.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/dataname-datatype-datamap.b1c33c.png)
다음 코드 샘플은 테이블 시트에 대해 **dataName**, **dataType** 및 **dataMap**으로 **데이터 스키마**를 설정하는 방법을 보여줍니다.

```javascript
var dataManager = spread.dataManager();
var customerTable = dataManager.addTable("customerTable", {
    remote: {
        read: {
            url: apiUrl
        }
    },
    // 데이터 원본 스키마 - 여기에서 dataType, dataPattern, dataMap 등을 설정합니다.
    schema: {
        columns: {
            validFrom: { dataType: "date" },
            billToCustomer: { dataMap: { "Tailspin Toys (Head Office)": "Tailspin Toys(HO)", "Wingtip Toys (Head Office)": "Wingtip Toys(HO)" } },
            buyingGroup: { dataMap: { "Tailspin Toys": "TT", "Wingtip Toys": "WT" } },
            postalCode: { dataType: "number" }
        }
    }
});
```

스냅샷은 **dataPattern**이 포함된 **데이터 스키마**를 보여줍니다.
![data-type-and-pattern.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/data-type-and-pattern.09fcd9.png)
다음 코드 샘플은 테이블 시트에 대해 **dataPattern**으로 **데이터 스키마**를 설정하는 방법을 보여줍니다.

```javascript
var myTable = dataManager.addTable("myTable", {
    data: [
        { description: "Mow grass", dueDate: "8/11/2021", priority: "High", assignedTo: "Dad", isFinished: "Yes", isEncouraged: "False", credit: "20,75" },
        { description: "Clean Room", dueDate: "8/9/2021", priority: "Medium", assignedTo: "Daughter", isFinished: "No", isEncouraged: "True", credit: "10,50" },
        { description: "Organize Pantry", dueDate: "8/8/2021", priority: "Low", assignedTo: "Son", isFinished: "Yes", isEncouraged: "True", credit: "10,75" },
        { description: "Prepare BBQ", dueDate: "8/12/2021", priority: "High", assignedTo: "Mom", isFinished: "No", isEncouraged: "False", credit: "30,25" }
    ],
    schema: {
        columns: {
dueDate: { dataType: "date", dataPattern: "dd/MM/yyyy" },
isFinished: {  dataPattern: "Yes|No" },
isEncouraged: { dataType: "boolean", dataPattern: "True|False" },
credit: { dataType: "number", dataPattern: "." }
        }
    }
});
```