자 이제 고객들이 주문을 전산화하고자 합니다. 요거트 아이스크림 주문은 단순합니다. 요거트 베이스 아이스크림 양을 소, 중, 대로 선택하고 원하는 토핑을 체크해서 주문을 할 수 있게 해야 합니다.
Akan.js에서는 기능을 "모듈"로 구성합니다. 모듈은 하나의 기능과 관련된 모든 것을 처리하는 완전한 패키지라고 생각하면 됩니다. 아이스크림 주문 모듈은 아이스크림 주문을 생성, 표시, 관리하는 데 필요한 모든 코드를 포함합니다.
모듈을 생성하면 Akan.js가 일관된 패턴에 따라 필요한 모든 파일을 자동으로 생성합니다. 이렇게 하면 코드가 체계적으로 정리되고 이해하기 쉬워집니다.
| 1 | 후르트링 |
|---|
| 2 | 오레오 |
|---|
| 3 | 딸기 |
|---|
| 4 | 망고 |
|---|
| 5 | 치즈큐브 |
|---|
| 6 | 옥수수 |
|---|
| 7 | 그래놀라 |
|---|
| 8 | 바나나 |
|---|
| 9 | 무화과 |
|---|
이제 아이스크림 주문에 대한 도메인 모듈을 만들어봅시다. 도메인 이름은 icecreamOrder로, 아이스크림 개별 주문 건에 대한 정보를 저장하고 있는 객체입니다.
이 명령어는 모듈을 어떤 애플리케이션에 추가할지 묻습니다 - 우리의 아이스크림 가게 앱이므로 "koyo"를 선택하세요. 모듈 이름 "icecreamOrder"는 이 모듈이 무엇을 처리하는지 설명합니다.
이 명령어를 실행하면 Akan.js가 필요한 모든 파일이 포함된 완전한 폴더 구조를 생성합니다. 무엇이 생성되는지 살펴봅시다:
각 파일은 아이스크림 주문 기능을 구성하는 데 특정한 목적을 가지고 있습니다:
📋constant.ts: 아이스크림 주문이 어떻게 생겼는지 정의 (사이즈, 토핑 등)
🌍dictionary.ts: 기술적 용어를 사용자 친화적인 언어로 번역
🗄️document.ts: 데이터베이스 저장 및 검색 처리
⚙️service.ts: 비즈니스 로직 포함 (주문 생성, 가격 계산)
🔗signal.ts: API 호출로 프론트엔드와 백엔드 연결
📦store.ts: 폼 상태 및 사용자 상호작용 관리
🎨UI 파일들 (.tsx): 고객이 보고 상호작용하는 시각적 컴포넌트 생성
지금 당장 모든 파일을 이해할 필요는 없습니다! 단계별로 차근차근 진행해보겠습니다. 중요한 것은 Akan.js가 이런 체계적인 구조를 기반으로 작동한다는 것입니다.
