Vue.js와 Node.js를 활용한 실시간 주식 시세 표시 웹 애플리케이션 개발 가이드: RESTful API, WebSocket, 차트 라이브러리 통합

 

Vue.js와 Node.js를 활용하여 실시간 주식 시세를 표시하는 웹 애플리케이션을 개발하는 과정을 단계별로 자세히 설명하고, 실제 코드와 함께 예시를 제시합니다. 이 가이드를 통해 독자들은 Vue.js와 Node.js를 이용하여 실시간 데이터를 처리하고 시각화하는 웹 애플리케이션을 개발하는 데 필요한 지식과 기술을 습득할 수 있을 것입니다.

1. 프로젝트 개요

본 프로젝트는 Vue.js를 사용하여 사용자 인터페이스를 구축하고, Node.js를 사용하여 백엔드 서버를 구축하여 실시간 주식 시세를 표시하는 웹 애플리케이션을 개발하는 것을 목표로 합니다. 주요 기능은 다음과 같습니다.

• 실시간 주식 시세 표시: 외부 주식 데이터 API를 통해 실시간 주식 시세를 가져와 화면에 표시합니다.
• WebSocket 통신: 서버와 클라이언트 간 실시간 데이터 전송을 위해 WebSocket을 사용합니다.
• 차트 기능: 주식 가격 변동을 시각적으로 보여주기 위해 차트 라이브러리를 활용합니다.
• 사용자 인터페이스: 직관적인 사용자 인터페이스를 제공하여 사용자가 쉽게 주식 정보를 확인할 수 있도록 합니다.

2. 개발 환경 설정

• Node.js 및 npm 설치: Node.js 공식 웹사이트에서 설치합니다.
• Vue CLI 설치: npm install -g @vue/cli 명령어를 실행하여 Vue CLI를 설치합니다.
• 프로젝트 생성: vue create my-stock-app 명령어를 실행하여 Vue 프로젝트를 생성합니다.

3. 백엔드 개발 (Node.js)

• Express.js 설치: npm install express ws axios 명령어를 실행하여 Express.js, WebSocket, axios를 설치합니다.
• RESTful API 구현: 외부 주식 데이터 API를 호출하여 주식 정보를 가져오는 API를 구현합니다.
• WebSocket 서버 구현: WebSocket 서버를 생성하고 클라이언트와 실시간으로 통신합니다.
• 데이터 전송: 정기적으로 주식 데이터를 가져와 WebSocket을 통해 클라이언트에 전송합니다.

4. 프론트엔드 개발 (Vue.js)

• Vue.js 컴포넌트 생성: 주식 정보를 표시하는 컴포넌트를 생성합니다.
• 데이터 초기화: 초기 주식 데이터를 가져와 화면에 표시합니다.
• WebSocket 연결: WebSocket 서버에 연결하여 실시간 데이터를 수신합니다.
• 데이터 업데이트: 수신된 데이터를 기반으로 화면을 업데이트합니다.
• 차트 라이브러리 통합: Chart.js와 같은 차트 라이브러리를 사용하여 주식 가격 변동을 시각화합니다.

5. 실시간 데이터 처리

• WebSocket을 통한 데이터 전송: 서버에서 주기적으로 주식 데이터를 가져와 WebSocket을 통해 클라이언트에 전송합니다.
• 클라이언트에서 데이터 수신: 클라이언트는 WebSocket을 통해 서버에서 전송된 데이터를 수신하고 화면을 업데이트합니다.
• 데이터 바인딩: Vue.js의 데이터 바인딩 기능을 활용하여 데이터를 화면에 실시간으로 반영합니다.

6. 차트 기능 구현

• 차트 라이브러리 선택: Chart.js, D3.js 등 다양한 차트 라이브러리 중 하나를 선택합니다.
• 차트 데이터 준비: 수신된 주식 데이터를 차트 라이브러리에서 사용할 수 있는 형식으로 가공합니다.
• 차트 생성 및 업데이트: 차트를 생성하고 실시간으로 데이터를 업데이트합니다.

7. 추가 기능 구현

• 사용자 설정: 사용자가 원하는 주식 목록을 추가/삭제할 수 있도록 기능을 구현합니다.
• 알림 기능: 특정 조건(예: 가격 변동률)을 만족할 때 알림을 제공합니다.
• 모바일 지원: 반응형 디자인을 적용하여 모바일 환경에서도 사용할 수 있도록 합니다.

8. 배포

• 빌드: Vue.js 프로젝트를 빌드하여 배포용 파일을 생성합니다.
• 서버 배포: Node.js 서버를 클라우드 플랫폼(AWS, GCP, Azure 등)에 배포합니다.
• 프론트엔드 배포: 빌드된 파일을 웹 서버에 배포합니다.

핵심 기술: Vue.js, Node.js, WebSocket, RESTful API, 차트 라이브러리 (Chart.js, D3.js 등), axios, Express.js

개발 과정:

1. 프로젝트 초기 설정: 개발 환경 설정, 프로젝트 생성
2. 백엔드 개발: Node.js 서버 구축, RESTful API 구현, WebSocket 서버 구현
3. 프론트엔드 개발: Vue.js 컴포넌트 생성, 데이터 초기화, WebSocket 연결, 데이터 업데이트, 차트 구현
4. 테스트 및 디버깅: 개발 과정에서 지속적으로 테스트를 진행하고 문제를 해결합니다.
5. 배포: 빌드된 파일을 서버에 배포합니다.

주의 사항:

• 데이터 보안: 사용자 정보를 안전하게 관리하기 위해 적절한 보안 조치를 취해야 합니다.
• 성능 최적화: 많은 양의 데이터를 실시간으로 처리해야 하므로 성능 최적화에 신경 써야 합니다.
• 오류 처리: 예상치 못한 오류 발생에 대비하여 적절한 오류 처리 로직을 구현해야 합니다.

728x90

실시간 주식 가격 정보를 보여주는 애플리케이션을 Vue.js로 구현하려면 RESTful API와 WebSocket을 활용하여 데이터를 수집하고 화면에 렌더링해야 합니다. 여기서는 주식 데이터 API와 WebSocket 서버를 함께 구현하여 7대 주식의 실시간 정보를 표시하는 예제를 설명드리겠습니다.

---

1. 프로젝트 구조

• Vue.js 프론트엔드: 주식 정보를 실시간으로 표시.
• Node.js 백엔드: 주식 데이터를 수집하고 WebSocket을 통해 클라이언트에 전송.
• 외부 주식 데이터 API: Yahoo Finance 또는 Alpha Vantage 등을 사용.

---

2. 백엔드: Node.js 서버

주식 데이터 수집 및 WebSocket 서버

아래는 Node.js 서버 코드입니다. 외부 API를 사용해 데이터를 가져오고 WebSocket을 통해 클라이언트에 실시간 데이터를 전달합니다.

const express = require("express");
const WebSocket = require("ws");
const axios = require("axios");

const app = express();
const PORT = 3000;
const WS_PORT = 8080;

// 7대 주식 목록 (예시)
const stocks = ["AAPL", "GOOGL", "AMZN", "MSFT", "TSLA", "NVDA", "META"];

// RESTful API 엔드포인트
app.get("/stocks", async (req, res) => {
  try {
    const prices = await fetchStockPrices();
    res.json(prices);
  } catch (error) {
    res.status(500).send("Failed to fetch stock prices");
  }
});

// WebSocket 서버
const wss = new WebSocket.Server({ port: WS_PORT });

wss.on("connection", (ws) => {
  console.log("Client connected");

  const sendStockPrices = async () => {
    const prices = await fetchStockPrices();
    ws.send(JSON.stringify(prices));
  };

  const interval = setInterval(sendStockPrices, 5000); // 5초마다 데이터 전송

  ws.on("close", () => {
    console.log("Client disconnected");
    clearInterval(interval);
  });
});

// 외부 API에서 주식 가격 가져오기
async function fetchStockPrices() {
  const apiKey = "YOUR_API_KEY"; // Alpha Vantage 또는 Yahoo Finance API 키
  const promises = stocks.map(async (symbol) => {
    const url = `https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=${apiKey}`;
    const response = await axios.get(url);
    return {
      symbol,
      price: response.data["Global Quote"]["05. price"], // 가격 데이터
    };
  });

  return Promise.all(promises);
}

app.listen(PORT, () => console.log(`RESTful API listening on port ${PORT}`));
console.log(`WebSocket server running on port ${WS_PORT}`);

---

3. 프론트엔드: Vue.js

주식 데이터 표시

주식 데이터를 RESTful API로 초기 로드한 후 WebSocket으로 실시간 업데이트를 받는 Vue.js 코드입니다.

<template>
  <div id="app">
    <h1>실시간 주식 가격</h1>
    <table>
      <thead>
        <tr>
          <th>주식</th>
          <th>현재 가격</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="stock in stocks" :key="stock.symbol">
          <td>{{ stock.symbol }}</td>
          <td>{{ stock.price ? `$${parseFloat(stock.price).toFixed(2)}` : "불러오는 중..." }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      stocks: [], // 주식 데이터를 저장
    };
  },
  async created() {
    await this.fetchInitialStocks(); // 초기 데이터 로드
    this.initWebSocket(); // WebSocket 초기화
  },
  methods: {
    async fetchInitialStocks() {
      try {
        const response = await axios.get("http://localhost:3000/stocks");
        this.stocks = response.data;
      } catch (error) {
        console.error("Failed to fetch initial stocks:", error);
      }
    },
    initWebSocket() {
      const socket = new WebSocket("ws://localhost:8080");

      socket.onmessage = (event) => {
        this.stocks = JSON.parse(event.data);
      };

      socket.onerror = (error) => {
        console.error("WebSocket error:", error);
      };
    },
  },
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 20px;
}

table {
  width: 50%;
  margin: 0 auto;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f4f4f4;
}

td {
  text-align: center;
}
</style>

---

4. 실행

1. 백엔드 실행:
   • Node.js 서버를 실행하여 RESTful API와 WebSocket 서버를 활성화합니다.

   node server.js
   

2. Vue.js 프론트엔드 실행:
   • Vue 개발 서버를 실행합니다.

   npm run serve
   

3. 브라우저에서 확인:
   • 브라우저에서 http://localhost:8080에 접속하여 실시간 주식 가격을 확인합니다.

---

 

 

5. 확장 아이디어

• 가격 변동 시 색상 표시: 가격 상승은 초록색, 하락은 빨간색으로 표시.
• 차트 통합: 주식 변동 추세를 표시하는 차트 추가 (e.g., Chart.js).
• 사용자 설정: 사용자가 원하는 주식 목록을 추가/삭제할 수 있도록 구현.

이 예제를 실행하면 실시간으로 7대 주식 가격을 표시하는 전광판 형태의 애플리케이션이 완성됩니다. 추가 기능이 필요하면 말씀해주세요!

 

728x90

 

Chart.js를 활용하여 7대 주식 가격의 실시간 대시보드를 만들어 보겠습니다. 여기서는 라인 차트를 사용해 각 주식의 가격 변동을 실시간으로 표시하며, 추가로 데이터를 시각화할 수 있는 기능을 제공합니다.

---

1. 프로젝트 구조 확장

기존 Vue.js 프로젝트에 Chart.js를 추가하여 주식 가격 변동을 시각화합니다.

Chart.js 설치

npm install chart.js vue-chartjs

---

2. Vue.js 컴포넌트: Chart.js 통합

StockChart.vue (주식 차트 컴포넌트)

<template>
  <div>
    <h2>주식 가격 변동</h2>
    <line-chart :chart-data="chartData" :chart-options="chartOptions" />
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { LineChart } from "vue-chartjs";
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement,
} from "chart.js";

// Chart.js 플러그인 등록
ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement);

export default defineComponent({
  components: {
    LineChart,
  },
  props: {
    stocks: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const chartData = ref({
      labels: [], // 타임스탬프 라벨
      datasets: props.stocks.map((stock) => ({
        label: stock.symbol,
        data: [],
        fill: false,
        borderColor: getRandomColor(), // 주식별 랜덤 색상
        tension: 0.1,
      })),
    });

    const chartOptions = {
      responsive: true,
      plugins: {
        legend: { position: "top" },
        title: { display: true, text: "실시간 주식 가격" },
      },
    };

    const updateChart = (newStocks) => {
      const timestamp = new Date().toLocaleTimeString(); // 현재 시간
      chartData.value.labels.push(timestamp);

      newStocks.forEach((stock, index) => {
        chartData.value.datasets[index].data.push(stock.price);
      });

      // 오래된 데이터 삭제 (50개 초과 시)
      if (chartData.value.labels.length > 50) {
        chartData.value.labels.shift();
        chartData.value.datasets.forEach((dataset) => dataset.data.shift());
      }
    };

    // 랜덤 색상 생성기
    function getRandomColor() {
      const letters = "0123456789ABCDEF";
      return `#${Array.from({ length: 6 })
        .map(() => letters[Math.floor(Math.random() * 16)])
        .join("")}`;
    }

    return {
      chartData,
      chartOptions,
      updateChart,
    };
  },
});
</script>

---

3. App.vue와 Chart 통합

App.vue

StockChart 컴포넌트를 추가하고 WebSocket 데이터 업데이트 시 차트를 갱신합니다.

<template>
  <div id="app">
    <h1>실시간 주식 대시보드</h1>
    <table>
      <thead>
        <tr>
          <th>주식</th>
          <th>현재 가격</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="stock in stocks" :key="stock.symbol">
          <td>{{ stock.symbol }}</td>
          <td>{{ stock.price ? `$${parseFloat(stock.price).toFixed(2)}` : "불러오는 중..." }}</td>
        </tr>
      </tbody>
    </table>

    <stock-chart :stocks="stocks" ref="chart" />
  </div>
</template>

<script>
import axios from "axios";
import StockChart from "./components/StockChart.vue";

export default {
  components: {
    StockChart,
  },
  data() {
    return {
      stocks: [], // 주식 데이터를 저장
    };
  },
  async created() {
    await this.fetchInitialStocks(); // 초기 데이터 로드
    this.initWebSocket(); // WebSocket 초기화
  },
  methods: {
    async fetchInitialStocks() {
      try {
        const response = await axios.get("http://localhost:3000/stocks");
        this.stocks = response.data;
      } catch (error) {
        console.error("Failed to fetch initial stocks:", error);
      }
    },
    initWebSocket() {
      const socket = new WebSocket("ws://localhost:8080");

      socket.onmessage = (event) => {
        const updatedStocks = JSON.parse(event.data);
        this.stocks = updatedStocks;
        this.$refs.chart.updateChart(updatedStocks); // 차트 업데이트
      };

      socket.onerror = (error) => {
        console.error("WebSocket error:", error);
      };
    },
  },
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 20px;
}

table {
  width: 50%;
  margin: 0 auto;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f4f4f4;
}

td {
  text-align: center;
}

h2 {
  margin-top: 40px;
}
</style>

---

4. 실행

1. 백엔드 실행:
   • Node.js 서버를 실행합니다.

   node server.js
   

2. Vue.js 실행:
3. npm run serve
4. 브라우저에서 확인:
   • http://localhost:8080에 접속하여 실시간 주식 가격 테이블과 차트를 확인합니다.

---

5. 결과

• 테이블: 각 주식의 현재 가격이 표시됩니다.
• 차트: 주식의 가격 변동이 실시간으로 업데이트됩니다.

---

6. 추가 기능

• 사용자 지정 주식 목록: 사용자가 관심 있는 주식을 추가하도록 설정.
• 가격 변동 알림: 특정 주식이 설정한 한계를 넘으면 알림 표시.
• 다중 차트: 주식 그룹별로 차트를 분리.

이 구성을 확장하면 주식 대시보드로 활용 가능한 고도화된 애플리케이션을 개발할 수 있습니다. 추가적으로 필요한 사항이 있으면 말씀해 주세요!