image
Akan.js
English
DocsConventionsReferencesCheatsheet
image
Akan.js
MIT 라이선스 하에 배포되었습니다.
Akan.js 공식 컨설팅 서비스Akansoft
Copyright © 2026 Akan.js 모든 권리 보유.
시스템 관리자bassman
CLI 레퍼런스
• 명령어
• Workspace
• Application
• Library
• Module
• Scalar
• Package
• Page
• Cloud
AkanJS 레퍼런스
• akanjs/base
• akanjs/common
• akanjs/constant
• akanjs/fetch
• akanjs/signal
• akanjs/server
• akanjs/client
• akanjs/webkit
UI 레퍼런스
• Overview
• Core
• Display
• Forms
• Overlays
• System
CLI 레퍼런스
• 명령어
• Workspace
• Application
• Library
• Module
• Scalar
• Package
• Page
• Cloud
AkanJS 레퍼런스
• akanjs/base
• akanjs/common
• akanjs/constant
• akanjs/fetch
• akanjs/signal
• akanjs/server
• akanjs/client
• akanjs/webkit
UI 레퍼런스
• Overview
• Core
• Display
• Forms
• Overlays
• System
Next
명령어

Core UI

Core UI component는 apps/libs에서 가장 자주 import되는 `akanjs/ui` 요소입니다. routing, image, layout container, fetch loading, model store workflow를 조합합니다.

Link

Route-aware navigation component입니다. Akan render mode에 따라 CSR 또는 SSR navigation을 렌더링하고, disabled이거나 href가 비어 있으면 클릭할 수 없는 div로 대체합니다.
Props / API
이름타입설명
hrefstring | null이동할 route입니다. 값이 비어 있으면 navigation 없이 children만 렌더링합니다.
disabledboolean같은 visual layout을 유지하면서 navigation을 막습니다.
activeClassNamestring현재 route가 link와 일치할 때 적용되는 class입니다.
scrollToTopbooleanclient-side navigation 이후 화면을 상단으로 스크롤합니다.
Namespace helper인 `Link.Back`, `Link.Close`, `Link.Lang`은 자주 쓰이는 navigation action을 다룹니다.
사용 예시

Image

`ProtoFile` 객체와 직접 URL을 모두 받는 Akan image component입니다. file metadata에서 width, height, blur data를 가져올 수 있고 SSR mode에서는 Akan image optimizer를 사용합니다.
Props / API
이름타입설명
srcstring직접 지정하는 image URL입니다. file metadata보다 우선합니다.
fileProtoFile | file-like`url`, `imageSize`, optional `abstractData`를 가진 file 객체입니다.
abstractDatastringblur/placeholder preview data입니다.
priority / preloadbooleanimage를 high-priority 및 eager-loaded 대상으로 표시합니다.
unoptimizedbooleanAkan image optimization을 건너뜁니다.
사용 예시

Layout

module template, unit, view, header, sidebar, bottom tab, zone 전반에서 사용하는 가벼운 layout primitive namespace입니다.
Props / API
이름타입설명
Layout.Template{ className?, children? }기본 간격이 있는 세로 form/template container입니다.
Layout.Unit{ className?, children, href? }href가 제공되면 클릭 가능한 list/card item container입니다.
Layout.View{ className?, children }폭이 제한된 detail page container입니다.
Layout.Zonecomponentfeature zone과 page block을 위한 section container입니다.
사용 예시

Load

Akan fetch 결과와 React rendering을 연결하는 data loading namespace입니다. model detail page, edit page, pagination, server/client page loading에 자주 사용됩니다.
Props / API
이름타입설명
Load.View{ view, renderView, loading?, noDiv? }full model view를 hydrate하고 `renderView`로 렌더링합니다.
Load.Editcomponentmodel edit/new workflow를 위한 edit payload를 로드합니다.
Load.Page{ loader, render, loading?, noCache? }SSR/CSR에서 함께 사용하는 page loader wrapper입니다.
Load.Unitscomponentpagination-style 결과에서 list/unit data를 렌더링합니다.
사용 예시

Model

generated Akan store를 위한 model workflow shell namespace입니다. view wrapper, edit/new modal, removal flow, admin panel을 포함합니다.
Props / API
이름타입설명
Model.EditModal{ slice, edit?, renderTitle?, onSubmit? }generated model store action과 연결된 modal editing shell입니다.
Model.NewWrappercomponent새 model form을 열고 초기화하는 wrapper입니다.
Model.ViewWrappercomponentfull model view state를 렌더링하는 wrapper입니다.
Model.Removecomponentgenerated delete flow와 연결된 removal action입니다.
generated store action을 사용할 수 있는 module `Util`, `View`, `Zone` 파일 안에서 `Model` component를 사용합니다.
사용 예시
Core UI
Link
Image
Layout
Load
Model