그누보드7 마크업 레이아웃 (Markup Layout)

Markup Layout

수동설치: https://github.com/ninecells/g7-module-markup-layout

그누보드7의 JSON 레이아웃을 HTML, Vue와 비슷한 마크업 문법으로 작성할 수 있게 해주는 개발자용 모듈입니다.

컴포넌트, 상태, 액션, 조건, 반복, Partial, 슬롯, Injection 기능을 그대로 사용하면서 복잡한 JSON 중첩을 줄이고 가독성을 높일 수 있습니다.

그누보드 코어를 직접 수정하지 않고 서비스 컨테이너 바인딩을 통해 기존 레이아웃 관련 서비스와 매니저를 확장하는 방식으로 동작합니다. 레이아웃을 탐색할 때 .g7 파일이 발견되면 기존 JSON 레이아웃 형식으로 컴파일해 등록하며, 기존 .json 레이아웃도 그대로 지원하므로 두 형식을 한 프로젝트에서 함께 사용할 수 있습니다. 이를 통해 코어 업데이트 시 직접 수정한 파일에서 발생할 수 있는 충돌 부담을 줄이면서 레이아웃 작성 방식을 확장할 수 있습니다.

그누보드7의 표준은 아니기에 다른 프로젝트에 권장하기보다는, 그누보드 코어를 직접 수정하지 않고 기능을 확장하는 방법을 살펴볼 수 있는 참고 자료로 봐주시면 좋겠습니다.

<script type="application/json">
{
  "layout_name": "user_todo_index",
  "initLocal": {
    "saving": false,
    "todos": []
  }
}
</script>

<layout>
  <Section class="space-y-4">
    <H2>할 일 목록</H2>

    <Button :disabled="_local.saving" @click="saveTodo({ title: _local.title })">
      저장
    </Button>

    <Div g7-for="(todo, index) in _local.todos" :key="todo.id">
      <Span>{{index + 1}}. {{todo.title}}</Span>
    </Div>

    <P g7-if="_local.todos.length === 0">
      등록된 할 일이 없습니다.
    </P>
  </Section>
</layout>

파일과 레이아웃 최상위

<layout> 대상 지정

컴포넌트 타입과 트리

ID·Key·조건·반복·텍스트

정적 Props

동적 Props 바인딩

컴포넌트 최상위 필드

표준 이벤트와 액션

커스텀 콜백과 액션 블록

핸들러 호출 인자

Named Actions

Partial

속성값 변환

0.3.1 호환 표기