Files
Gnuboard7/docs/frontend
HeuJung 15cd4452bf feat(core): 정적 최적화 서버 대응 자산 URL 이중 모드
nginx 의 정규식 location 은 프리픽스 location 보다 먼저 매칭되므로,
`location ~* \.(js|css|json)$` 블록이 있는 서버에서는 확장자 붙은 동적
엔드포인트가 `try_files ... /index.php` 폴백이 실행될 기회 없이 404 가 된다.
aaPanel/CyberPanel/Plesk 기본 템플릿에 들어있어 드물지 않으며, 관리자 화면조차
뜨지 않아 "서버 설정을 고치세요" 안내가 순환 참조가 된다.

관례를 깬 쪽이 G7 이므로 해소 책임도 G7 에 두고, 두 형태를 모두 서빙한 뒤
환경에 따라 택일한다. 확장자 형태는 영구 유지한다 — 제거하면 URL 을 하드코딩한
서드파티 확장이 깨진다.

- 라우트: dualSuffix / dualSuffixSegment / dualAsset 매크로로 23개 엔드포인트와
 프로브를 이중 등록. 확장자 형태를 먼저 등록한다 — 확장자 없는 쪽이 더 느슨한
 패턴이라 순서가 뒤집히면 `.json` 요청까지 삼킨다
- URL 생성: 서버 App\Support\AssetUrl, 프론트 core/support/assetUrl.ts 로 집약.
 기본 모드에서 생성 결과는 치환 이전과 문자열까지 동일하다 (쿼리 순서 포함 —
 순서가 바뀌면 의미는 같아도 HTTP 캐시 키가 갈린다)
- 자가 복구: 부트스트랩 자산 로드 실패 시 확장자 없는 형태로 1회 단방향 전환.
 역방향 금지 + 기존 재시도 예산 공유로 무한 왕복을 막는다
- 감지·전환: 인스톨러 프로브(설치 시 확정) / 관리자 환경설정 일반 탭 /
 g7:asset-url-mode. 판정은 상태코드가 아니라 매직 토큰 + Content-Type 으로 한다.
 상태코드만 보면 "404 대신 200 + 에러 HTML" 환경에서 영원히 오판한다
- 봇은 JavaScript 를 실행하지 않아 자가 복구가 닿지 않으므로, 모드 변경 시
 SEO 프리렌더 캐시를 비워 재생성시킨다

가드: audit 룰 2종(dynamic-route-static-extension / asset-url-builder-required),
Playwright 6건(정적 블록 가로채기 시뮬레이션), 루프 방지 불변식 L1~L9 전수 red 증명.

부수 정리: 양 Composer 에 중복돼 있던 확장 에셋 수집 123줄을 트레이트로 통합하고,
자산 확장자 화이트리스트 누락(.map)과 경로 정규화 우회 가능성을 함께 교정.

sir.kr 커뮤니티의 hang 님께서 제보해주셨습니다.
2026-07-23 11:34:32 +09:00
..
2026-04-20 20:37:49 +09:00
2026-04-01 10:30:52 +09:00
2026-07-01 10:30:32 +09:00
2026-04-20 20:37:49 +09:00
2026-04-20 20:37:49 +09:00
2026-04-20 20:37:49 +09:00
2026-05-11 11:29:41 +09:00
2026-04-20 20:37:49 +09:00
2026-07-01 10:30:32 +09:00
2026-04-01 10:30:52 +09:00
2026-07-01 10:30:32 +09:00
2026-07-01 10:30:32 +09:00
2026-04-01 10:30:52 +09:00
2026-07-01 10:30:32 +09:00
2026-05-11 11:29:41 +09:00
2026-04-01 10:30:52 +09:00
2026-07-01 10:30:32 +09:00
2026-04-01 10:30:52 +09:00
2026-04-20 20:37:49 +09:00
2026-04-20 20:37:49 +09:00
2026-04-01 10:30:52 +09:00
2026-07-01 10:30:32 +09:00
2026-07-01 10:30:32 +09:00
2026-04-01 10:30:52 +09:00
2026-04-01 10:30:52 +09:00
2026-05-11 11:29:41 +09:00
2026-05-11 11:29:41 +09:00
2026-04-01 10:30:52 +09:00
2026-04-01 10:30:52 +09:00
2026-04-01 10:30:52 +09:00
2026-04-01 10:30:52 +09:00

그누보드7 프론트엔드 개발 가이드

이 문서는 그누보드7의 프론트엔드 및 템플릿 시스템 개발 규칙의 인덱스입니다.


핵심 원칙

필수: 기본 컴포넌트 사용 (HTML 태그 직접 사용 금지)
필수: 기본 컴포넌트만 사용 (Div, Button, H2 등)
✅ 필수: 집합 컴포넌트 재사용 우선
✅ 필수: 다크 모드 light/dark variant 함께 지정

템플릿 시스템 개요

그누보드7 템플릿 엔진은 JSON 기반 레이아웃 정의를 통해 화면을 동적으로 생성하는 시스템입니다.

핵심 특징:

  • JSON 기반 레이아웃 정의 (코드 수정 없이 UI 변경)
  • 컴포넌트 기반 아키텍처 (재사용성)
  • 동적 데이터 바인딩 (API 자동 연결)
  • 자동 발견 메커니즘 (/templates 디렉토리 스캔)
  • 코어 렌더링 엔진과 템플릿 컴포넌트 분리

템플릿 타입:

타입 레이아웃 편집 버전 히스토리 용도
admin ❌ 불가 ❌ 미사용 관리자 인터페이스
user ✅ 가능 ✅ 자동 생성 사용자 웹사이트

템플릿별 레퍼런스

템플릿 식별자 컴포넌트 핸들러 레이아웃
sirsoft-admin_basic components.md handlers.md layouts.md
sirsoft-basic components.md handlers.md layouts.md

컴포넌트 개발

문서 설명
component-props-composite.md 컴포넌트 Props 레퍼런스 - Composite
component-props.md 컴포넌트 Props 레퍼런스
components-advanced.md 컴포넌트 고급 기능
components-patterns.md 컴포넌트 패턴 및 다국어
components-types.md 컴포넌트 타입별 개발 규칙
components.md 컴포넌트 개발 규칙
layout-json-components-loading.md 레이아웃 JSON - 데이터 로딩 및 생명주기
layout-json-components-rendering.md 레이아웃 JSON - 조건부/반복 렌더링
layout-json-components-slots.md 레이아웃 JSON - 슬롯 시스템
layout-json-components.md 레이아웃 JSON - 컴포넌트 (반복 렌더링, Blur, 생명주기, 슬롯)

레이아웃 및 데이터

문서 설명
actions-g7core-api.md 액션 시스템 - G7Core API (React 컴포넌트용)
actions-handlers-navigation.md 액션 핸들러 - 네비게이션
actions-handlers-state.md 액션 핸들러 - 상태 관리
actions-handlers-ui.md 액션 핸들러 - UI 인터랙션
actions-handlers.md 액션 핸들러 - 핸들러별 상세 사용법
actions.md 액션 핸들러 가이드
data-binding-i18n.md 데이터 바인딩 - 다국어 처리
data-binding.md 데이터 바인딩 및 표현식
data-sources-advanced.md 데이터 소스 - 고급 기능
data-sources.md 데이터 소스 (Data Sources)
g7core-api-advanced.md G7Core 전역 API 레퍼런스 - 고급
g7core-api.md G7Core 전역 API 레퍼런스
g7core-helpers.md G7Core 헬퍼 API
layout-json-components-loading.md 레이아웃 JSON - 데이터 로딩 및 생명주기
layout-json-components-rendering.md 레이아웃 JSON - 조건부/반복 렌더링
layout-json-components-slots.md 레이아웃 JSON - 슬롯 시스템
layout-json-components.md 레이아웃 JSON - 컴포넌트 (반복 렌더링, Blur, 생명주기, 슬롯)
layout-json-features-actions.md 레이아웃 JSON - 초기화, 모달, 액션, 스크립트
layout-json-features-error.md 레이아웃 JSON - 에러 핸들링
layout-json-features-styling.md 레이아웃 JSON - 스타일 및 계산된 값
layout-json-features.md 레이아웃 JSON - 기능 (에러 핸들링, 초기화, 모달, 액션)
layout-json-inheritance.md 레이아웃 JSON - 상속 (Extends, Partial, 병합)
layout-json.md 레이아웃 JSON 스키마
state-management-advanced.md 상태 관리 - 고급 기능
state-management-forms.md 상태 관리 - 폼 자동 바인딩 및 setState
state-management.md 전역 상태 관리

스타일링 및 UI

문서 설명
dark-mode.md 다크 모드 지원 (engine-v1.1.0+)
responsive-layout.md 반응형 레이아웃 개발 (engine-v1.1.0+)
tailwind-safelist.md Tailwind Safelist 가이드

템플릿 개발

문서 설명
editors.md 에디터 컴포넌트 가이드
template-development.md 템플릿 개발 가이드라인
template-handlers.md 템플릿 전용 핸들러

테스트

문서 설명
layout-testing.md 그누보드7 레이아웃 파일 렌더링 테스트 가이드

인증 및 보안

문서 설명
auth-system.md 인증 시스템 (AuthManager)
modal-usage.md Modal 컴포넌트 사용 가이드
security.md 보안 및 검증

기타

문서 설명
identity-guard-interceptor.md IdentityGuardInterceptor — 코어 본인인증 인터셉터 레퍼런스
identity-verification-ui.md 본인인증(IDV) 공통 UI 가이드

컴포넌트 타입 요약

타입 설명 예시
basic HTML 태그 래핑 Button, Input, Div, Icon
composite 기본 컴포넌트 조합 Card, Modal, PageHeader, DataGrid
layout 자식 요소 배치 Container, Grid, Flex

데이터 바인딩 문법 (빠른 참조)

{
  "props": {
    "title": "{{user.name}}",              // API 데이터
    "userId": "{{route.id}}",              // URL 파라미터
    "label": "$t:dashboard.title",         // 다국어
    "total": "{{users?.data?.total ?? 0}}" // Optional Chaining + Nullish Coalescing
  }
}

다크 모드 색상 매핑 (빠른 참조)

배경:   bg-white dark:bg-gray-800
테두리: border-gray-200 dark:border-gray-700
텍스트: text-gray-900 dark:text-white
강조:   bg-green-50 dark:bg-green-900/20

관련 문서