Akan.js
한국어
English
한국어
문서
컨벤션
레퍼런스
Cheatsheet
Akan.js
Akan.js v2 문서가 새로 나왔습니다.
v1 문서 보기
문서
컨벤션
레퍼런스
Cheatsheet
MIT 라이선스 하에 배포되었습니다.
Akan.js 공식 컨설팅 서비스
Akansoft
Copyright © 2026 Akan.js 모든 권리 보유.
시스템 관리자
bassman
워크스페이스 규칙
•
구조
•
포맷 & 린트
앱 & 라이브러리 규칙
•
애셋 (public/ private/)
•
컴포넌트 (ui/)
•
서버 유틸리티 (srvkit/)
•
웹 유틸리티 (webkit/)
•
공통 유틸리티 (common/)
•
akan.config.ts
도메인 규칙
•
개요
•
model.constant.ts
•
model.dictionary.ts
•
model.document.ts
•
model.service.ts
•
model.signal.ts
•
model.store.ts
•
Model.Template.tsx
•
Model.Unit.tsx
•
Model.Util.tsx
•
Model.View.tsx
•
Model.Zone.tsx
스칼라 규칙
•
개요
•
scalar.constant.ts
•
scalar.dictionary.ts
•
scalar.document.ts
•
Scalar.Template.tsx
•
Scalar.Unit.tsx
서비스 규칙
•
개요
•
service.dictionary.ts
•
service.service.ts
•
service.signal.ts
•
service.store.ts
•
Service.Util.tsx
•
Service.Zone.tsx
워크스페이스 규칙
•
구조
•
포맷 & 린트
앱 & 라이브러리 규칙
•
애셋 (public/ private/)
•
컴포넌트 (ui/)
•
서버 유틸리티 (srvkit/)
•
웹 유틸리티 (webkit/)
•
공통 유틸리티 (common/)
•
akan.config.ts
도메인 규칙
•
개요
•
model.constant.ts
•
model.dictionary.ts
•
model.document.ts
•
model.service.ts
•
model.signal.ts
•
model.store.ts
•
Model.Template.tsx
•
Model.Unit.tsx
•
Model.Util.tsx
•
Model.View.tsx
•
Model.Zone.tsx
스칼라 규칙
•
개요
•
scalar.constant.ts
•
scalar.dictionary.ts
•
scalar.document.ts
•
Scalar.Template.tsx
•
Scalar.Unit.tsx
서비스 규칙
•
개요
•
service.dictionary.ts
•
service.service.ts
•
service.signal.ts
•
service.store.ts
•
Service.Util.tsx
•
Service.Zone.tsx
이전
애셋 (public/ private/)
다음
서버 유틸리티 (srvkit/)
UI 폴더 개요
ui 폴더는 앱이나 라이브러리에서 재사용하는 인터페이스 컴포넌트를 담습니다. 앱 UI 폴더는 보통 @apps/myapp/ui처럼 얕게 유지하고, 라이브러리는 @libs/shared/ui처럼 공유 컴포넌트를 제공합니다.
App UI
admin header, landing hero, dashboard widget처럼 특정 앱에 속한 컴포넌트에 사용합니다.
Library UI
auth gate, responsive wrapper, editor 조각, 공통 form field처럼 여러 앱이 공유하는 컴포넌트에 사용합니다.
권장 구조
권장 규칙은 단순합니다. 1개 파일은 1개 export를 가지고, 파일명은 export 이름과 같게 둡니다. 이렇게 하면 barrel이 예측 가능해지고 import optimization이 잘 동작합니다.
apps/myapp/ui
AutoClose.tsx
Barrel과 최적화 import
ui 폴더는 barrel folder로 유지합니다. 페이지는 barrel에서 import하고, Akan은 import를 최적화해서 페이지가 실제로 사용하는 UI 컴포넌트의 JavaScript bundle만 가져오도록 만들 수 있습니다.
이 점은 SSR에서 중요합니다. 서버가 먼저 페이지를 렌더링하고, 브라우저는 큰 shared UI bundle 전체가 아니라 해당 페이지에 필요한 client component만 hydrate할 수 있습니다.
index.ts
page.tsx
Composite 컴포넌트
일부 UI API는 묶인 객체로 사용하는 편이 더 자연스럽습니다. 이 경우 폴더와 index 파일을 사용하고, library barrel에서는 Only.Admin 또는 Only.Web처럼 하나의 composite 이름으로 export합니다.
Only/Web.tsx
Only/index.tsx
libs/shared/ui/index.ts
page.tsx
실전 규칙
AutoClose.tsx가 AutoClose를 export하는 것처럼 1개 파일, 1개 export, 같은 이름을 우선합니다.
컴포넌트가 자연스럽게 묶인 API가 아니라면 app UI 폴더는 얕게 유지합니다.
Akan이 import를 최적화할 수 있도록 깊은 component 경로 대신 ui barrel에서 import합니다.
Only.Web 또는 Only.Admin처럼 namespace로 읽히는 API에는 composite folder를 사용합니다.
UI 폴더 개요
권장 구조
Barrel과 최적화 import
Composite 컴포넌트
실전 규칙
