Post 엔티티를 만들고, 데이터베이스 테이블을 생성하며, 스캐폴딩으로 Model 파일을 자동 생성하는 방법을 알아봅니다.
전제 조건
- 빠른 시작 가이드를 완료하고 개발 서버가 실행 중이어야 합니다.
- API 서버가 http://localhost:1028 에서 실행 중이어야 합니다.
1단계: Sonamu UI 접속
브라우저에서 http://localhost:1028/sonamu-ui 로 접속합니다.📸 필요: Sonamu UI 메인 화면 (Entity, Migration, Scaffolding 탭이 보이는 전체 UI)
- 엔티티 생성 및 편집
- 필드 추가/수정/삭제
- 관계(Relation) 정의
- Enum 타입 관리
- Subset 정의
- 마이그레이션 생성 및 실행
- 스캐폴딩 (Model 파일 자동 생성)
2단계: 새 엔티티 생성
Entity 탭 클릭
📸 필요: Entity 탭 클릭 후 화면 (엔티티 목록 또는 빈 화면)
Add Entity 버튼
📸 필요: Add Entity 다이얼로그 또는 모달 창
기본 정보 입력
- Entity ID:
Post(대문자로 시작, 단수형) - Table Name:
posts(소문자, 복수형) - Title:
게시글
📸 필요: Post 엔티티 기본 정보 입력 완료된 폼
3단계: 필드 정의
이제Post 엔티티에 필드들을 추가합니다:
기본 필드 추가
| 필드명 | 타입 | 설명 | 옵션 |
|---|---|---|---|
id | integer | ID | Primary Key |
created_at | date | 생성일시 | DB Default: CURRENT_TIMESTAMP |
title | string | 제목 | Length: 255 |
content | string | 내용 | - |
author | string | 작성자 | Length: 100 |
view_count | integer | 조회수 | DB Default: 0 |
각 필드 설정 방법
각 필드 설정 방법
- Name:
id - Type:
integer - Description:
ID - ✅ Is Primary 체크
- Name:
created_at - Type:
date - Description:
생성일시 - DB Default:
CURRENT_TIMESTAMP
- Name:
title - Type:
string - Description:
제목 - Length:
255
- Name:
content - Type:
string - Description:
내용 - Length: 빈칸 (TEXT 타입으로 생성됨)
- Name:
author - Type:
string - Description:
작성자 - Length:
100
- Name:
view_count - Type:
integer - Description:
조회수 - DB Default:
0
📸 필요: 필드 추가 UI (Add Field 버튼과 모든 필드가 추가된 필드 리스트)
Subset 정의
- Subset A (All):
id,created_at,title,content,author,view_count - Subset C (Compact):
id,title,author,view_count,created_at
📸 필요: Subset 편집 화면 (Subset A와 C가 정의된 상태)
Enum 정의
id-desc: ID 최신순created_at-desc: 생성일시 최신순view_count-desc: 조회수 높은순
id: IDtitle: 제목author: 작성자
📸 필요: Enum 편집 화면 (PostOrderBy, PostSearchField 정의된 상태)
저장
📸 필요: 저장 완료 메시지 또는 토스트 알림
api/src/application/post/post.entity.json(엔티티 정의)api/src/application/post/post.types.ts(타입 및 Zod 스키마)api/src/application/sonamu.generated.ts(Base 스키마)
4단계: 데이터베이스 마이그레이션
이제 엔티티 정의를 데이터베이스에 반영해야 합니다.Migration 탭으로 이동
📸 필요: Migration 탭 화면 (마이그레이션 목록 또는 Generate Migration 버튼)
마이그레이션 생성
📸 필요: 생성된 마이그레이션 SQL 미리보기 화면
마이그레이션 실행
📸 필요: 마이그레이션 실행 완료 메시지 또는 성공 알림
확인
posts 테이블이 생성되었는지 확인합니다.5단계: 스캐폴딩 (Model 파일 자동 생성)
마이그레이션이 완료되면 Sonamu의 스캐폴딩 기능으로 Model 파일을 자동 생성할 수 있습니다.Scaffolding 탭으로 이동
📸 필요: Scaffolding 탭 화면 (엔티티 목록 및 템플릿 선택 UI)
Post 엔티티 선택
템플릿 선택
- ✅ Model -
post.model.ts(비즈니스 로직 및 API 엔드포인트) - ✅ Model Test -
post.model.test.ts(테스트 파일)
📸 필요: 템플릿 선택 UI (Model, Model Test 체크박스가 선택된 상태)
미리보기 (선택사항)
📸 필요: 코드 미리보기 모달 (생성될 model.ts 코드)
생성
📸 필요: 스캐폴딩 완료 메시지 (생성된 파일 경로 표시)
api/src/application/post/post.model.tsapi/src/application/post/post.model.test.ts
6단계: 생성된 Model 파일 확인
스캐폴딩으로 생성된post.model.ts 파일을 확인해봅시다:
📸 필요: VS Code에서 열린 post.model.ts 파일 전체 화면
📸 필요: 터미널에서 HMR 재시작 로그 (✓ Detected changes in post.model.ts)
7단계: 프론트엔드 Service 자동 생성
API를 작성하면 프론트엔드 Service 파일이 자동으로 생성됩니다.📸 필요: VS Code에서 web/src/services/PostService.ts 파일이 생성된 화면
8단계: API 테스트
이제 API가 정상적으로 작동하는지 테스트해봅니다.REST Client로 테스트
브라우저에서 테스트
http://localhost:1028/api/posts?subset=C 로 접속하여 JSON 응답을 확인합니다.📸 필요: 브라우저에서 API 응답 JSON 화면 (게시글 목록 데이터)
완성! 🎉
축하합니다! 첫 번째 엔티티를 성공적으로 만들었습니다. 지금까지 다음 작업을 완료했습니다:- ✅ Sonamu UI로 엔티티 정의
- ✅ 데이터베이스 테이블 생성
- ✅ 타입 및 스키마 자동 생성
- ✅ 스캐폴딩으로 Model 및 Test 파일 자동 생성
- ✅ REST API 자동 생성
- ✅ 프론트엔드 Service 자동 생성
- ✅ API 테스트
