# GeeGrid AI Developer Guide

언어 선택: [한국어](/GEEGRID_AI_DEVELOPER_GUIDE.ko.md) | [English](/GEEGRID_AI_DEVELOPER_GUIDE.en.md)

이 문서는 다른 AI가 GeeGrid 화면 소스를 생성·수정할 때 사용하는 기준 문서입니다.

## 문서 읽기 순서

1. `/llms.txt`
2. `/llms-full.txt`
3. `/doc/`
4. `/reference/grid/`
5. `/api/widget-api`
6. `/guide/`
7. `/geegrid-example.html`

## 생성 절차

1. 요구사항에서 화면, 입력, 결과 Grid, API를 분리한다.
2. 기존 `id`, `<geegrid>`, `<column>`, `<gg-layout>`, `<gg-frame>`, `<gg-layer>` 구조를 먼저 확인한다.
3. 검색 입력은 기본적으로 native `textarea`, `input`, `button`과 `addEventListener`를 사용한다.
4. 데이터 형태에 따라 `setObjectData`, `setArrayData`, `setJsonData` 중 하나를 선택한다.
5. 이벤트 속성에는 실행식이 아니라 콜백 이름만 선언한다.
6. `GeeGrid.on()`에 콜백을 등록한다.
7. API 연결 전 mock 데이터로 화면 흐름을 확인한다.
8. 실제 API 연결 뒤 정적 문법 검사를 수행한다.

## 데이터 형태 선택

| 데이터 | 사용 API |
| --- | --- |
| 객체 행 | `setObjectData(rows)` |
| 배열 행 | `setArrayData(fieldNames, rows)` |
| JSON 레코드 | `setJsonData(records)` |

## Grid 조회 순서

```js
var grid = new GeeGrid('userGrid');

GeeGrid.on('load_users', function () {
  var page = grid.makePageParams().replace(/^&/, '');
  fetch('/api/users?' + page)
    .then(function (response) { return response.json(); })
    .then(function (ret) {
      grid.setTotalCount(Number(ret.count || 0));
      grid.setCurrentPage(Number(ret.page || 1));
      grid.setViewLength(Number(ret.rows || 20));
      grid.setObjectData(ret.records || []);
      grid.makePaging();
    });
});
```

## 금지 사항

- 확인되지 않은 `<cond>` 또는 임의 `data-*` 계약 생성
- 속성에 함수 실행식 직접 작성
- 정렬값을 SQL에 직접 연결
- 확인되지 않은 인증 헤더 작성
- Runtime·Builder 내부 구현을 추측해 문서화

근거: `codex_base/GEEGRID_USAGE.md`, `codex_base/GEEGRID_API.md`, `GEEGRID_SYNTAX.md`, `geegrid-example.html`.