Ezworks 데이터 바인딩 가이드

이 문서는 Ezworks 프레임워크 내에서 데이터 바인딩을 하는 요령을 작성한 문서입니다. 별도의 문제가 발생하지 않는 이상 이 문서에 기술된 바인딩 방법을 따라 해주시기 바랍니다.

---

1. 컴포넌트 바인딩

Ezworks에서는 컴포넌트의 명칭을 기반으로 BindItem 객체를 자동 생성하여 바인딩을 수행합니다. 아래 예제를 통해 단계별로 살펴보겠습니다.

SQL 작성

<select id="s01" resultType="map">
    SELECT A.SNO  AS SNO
         , A.NAME AS NAME
         , A.GRDE AS GRDE
     FROM HHJ1000 A
    ORDER BY A.SNO
</select>

학생의 정보를 가져오는 SQL 예제입니다. 컬럼명(SNO, NAME, GRDE)이 바인딩의 기준이 됩니다.

스크립트 작성 (조회)

this.fn_searchMain = () => {
    return this.tx.search({
        action : "basic",
        svcId  : "searchList",
        sqlId  : "namespace.s01",
        outDs  : "ds_main",
        param  : {},
    });
};

위 쿼리를 조회하여 결과를 ds_main 데이터셋에 담는 스크립트입니다.

컴포넌트 ID 설정

넥사크로 스튜디오의 편집 화면에서 div 내의 컴포넌트 ID를 명명 규칙에 맞춰 작성한 모습입니다. 규칙: 컴포넌트 접두사(Prefix) + 컬럼명(Camel Case)

※ 명명 규칙 참조 (Snake Case vs Camel Case)

• Snake Case: 단어 사이를 언더바(_)로 연결 (예: USER_ID, REG_DT) - 주로 DB 컬럼명에 사용
• Camel Case: 첫 단어는 소문자, 이후 단어 첫 글자는 대문자 (예: userId, regDt) - 주로 컴포넌트 ID에 사용

구분	SQL 컬럼명 (Snake Case)	컴포넌트 ID (Prefix + Camel Case)
학번	SNO	edt_sno
성명	NAME	edt_name
학년	GRDE	cmb_grde
사용자 ID	USER_ID	edt_userId

바인딩 실행

$comp.setDetail(this.div_detail, this.ds_main);

Form의 onload 이벤트 등에서 위와 같이 setDetail을 호출하면, 지정된 div 하위의 컴포넌트들이 데이터셋과 자동으로 바인딩됩니다.

• 지정한 div 하위의 모든 div를 재귀적으로 순회하며 바인딩을 수행합니다.
• 상세 명세: EzWorks 도움말 - setDetail

---

2. 그리드 바인딩

그리드와 데이터셋의 바인딩은 기존 넥사크로 방식과 동일합니다. 다만, 효율적인 개발을 위해 프레임워크에서 제공하는 보조도구를 활용할 수 있습니다.

데이터 소스 생성

데이터셋 정보를 생성하는 보조도구 활용 모습입니다. 생성된 데이터 소스 내용을 복사합니다.

메뉴를 통해 들어간 후, 복사한 내용을 붙여넣고 OK를 누르면 데이터셋 구조가 자동으로 생성됩니다.

데이터셋 및 셀 바인딩

생성된 데이터셋을 그리드에 바인딩합니다.

그리드 각 셀의 text 속성에 bind:컬럼명 형식을 지정하여 개별 컬럼 바인딩을 마무리합니다.