[Spring+Vue] Stock-Application (3)

ww_ung·2025년 4월 1일

SKALA

목록 보기

18/25

이번에 배우게 된 Spring + Vue를 활용해 간단한 주식 시장 웹서비스를 구현하고자 한다.
이 글은 구현한 애플리케이션의 구조 설명 및 시연 화면등으로 구성될 예정이다.

그 중 BackEnd의 Spring과 FrontEnd Vue의 연동에 대한 설명이다.

Spring + Vue 연동

[ Vue ] <---- axios ----> [ Spring Boot REST API ] <----> [ DB ]

Vue에서 로그인, 주식 매수 등 요청 발생
axios를 통해 Spring API 호출 (/api/player, /api/trade)
Spring에서는 Controller → Service → Repository 순으로 처리 후 JSON 응답
응답 받은 데이터를 Vue가 렌더링

Controller → Service → Repository → DB
                ↓
 응답(JSON) ← DTO 변환 ←

1. vue(client) 사용자가 버튼 클릭으로 이벤트발생(주식추가)

POST /api/stock
{
  "name": "SK하이닉스",
  "price": 80000
}

2. Controller: HTTP 요청을 받아 @PostMapping, @GetMapping 으로 처리

@PostMapping("/api/stock")
public ResponseEntity<StockResponse> createStock(@RequestBody CreateStockRequest request) {
    return ResponseEntity.ok(stockService.createStock(request));
}

3. Service : 비즈니스 로직 수행(잔액확인, 거래처리 등)

public StockResponse createStock(CreateStockRequest request) {
    Stock stock = new Stock(request.getName(), request.getPrice());
    stockRepository.save(stock);
    return new StockResponse(stock);  // Entity → DTO
}

4. Entity(JPA) : DB 저장/조회 도메인객체

@Entity
public class Stock {
    @Id @GeneratedValue
    private Long id;

    private String name;
    private int price;
}

5. DTO : Entity를 클라이언트 응답용으로 변환

public class StockResponse {
    private Long id;
    private String name;
    private int price;

    public StockResponse(Stock stock) {
        this.id = stock.getId();
        this.name = stock.getName();
        this.price = stock.getPrice();
    }
}

6. 응답 : JSON응답 (화면 반영)

{
  "id": 1,
  "name": "SK하이닉스",
  "price": 80000
}

Vue 의 장점?

상대적으로 쉽습니다. (HTML,JS,CSS의 조합) → SFC
구조적으로 깔끔하고 직관적이며, 빠른 개발에 적합합니다
(특정 기능을 수행하는 컴포넌트를 찾고 수정할때 편리하여 유지보수의 원활)
axios + router 통합 구조: 스파(SPA) 환경에 최적화

따라서 규모가 작고 가벼운 프로젝트에는 매우 유용하다고 생각합니다.
너무 유연해서 유지보수시 통일된 컨벤션이 필요 → 팀마다 코드 스타일이 다름