Claude와 함께하는 아키텍처: 백엔드와 프런트엔드
건축 디자인은 Claude가 가장 뛰어난 분야 중 하나입니다. 그의 투명한 추론 덕분에 Claude는 당신이 탐색하는 데 도움을 줄 수 있습니다. 절충안, 아키텍처 패턴을 비교하고 영향을 미칠 정보에 근거한 결정을 내립니다. 프로젝트의 전체 라이프사이클.
이 기사에서는 Claude를 사용하여 백엔드 아키텍처를 설계하는 방법을 살펴보겠습니다. 와 스프링부트 그리고 프론트엔드 모난, 신청 중 솔루션 아키텍처 모범 사례.
무엇을 배울 것인가
- 절충안을 고려한 아키텍처 결정을 위해 Claude를 사용하세요.
- Clean/Hexagonal 아키텍처로 Spring Boot 백엔드 설계
- 확장 가능한 패턴으로 Angular 프런트엔드 구조화
- 프런트엔드와 백엔드 간의 API 계약 정의
- 버전 관리 및 오류 처리 관리
건축에서의 클로드의 역할
클로드는 다음과 같은 역할을 맡을 수 있습니다. 솔루션 설계자 당신을 안내하는 것입니다 복잡한 결정을 통해 핵심은 충분한 맥락과 정보를 제공하는 것입니다. 명시적으로 트레이드오프 분석을 요청합니다.
시스템 프롬프트: 솔루션 설계자
You are a Senior Solution Architect with 15+ years of experience
in enterprise software development.
EXPERTISE:
- Microservices architecture (Spring Boot, Kubernetes)
- Frontend architecture (Angular, React, Vue)
- Event-driven systems (Kafka, RabbitMQ)
- Cloud platforms (AWS, Azure, GCP)
- DDD, Clean Architecture, Hexagonal
COMMUNICATION STYLE:
- Always explain trade-offs for every recommendation
- Use diagrams (ASCII or Mermaid) when helpful
- Cite industry standards (12-factor app, SOLID, etc.)
- Challenge assumptions when they seem problematic
CONSTRAINTS:
- Prioritize maintainability over cleverness
- Consider team size and skill level
- Focus on practical, implementable solutions
- Always address security implications백엔드 아키텍처: Spring Boot
권장 아키텍처 패턴
백엔드 패턴 비교
| 패턴 | 복잡성 | 언제 사용하는가 | 절충안 |
|---|---|---|---|
| 계층형(MVC) | 낮은 | 단순 CRUD, MVP | 유연성이 낮고 결합도가 높음 |
| 클린 아키텍처 | 평균 | 복잡한 비즈니스 로직 | 더 많은 코드, 학습 곡선 |
| 육각형 | 중간-높음 | 다중 통합, 테스트 가능성 | 초기 오버헤드, 포트/어댑터 |
| CQRS | 높은 | 비대칭 읽기/쓰기, 확장성 | 인프라 복잡성 |
예: Spring Boot를 사용한 육각형 아키텍처
육각형 설계에 대한 프롬프트
<role>Sei un Senior Backend Architect specializzato in Spring Boot</role>
<context>
Progetto: Order Management per e-commerce
Stack: Spring Boot 3.2, PostgreSQL, Redis, Kafka
Team: 4 developers mid-level
Requisiti:
- CRUD ordini con stati complessi
- Integrazione payment gateway (Stripe)
- Notifiche async (email, push)
- Audit trail completo
</context>
<task>
Progetta una Hexagonal Architecture per l'Order Service.
Includi:
1. Struttura package completa
2. Definizione Ports (inbound/outbound)
3. Adapters per ogni integration
4. Use Cases principali
</task>
<output_format>
- Diagramma ASCII o Mermaid
- Struttura cartelle
- Interfacce chiave con signature
- Spiegazione delle scelte
</output_format>
육각형 스프링 부트 구조
order-service/
├── src/main/java/com/company/orders/
│ ├── domain/ # Core Business Logic
│ │ ├── model/
│ │ │ ├── Order.java # Aggregate Root
│ │ │ ├── OrderItem.java
│ │ │ ├── OrderStatus.java # Enum stati
│ │ │ └── Money.java # Value Object
│ │ ├── service/
│ │ │ └── OrderDomainService.java
│ │ └── event/
│ │ └── OrderEvent.java # Domain Events
│ │
│ ├── application/ # Use Cases / Ports
│ │ ├── port/
│ │ │ ├── in/ # Inbound Ports
│ │ │ │ ├── CreateOrderUseCase.java
│ │ │ │ ├── UpdateOrderStatusUseCase.java
│ │ │ │ └── GetOrderQuery.java
│ │ │ └── out/ # Outbound Ports
│ │ │ ├── OrderRepository.java
│ │ │ ├── PaymentGateway.java
│ │ │ ├── NotificationSender.java
│ │ │ └── EventPublisher.java
│ │ └── service/
│ │ └── OrderApplicationService.java
│ │
│ ├── adapter/ # Infrastructure
│ │ ├── in/ # Inbound Adapters
│ │ │ ├── web/
│ │ │ │ ├── OrderController.java
│ │ │ │ ├── dto/
│ │ │ │ │ ├── CreateOrderRequest.java
│ │ │ │ │ └── OrderResponse.java
│ │ │ │ └── mapper/
│ │ │ │ └── OrderDtoMapper.java
│ │ │ └── event/
│ │ │ └── OrderEventListener.java
│ │ └── out/ # Outbound Adapters
│ │ ├── persistence/
│ │ │ ├── OrderJpaRepository.java
│ │ │ ├── OrderPersistenceAdapter.java
│ │ │ └── entity/
│ │ │ └── OrderJpaEntity.java
│ │ ├── payment/
│ │ │ └── StripePaymentAdapter.java
│ │ ├── notification/
│ │ │ ├── EmailNotificationAdapter.java
│ │ │ └── PushNotificationAdapter.java
│ │ └── messaging/
│ │ └── KafkaEventPublisher.java
│ │
│ └── config/ # Spring Configuration
│ ├── BeanConfiguration.java
│ ├── PersistenceConfig.java
│ └── KafkaConfig.java주요 인터페이스(포트)
인바운드 포트 - CreateOrderUseCase.java
public interface CreateOrderUseCase {{ '{' }}
/**
* Crea un nuovo ordine validando disponibilità prodotti
* e iniziando il processo di pagamento.
*
* @param command contiene items, customer, payment info
* @return OrderId dell'ordine creato
* @throws InsufficientStockException se prodotti non disponibili
* @throws PaymentInitializationException se payment fallisce
*/
OrderId execute(CreateOrderCommand command);
{{ '}' }}
public record CreateOrderCommand(
CustomerId customerId,
List<OrderItemCommand> items,
ShippingAddress address,
PaymentMethod paymentMethod
) {{ '{' }}{{ '}' }}
아웃바운드 포트 - PaymentGateway.java
public interface PaymentGateway {{ '{' }}
/**
* Inizia una transazione di pagamento.
* Non completa il pagamento, solo lo inizializza.
*
* @param request dati pagamento
* @return PaymentIntent con clientSecret per frontend
*/
PaymentIntent initializePayment(PaymentRequest request);
/**
* Conferma un pagamento già autorizzato.
*
* @param paymentIntentId ID del payment intent
* @return risultato conferma
*/
PaymentConfirmation confirmPayment(String paymentIntentId);
/**
* Esegue refund parziale o totale.
*/
RefundResult refund(String paymentIntentId, Money amount);
{{ '}' }}프론트엔드 아키텍처: Angular
Angular에 권장되는 패턴
각도 프런트엔드 패턴
| 패턴 | 복잡성 | 언제 사용하는가 |
|---|---|---|
| 기능 기반 | 낮은 | 중소 프로젝트, 단일 팀 |
| 스마트/멍청한 구성 요소 | 평균 | 재사용성, 테스트 가능성 |
| 신호 + 서비스 | 평균 | 현대적인 상태 관리, Angular 17+ |
| NgRx | 높은 | 엔터프라이즈, 복잡한 상태, 고급 디버깅 |
예: 신호를 사용한 특징 기반
Angular Feature 기반 구조
src/app/
├── core/ # Servizi singleton
│ ├── services/
│ │ ├── api.service.ts # HTTP client base
│ │ ├── auth.service.ts
│ │ └── notification.service.ts
│ ├── guards/
│ │ └── auth.guard.ts
│ ├── interceptors/
│ │ ├── auth.interceptor.ts
│ │ └── error.interceptor.ts
│ └── models/
│ └── api-response.model.ts
│
├── shared/ # Componenti riutilizzabili
│ ├── components/
│ │ ├── button/
│ │ ├── modal/
│ │ ├── table/
│ │ └── form-field/
│ ├── pipes/
│ │ └── currency-format.pipe.ts
│ └── directives/
│ └── click-outside.directive.ts
│
├── features/ # Feature modules
│ ├── orders/
│ │ ├── components/
│ │ │ ├── order-list/ # Smart component
│ │ │ │ ├── order-list.component.ts
│ │ │ │ └── order-list.component.html
│ │ │ ├── order-card/ # Dumb component
│ │ │ │ ├── order-card.component.ts
│ │ │ │ └── order-card.component.html
│ │ │ └── order-detail/
│ │ ├── services/
│ │ │ └── order.service.ts # State + API
│ │ ├── models/
│ │ │ └── order.model.ts
│ │ └── orders.routes.ts
│ │
│ ├── products/
│ └── customers/
│
├── layouts/
│ ├── main-layout/
│ └── auth-layout/
│
└── app.routes.ts신호를 이용한 서비스
order.service.ts - 신호를 사용한 상태 관리
@Injectable({{ '{' }} providedIn: 'root' {{ '}' }})
export class OrderService {{ '{' }}
private http = inject(HttpClient);
// State
private ordersSignal = signal<Order[]>([]);
private loadingSignal = signal(false);
private errorSignal = signal<string | null>(null);
private selectedOrderSignal = signal<Order | null>(null);
// Public readonly signals
readonly orders = this.ordersSignal.asReadonly();
readonly loading = this.loadingSignal.asReadonly();
readonly error = this.errorSignal.asReadonly();
readonly selectedOrder = this.selectedOrderSignal.asReadonly();
// Computed signals
readonly pendingOrders = computed(() =>
this.ordersSignal().filter(o => o.status === 'PENDING')
);
readonly orderStats = computed(() => ({{ '{' }}
total: this.ordersSignal().length,
pending: this.pendingOrders().length,
totalRevenue: this.ordersSignal()
.filter(o => o.status === 'COMPLETED')
.reduce((sum, o) => sum + o.total, 0)
{{ '}' }}));
loadOrders(): void {{ '{' }}
this.loadingSignal.set(true);
this.errorSignal.set(null);
this.http.get<Order[]>('/api/orders').pipe(
catchError(err => {{ '{' }}
this.errorSignal.set('Errore nel caricamento ordini');
return of([]);
{{ '}' }}),
finalize(() => this.loadingSignal.set(false))
).subscribe(orders => this.ordersSignal.set(orders));
{{ '}' }}
createOrder(order: CreateOrderDto): Observable<Order> {{ '{' }}
return this.http.post<Order>('/api/orders', order).pipe(
tap(newOrder => {{ '{' }}
this.ordersSignal.update(orders => [...orders, newOrder]);
{{ '}' }})
);
{{ '}' }}
selectOrder(orderId: string): void {{ '{' }}
const order = this.ordersSignal().find(o => o.id === orderId);
this.selectedOrderSignal.set(order ?? null);
{{ '}' }}
{{ '}' }}API 계약: 프런트엔드-백엔드
디자인 API 계약 프롬프트
<task>
Definisci l'API contract REST per la gestione ordini.
Requisiti:
- RESTful con risorse annidate dove appropriato
- Paginazione per liste
- Error response standardizzate
- Versioning nell'URL (/api/v1/)
- HATEOAS links (opzionale)
</task>
<output_format>
Per ogni endpoint:
- Metodo HTTP + Path
- Request body (se POST/PUT)
- Response body con codici HTTP
- Esempi JSON
</output_format>
API 계약 - 주문
## Orders API v1
### Create Order
POST /api/v1/orders
Content-Type: application/json
Request:
{{ '{' }}
"customerId": "cust_123",
"items": [
{{ '{' }} "productId": "prod_456", "quantity": 2 {{ '}' }}
],
"shippingAddress": {{ '{' }}
"street": "Via Roma 1",
"city": "Milano",
"zipCode": "20100"
{{ '}' }},
"paymentMethod": "CARD"
{{ '}' }}
Response 201 Created:
{{ '{' }}
"id": "ord_789",
"status": "PENDING_PAYMENT",
"total": 99.99,
"createdAt": "2025-02-01T10:00:00Z",
"_links": {{ '{' }}
"self": {{ '{' }} "href": "/api/v1/orders/ord_789" {{ '}' }},
"payment": {{ '{' }} "href": "/api/v1/orders/ord_789/payment" {{ '}' }}
{{ '}' }}
{{ '}' }}
Response 400 Bad Request:
{{ '{' }}
"type": "validation_error",
"title": "Validation Failed",
"status": 400,
"errors": [
{{ '{' }}
"field": "items",
"message": "At least one item required"
{{ '}' }}
]
{{ '}' }}
### Get Orders (Paginated)
GET /api/v1/orders?page=0&size=20&status=PENDING
Response 200 OK:
{{ '{' }}
"content": [...],
"page": {{ '{' }}
"number": 0,
"size": 20,
"totalElements": 150,
"totalPages": 8
{{ '}' }}
{{ '}' }}표준화된 오류 처리
오류 응답 형식(RFC 7807)
// Backend: GlobalExceptionHandler.java
@RestControllerAdvice
public class GlobalExceptionHandler {{ '{' }}
@ExceptionHandler(OrderNotFoundException.class)
public ResponseEntity<ProblemDetail> handleNotFound(
OrderNotFoundException ex) {{ '{' }}
ProblemDetail problem = ProblemDetail.forStatusAndDetail(
HttpStatus.NOT_FOUND,
ex.getMessage()
);
problem.setType(URI.create("/errors/order-not-found"));
problem.setTitle("Order Not Found");
problem.setProperty("orderId", ex.getOrderId());
return ResponseEntity.status(404).body(problem);
{{ '}' }}
@ExceptionHandler(PaymentFailedException.class)
public ResponseEntity<ProblemDetail> handlePaymentFailed(
PaymentFailedException ex) {{ '{' }}
ProblemDetail problem = ProblemDetail.forStatusAndDetail(
HttpStatus.PAYMENT_REQUIRED,
"Payment processing failed"
);
problem.setType(URI.create("/errors/payment-failed"));
problem.setProperty("reason", ex.getReason());
problem.setProperty("retryable", ex.isRetryable());
return ResponseEntity.status(402).body(problem);
{{ '}' }}
{{ '}' }}
프런트엔드: 오류 인터셉터
// error.interceptor.ts
export const errorInterceptor: HttpInterceptorFn = (req, next) => {{ '{' }}
const notification = inject(NotificationService);
return next(req).pipe(
catchError((error: HttpErrorResponse) => {{ '{' }}
const problemDetail = error.error as ProblemDetail;
switch (error.status) {{ '{' }}
case 400:
notification.showError(
problemDetail.title ?? 'Validation Error'
);
break;
case 401:
// Redirect to login
break;
case 404:
notification.showWarning(
problemDetail.detail ?? 'Resource not found'
);
break;
case 500:
notification.showError(
'Server error. Please try again later.'
);
break;
{{ '}' }}
return throwError(() => error);
{{ '}' }})
);
{{ '}' }};아키텍처 체크리스트
개발 시작 전 체크리스트
- 백엔드 아키텍처 패턴이 정의되고 문서화되었습니다.
- 합의된 프런트엔드/백엔드 폴더 구조
- 예제와 함께 문서화된 API 계약
- 표준화된 오류 처리(RFC 7807)
- API 버전 관리 전략이 정의됨
- 합의된 명명 규칙
- ADR에 문서화된 결정
결론 및 다음 단계
이 기사에서는 Claude를 사용하여 아키텍처를 설계하는 방법을 살펴보았습니다. Spring Boot 백엔드와 Angular 프론트엔드에서는 견고합니다. 우리는 다음을 조사했습니다.
- 아키텍처 패턴과 장단점
- Spring Boot를 사용한 육각형 아키텍처
- Angular 및 신호를 사용한 기능 기반 구조
- API 계약 설계
- 표준화된 오류 처리
에서 다음 기사, 우리는 그것에 대해 더 깊이 탐구할 것입니다 구조 코드의: 폴더 구성, 명명 규칙, 분리 우려 사항 및 구성 관리.
기억해야 할 핵심 사항
- 우선 절충안: 항상 Claude에게 장단점을 분석하도록 요청하세요.
- 통합을 위한 육각형: 기술적인 세부 사항에서 비즈니스 로직을 분리
- Angular 17+에 대한 신호: 간단하고 반응성이 뛰어난 상태 관리
- 계약 API: 구현하기 전에 정의하십시오.
- 문서 결정: ADR을 사용하여 선택 사항 추적