# Grid 시작하기

npm에서 필요한 에디션 하나를 설치하고 CSS와 sy-grid를 등록하세요. 한 페이지에서는 Community와 Pro 중 하나만 등록합니다.

Canonical: https://grid.syidax.com/ko/docs/guides/getting-started/

<a id="understand"></a>

## 동작 원리와 선택 기준

이 매뉴얼의 짧은 코드는 아래 기본 설정을 마친 grid를 기준으로 설명합니다. 각 예제에서 다시 할당한 columnDefs와 rowData가 기존 값을 대체한다는 점에 유의하세요.

<a id="example-1"></a>

## 예제 1. Community 등록과 첫 표

배포받은 Community 패키지를 설치한 앱의 진입 파일에서 실행합니다. 화면에는 먼저 <sy-grid id="orders"></sy-grid>를 배치합니다.

```javascript
import '@syidax/advanced/css/grid';
import { defineCustomElement } from '@syidax/advanced/components/sy-grid.js';
defineCustomElement();
await customElements.whenDefined('sy-grid');
const grid = document.querySelector('#orders');
Object.assign(grid, {
  height: 420, locale: 'ko', getRowId: row => row.id,
  defaultColDef: { sortable: true },
  columnDefs: [
    { field: 'id', headerName: '주문 번호', editable: false },
    { field: 'product', headerName: '제품' },
    { field: 'team', headerName: '담당 팀' },
    { field: 'region', headerName: '지역' },
    { field: 'quantity', headerName: '수량', editor: 'number', editable: true },
    { field: 'price', headerName: '단가', editor: 'number' }
  ],
  rowData: [
    { id: 'ORD-0001', product: 'Atlas', team: 'Platform', region: 'APAC', quantity: 10, price: 120 },
    { id: 'ORD-0002', product: 'Beacon', team: 'Design', region: 'EMEA', quantity: 20, price: 80 },
    { id: 'ORD-0003', product: 'Cipher', team: 'Platform', region: 'EMEA', quantity: 30, price: 50 }
  ]
});
```

결과 확인: 6개 열과 3개 주문이 보이고 수량은 편집할 수 있습니다. 패키지 이름을 브라우저가 해석할 수 있도록 번들러가 있는 앱에서 실행합니다.

<a id="example-2"></a>

## 예제 2. Pro 기능을 사용하는 앱

Pro 패키지를 사용하는 앱은 import 경로도 Pro로 통일합니다. 아래 /licenses/grid.json은 앱이 발급받은 인증서를 제공하는 경로이며 직접 준비해야 합니다.

```javascript
import { registerLicense } from '@syidax/advanced-pro/license';
import { defineCustomElement } from '@syidax/advanced-pro/components/sy-grid.js';
const response = await fetch('/licenses/grid.json');
if (!response.ok) throw new Error('라이선스를 불러오지 못했습니다.');
const result = await registerLicense(await response.json());
if (!result.ok) throw new Error('라이선스를 확인하세요.');
defineCustomElement();
```

결과 확인: 등록 결과가 ok인 뒤 컴포넌트를 연결합니다. 서명용 비밀 키는 앱에 포함하지 않고 발급된 인증서만 전달합니다.

<a id="example-3"></a>

## 예제 3. 화면을 다시 여는 앱

탭·라우트가 바뀌는 앱에서는 기존 요소와 이벤트 구독을 정리하고 새 화면의 요소를 참조합니다. 다른 화면의 grid 변수로 호출하지 않도록 합니다.

```javascript
const controller = new AbortController();
grid.addEventListener('selectionChanged', event => {
  console.log(event.detail);
}, { signal: controller.signal });
// 이 화면을 해제할 때 호출합니다.
function dispose() {
  controller.abort();
  grid.remove();
}
```

결과 확인: 화면을 재진입해도 이벤트가 중복으로 처리되지 않습니다. 앱에서 만든 소켓·타이머도 같은 시점에 정리합니다.

<a id="pitfalls"></a>

## 조합할 때와 문제를 해결할 때

HTML 예제도 npm import를 처리하는 앱 빌드 도구에서 사용합니다. Installation 안내에서 설치 명령과 CSS import를 확인하세요.

Grid가 보이지 않으면 등록 완료 여부, 요소 선택 결과, 높이와 부모 너비를 먼저 확인하세요. Pro 권한 문제와 빈 데이터 문제를 구분해서 조사합니다.

<a id="related-api"></a>

## 이 기능에 사용하는 API

공통 설정과 아래 관련 문서를 함께 참고하세요.

- [Grid 속성](https://grid.syidax.com/ko/docs/options.md)
- [열 설정](https://grid.syidax.com/ko/docs/columns.md)
- [메서드](https://grid.syidax.com/ko/docs/methods.md)

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/getting-started) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.