# 스프레드 변환

## Content

테이블 시트는 기본적으로 `fields` 객체 전체를 하나의 열(object column)로 표시하는 기본 열 구성의 뷰(view)를 생성합니다. SpreadJS에서는 `fields` 객체의 내용을 **여러 개의 열로 펼쳐서** 표시할 수 있도록 뷰를 구성할 수 있습니다. 서버에서 JSON 파일을 가져온 후, **스프레드할 대상 객체 열을 지정하여 데이터 원본 스키마(schema)를 업데이트**하면 됩니다.
테이블 시트 코드에서 스키마의 열 정의에 있는 `spread` 속성을 사용하면, **계층 구조의 데이터를 평탄화(flatten)** 하여 **중첩된 객체를 최상위 속성으로 펼칠 수 있습니다**. 이렇게 하면 사용자는 테이블 시트 데이터를 더 쉽게 읽고 이해할 수 있습니다.
다음 코드는 정의된 데이터 소스를 보여줍니다:

```javascript
{
	"records": [{
		"customerKey": 0,
		"customer": "Unknown",
		"fields": {
			"billToCustomer": "N/A",
			"category": "N/A",
			"buyingGroup": "N/A",
			"primaryContact": "N/A",
			"postalCode": "N/A",
			"validFrom": "2013-01-01T00:00:00",
			"validTo": "9999-12-31T23:59:59.9999999"
		}
	}, {
		"customerKey": 1,
		"customer": "Tailspin Toys (Head Office)",
		"fields": {
			"billToCustomer": "Tailspin Toys (Head Office)",
			"category": "Novelty Shop",
			"buyingGroup": "Tailspin Toys",
			"primaryContact": "Waldemar Fisar",
			"postalCode": "90410",
			"validFrom": "2013-01-01T00:00:00",
			"validTo": "9999-12-31T23:59:59.9999999"
		}
	}, // more items
```

다음 코드 샘플은 **스키마의 열(column) 정의 시** `fields` 열에 대해 `spread` 속성을 `true`로 설정하는 방법을 보여줍니다:

```javascript
// data source 스키마
      schema: 
        { 
          dataPath: 'records', 
             columns: 
                {
                   fields: { spread: true }
                } 
        } 
```

다음 이미지는 `spread` 속성의 설정 여부에 따른 테이블 시트 뷰를 보여줍니다.

| **설명** | **이미지** |
| --- | --- |
| `spread` 속성이 `true`로 설정된 경우 | ![tablesheet-spread](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/tablesheet-spread.bd8a9b.png?width=400) |
| `spread` 속성이 `false`로 설정된 경우 | ![tablesheet-spread-false](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/tablesheet-spread-false.b34de5.png?width=400) |

### 점 구분자 사용하기

SpreadJS에서는 `spread` 속성의 대안으로 점(.) 구분자를 사용할 수도 있습니다. 점 구분자는 테이블 시트에 뷰를 바인딩할 때 사용할 수 있습니다.
다음 코드 샘플은 **점 구분자**를 사용하여 테이블 시트에 뷰를 바인딩하는 방법을 보여줍니다:

```javascript
//테이블 시트에 뷰 바인딩
 customerTable.fetch().then(function (data) 
 { 
     var view = customerTable.addView("myView", 
       [ 
          "customerKey", 
          "customer", 
          "fields.billToCustomer", 
          "fields.category", 
          "fields.postalCode", 
          "fields.validTo" 
     ], 
     undefined, 
      { 
       defaultColumnWidth: "*" 
      }); 
// 뷰에는 테이블의 모든 기본 열이 포함
sheet.setDataView(view); 
}); 
```