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

09 Nov 2023

reactjs

주식 시장은 매우 동적이고 변동성이 높은 환경이므로, 실시간으로 주식 가격을 모니터링하는 애플리케이션은 많은 투자자들에게 유용합니다. 이번 블로그 포스트에서는 자바스크립트와 React.js를 사용하여 실시간 주식 시장 모니터링 애플리케이션을 제작하는 방법에 대해 알아보겠습니다.

준비물

애플리케이션을 개발하기 위해 다음과 같은 준비물이 필요합니다:

Node.js와 npm: React.js 프로젝트를 시작하기 위해 Node.js와 npm이 필요합니다. Node.js는 JavaScript 실행 환경이며, npm은 Node.js 패키지 관리자입니다. Node.js와 npm은 공식 웹사이트에서 다운로드하여 설치할 수 있습니다.
React.js 개발 환경: React.js 개발을 위해서는 Babel과 Webpack과 같은 도구들이 필요합니다.
주식 시장 API: 주식 정보를 실시간으로 가져오기 위해 주식 시장 API에 액세스할 수 있는 API 키가 필요합니다. 다양한 주식 시장 API를 제공하는 서비스들이 있으며, 본인의 요구사항에 맞는 API를 선택하면 됩니다.

프로젝트 설정

React.js 프로젝트 생성: React.js 프로젝트를 생성하기 위해 터미널에서 다음 명령을 실행합니다.

npx create-react-app stock-monitoring-app

필요한 패키지 설치: 생성된 프로젝트 폴더로 이동한 후, 다음 명령을 실행하여 필요한 패키지들을 설치합니다.

cd stock-monitoring-app
npm install axios

API 키 설정: 주식 시장 API 키를 사용하여 주식 정보를 가져올 수 있도록 설정합니다. 프로젝트의 root 폴더에 .env 파일을 생성하고, 다음과 같이 API 키를 추가합니다.

REACT_APP_STOCK_API_KEY=your_api_key

주식 정보 가져오기

src 폴더 안에 api.js 파일을 생성하고, 다음과 같은 코드를 추가합니다.

import axios from 'axios';

export const getStockData = async (symbol) => {
  try {
    const response = await axios.get(`https://api.stockmarket.com/stock/${symbol}`);
    return response.data;
  } catch (error) {
    console.error(error);
    throw error;
  }
};

src 폴더 안에 Stock.js 파일을 생성하고, 다음과 같은 코드를 추가합니다.

import React, { useState, useEffect } from 'react';
import { getStockData } from './api';

const Stock = ({ symbol }) => {
  const [stockData, setStockData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await getStockData(symbol);
        setStockData(data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, [symbol]);

  if (!stockData) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h2>{stockData.name}</h2>
      <p>현재 가격: {stockData.price}</p>
      <p>변동률: {stockData.change}</p>
    </div>
  );
};

export default Stock;

애플리케이션 구성

src 폴더 안에 App.js 파일을 열고, 다음과 같은 코드로 수정합니다.

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

const App = () => {
  return (
    <div>
      <h1>주식 시장 모니터링 애플리케이션</h1>
      <Stock symbol="AAPL" />
      <Stock symbol="GOOG" />
      <Stock symbol="MSFT" />
    </div>
  );
};

export default App;

src/index.js 파일에서 ReactDOM.render 함수의 호출부분을 다음과 같이 수정합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

애플리케이션 실행

터미널에서 다음 명령을 실행하여 애플리케이션을 실행합니다.

npm start

애플리케이션은 http://localhost:3000에서 확인할 수 있습니다.

마무리

이렇게 자바스크립트와 React.js를 사용하여 실시간 주식 시장 모니터링 애플리케이션을 제작하는 방법을 알아보았습니다. 주식 시장 API에서 주식 정보를 가져와서 React 컴포넌트에 렌더링하여 실시간으로 주식 가격을 모니터링할 수 있습니다. 이를 기반으로 더 다양한 기능을 추가해서 실제 사용할 수 있는 애플리케이션을 만들어보세요.

준비물

프로젝트 설정

주식 정보 가져오기

애플리케이션 구성

애플리케이션 실행

마무리

참고 자료