자바스크립트와 React.js를 사용한 실시간 주식 시장 모니터링 애플리케이션 제작하기

09 Nov 2023

reactjs

서론

주식 시장은 매초마다 변동되는 동적인 데이터를 가지고 있어 실시간으로 모니터링할 필요가 있습니다. 이번 글에서는 자바스크립트와 React.js를 사용하여 실시간으로 주식 시장 데이터를 가져와 모니터링하는 애플리케이션을 제작하는 방법을 살펴보겠습니다.

필요한 기술과 도구

이 프로젝트를 위해 다음과 같은 도구와 기술을 사용할 것입니다:

Node.js: 서버 사이드에서 API를 호출하고 데이터를 처리하기 위해 사용합니다.
React.js: 사용자 인터페이스를 구축하기 위해 사용합니다.
WebSocket: 실시간 데이터 업데이트를 수신하기 위해 사용합니다.
CSS: 애플리케이션의 스타일링을 위해 사용합니다.

프로젝트 구조 설정

먼저, 프로젝트 구조를 설정해야 합니다. 다음과 같은 구조를 가진 폴더를 생성해줍니다:

project/
  |- src/
     |- components/
        |- StockList.js
        |- StockItem.js
     |- App.js
     |- App.css
  |- server.js
  |- package.json

src/components 폴더는 주식 목록과 주식 항목을 렌더링하는 React 컴포넌트를 포함합니다.
App.js 파일은 주식 목록을 가져오고 렌더링하는 최상위 React 컴포넌트입니다.
server.js 파일은 Node.js 서버를 설정하고 주식 시장 데이터를 가져오는 API를 제공합니다.
package.json 파일은 프로젝트에 필요한 종속성을 정의합니다.

Node.js 서버 설정

먼저, server.js 파일을 열고 다음과 같이 작성합니다:

const express = require('express');
const WebSocket = require('ws');

const app = express();
const server = require('http').createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  // 실시간으로 주식 시장 데이터를 전송하는 로직을 작성합니다.
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

위 코드에서는 Express와 WebSocket을 사용하여 간단한 서버를 설정합니다. 커넥션이 생성되면 웹 소켓을 통해 실시간으로 주식 시장 데이터를 전송할 수 있습니다.

React 애플리케이션 제작

이제, React 애플리케이션을 구성하는 파일을 작성해보겠습니다.

먼저, App.js 파일을 열고 다음과 같이 작성합니다:

import React, { useState, useEffect } from 'react';
import StockList from './components/StockList';

function App() {
  const [stocks, setStocks] = useState([]);

  useEffect(() => {
    // API를 호출하여 주식 목록을 가져오는 로직을 작성합니다.
  }, []);

  return (
    <div className="App">
      <h1>실시간 주식 시장 모니터링 애플리케이션</h1>
      <StockList stocks={stocks} />
    </div>
  );
}

export default App;

위 코드에서는 useState와 useEffect 훅을 사용하여 stocks 상태를 관리하고, 컴포넌트가 마운트될 때 API를 호출하여 주식 목록을 가져옵니다.

다음으로, StockList.js 파일을 열고 다음과 같이 작성합니다:

import React from 'react';
import StockItem from './StockItem';

function StockList({ stocks }) {
  return (
    <div className="stock-list">
      {stocks.map((stock) => (
        <StockItem key={stock.id} stock={stock} />
      ))}
    </div>
  );
}

export default StockList;

위 코드에서는 stocks 배열을 순회하면서 StockItem 컴포넌트로 변환하여 렌더링합니다.

마지막으로, StockItem.js 파일을 열고 다음과 같이 작성합니다:

import React from 'react';

function StockItem({ stock }) {
  return (
    <div className="stock-item">
      <span className="stock-name">{stock.name}</span>
      <span className="stock-price">{stock.price}</span>
    </div>
  );
}

export default StockItem;

위 코드에서는 각 주식 항목의 name과 price를 표시합니다.

결과 확인

이제, 프로젝트를 실행하고 결과를 확인해보겠습니다.

터미널에서 다음 명령어를 실행하여 Node.js 서버를 시작합니다:

node server.js

또 다른 터미널을 열고 다음 명령어를 실행하여 React 애플리케이션을 시작합니다:

npm start

웹 브라우저에서 “http://localhost:3000”을 열면 주식 시장 모니터링 애플리케이션을 확인할 수 있습니다.

결론

이 글에서는 자바스크립트와 React.js를 사용하여 실시간으로 주식 시장 데이터를 가져와 모니터링하는 애플리케이션을 제작하는 방법을 알아보았습니다. 이를 통해 실시간 데이터를 처리하고 업데이트하는 웹 애플리케이션을 구축하는 기술과 개념을 학습할 수 있습니다.

더 많은 정보를 찾으려면 #주식시장, #ReactJS 해시태그를 활용해 검색해보세요.