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

그 중 FrontEnd의 Vue에 대한 설명이다.

기본 프로젝트 정보

npm create vue@latest frontend

프롬프트에서 설정:
✔ Project name: … frontend ← 그대로 Enter
✔ Add TypeScript? › No ← ❌ (기본 JavaScript로)
✔ Add JSX Support? › No ← ❌
✔ Add Vue Router for Single Page Application development? › Yes ← ✅
✔ Add Pinia for state management? › No ← ❌ (필요하면 나중에 추가 가능)
✔ Add Vitest for Unit Testing? › No ← ❌
✔ Add Cypress for both Unit and End-to-End testing? › No ← ❌
✔ Add ESLint for code quality? › No ← ❌
✔ Add Prettier for code formatting? › No ← ❌

Vue(FrontEnd)

파일 구조

src/
  main.js                    ← 진입점: 앱 초기화 및 마운트
  App.vue                    ← 루트 컴포넌트
  components/                ← 재사용 가능한 UI 컴포넌트
    StockForm.vue           ← 주식 등록용 폼
    PlayerForm.vue          ← 사용자 등록용 폼
  views/                     ← 페이지 단위 컴포넌트 (라우터에 연결됨)
    HomeView.vue            ← 메인 홈 페이지
    LoginView.vue           ← 로그인 화면
    PlayerView.vue          ← 사용자 정보 및 주식 보유 현황
    StockView.vue           ← 주식 목록/등록 페이지
    AboutView.vue           ← 예시용 뷰 (삭제 가능)
  api/                       ← 백엔드와 통신하는 axios API 모듈
    axios.js                ← 공통 axios 인스턴스 설정
    stock.js                ← 주식 관련 API 모듈
  router/                    ← Vue Router 설정
    index.js                ← URL 경로별 페이지 연결 정의
  assets/
    main.css                ← 전역 스타일 정의

main.js

• Vue 앱 생성 및 App.vue를 기반으로 렌더링
• Vue Router를 전역으로 사용하도록 등록

router/index.js

• URL 경로 ↔ 화면 컴포넌트 매핑
• SPA 방식의 페이지 전환 지원

components/

• PlayerForm.vue: 사용자 등록용 입력 폼 (아이디, 비밀번호, 초기 자산)
• StockForm.vue: 주식 등록용 폼 (이름, 가격 등)

api

• axios.js: axios 인스턴스를 생성해 기본 URL 및 공통 설정 정의
• stock.js: registerStock, getStocks 등 주식 관련 API 호출 함수 정의

views/

• HomeView.vue: 로그인 창, 주식 정보 요약 등 메인 페이지 역할
• LoginView.vue: 로그인 기능 UI
• PlayerView.vue: 사용자 정보, 보유 주식, 자산 상태 표시
• StockView.vue: 전체 주식 목록 및 주식 추가 폼

App.vue

• 실제 모든 페이지가 렌더링되는 루트 컴포넌트
• <router-view />로 현재 URL에 따른 페이지를 자동 출력

---

[깃허브 소스코드]

Skala-Stock-Server
Skala-Stock-Front