image
Akan.js
English
DocsConventionsReferencesCheatsheet
image
Akan.js
DocsConventionsReferencesCheatsheet
MIT 라이선스 하에 배포되었습니다.
Akan.js 공식 컨설팅 서비스Akansoft
Copyright © 2026 Akan.js 모든 권리 보유.
시스템 관리자bassman
일반
• 인증
• 스키마 설계
• 엣지 컴퓨팅
• 파일 관리
• Single Sign-On
• DataList & Enum
인터페이스
• CRUD
• Endpoint
• Form
관측성
• 로깅
• 의존성 주입
• 에러 처리
• 메트릭
성능
• 캐싱
• 이미지 최적화
• 지연 로딩
• 쿼리
• 큐
• 실시간
개발
• 문서화
• 스크립트
• 도커
• 쿠버네티스
일반
• 인증
• 스키마 설계
• 엣지 컴퓨팅
• 파일 관리
• Single Sign-On
• DataList & Enum
인터페이스
• CRUD
• Endpoint
• Form
관측성
• 로깅
• 의존성 주입
• 에러 처리
• 메트릭
성능
• 캐싱
• 이미지 최적화
• 지연 로딩
• 쿼리
• 큐
• 실시간
개발
• 문서화
• 스크립트
• 도커
• 쿠버네티스
Next
인증

적은 코드로 CRUD 만들기

CRUD는 보통 가장 먼저 만드는 화면입니다. 목록을 보고, 하나를 열고, 새로 만들고, 수정하고, 삭제합니다. Akan에서는 이런 작업 대부분이 model slice 주변에 이미 준비되어 있습니다.
  • Slice는 이 화면이 어떤 데이터를 읽고 수정할 수 있는지 정합니다.
  • Template은 form field를 그립니다.
  • Load와 Model component는 slice를 UI 동작에 연결합니다.

Slice부터 시작하기

Slice는 model을 바라보는 이름 붙은 창입니다. `inPublic`, `inAdmin`, `inProject`처럼 화면 목적이 드러나는 이름을 붙이세요.
Post slice

목록과 열기

`Load.Units`는 목록을 그립니다. `Model.ViewEditModal`을 목록 옆에 두면 상세 보기와 수정 modal 흐름을 함께 처리할 수 있습니다.
Post list zone

생성하고 수정하기

생성과 수정에는 같은 Template을 재사용하세요. wrapper가 form state를 준비하고, Template은 field만 신경 쓰면 됩니다.
생성 page
수정 modal

삭제는 Util에 두기

삭제 버튼은 여러 곳에 나타나는 경우가 많습니다. `Post.Util.tsx`에 두면 Unit, View, Zone 파일이 단순해집니다.
삭제 helper

꿀팁

  • Slice 이름은 DB query보다 화면 목적에 맞춰 짓는 것이 좋습니다.
  • Template은 단순하게 유지하세요. 대부분 form state를 읽고 field를 그리면 됩니다.
  • 삭제, 발행, 승인, dialog 열기처럼 반복되는 동작은 Util component로 빼세요.
적은 코드로 CRUD 만들기
Slice부터 시작하기
목록과 열기
생성하고 수정하기
삭제는 Util에 두기
꿀팁