자바스크립트와 React.js를 이용한 실시간 주식 가격 알림 애플리케이션 구축하기

09 Nov 2023

reactjs

주식 시장은 매일 변동되는 가격으로 빠르게 변화합니다. 실시간으로 주식 가격을 알림받을 수 있는 애플리케이션은 주식 투자자에게 매우 유용합니다. 이번 블로그 포스트에서는 자바스크립트와 React.js를 사용하여 실시간 주식 가격 알림 애플리케이션을 구축하는 방법을 알아보겠습니다.

필요한 도구

이 프로젝트를 구축하기 위해 다음과 같은 도구들이 필요합니다.

Node.js: 자바스크립트 실행 환경인 Node.js를 설치해야 합니다. Node.js 공식 웹사이트에서 다운로드하여 설치할 수 있습니다.
React.js: React.js 라이브러리를 사용하여 애플리케이션의 사용자 인터페이스를 구축할 것입니다. React.js를 설치하기 위해서는 npm 패키지 매니저를 사용하면 됩니다. 아래 명령어를 터미널에서 실행하여 React.js를 설치합니다.
```
npm install react react-dom
```
주식 가격 API: 실시간 주식 가격 데이터를 제공하는 API가 필요합니다. 이 예제에서는 Alpha Vantage API를 사용할 것입니다. Alpha Vantage에서 계정을 생성하고 API 키를 발급받아야 합니다.

프로젝트 설정

프로젝트를 시작하기 위해 새로운 디렉토리를 생성하고 프로젝트에 필요한 종속성들을 설치합니다. 터미널에서 다음 명령어를 실행합니다.

mkdir stock-app
cd stock-app
npm init -y

이제 package.json 파일이 생성되었을 것입니다. 다음으로 필요한 패키지들을 설치합니다.

npm install axios dotenv react-router-dom

axios 패키지는 HTTP 요청을 보낼 때 사용되며, dotenv 패키지는 환경 변수를 설정하기 위해 사용됩니다. react-router-dom 패키지는 페이지간의 라우팅을 처리하기 위해 사용됩니다.

API 키 설정

API 키를 사용하여 Alpha Vantage의 주식 가격 데이터를 가져오기 위해 .env 파일을 생성하고 API 키를 설정합니다. 프로젝트 루트 디렉토리에 .env 파일을 생성하고 아래와 같이 API 키를 설정합니다.

API_KEY=your_api_key_here

주식 가격 가져오기

주식 가격을 가져오기 위해 src 폴더 아래에 services 디렉토리를 생성하고 stockService.js 파일을 생성합니다. 이 파일은 Alpha Vantage API를 사용하여 주식 가격 데이터를 가져오는 함수를 제공합니다.

import axios from 'axios';

const API_KEY = process.env.API_KEY;

export const getStockData = async (symbol) => {
  try {
    const response = await axios.get(`https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=${API_KEY}`);
    return response.data;
  } catch (error) {
    console.error('Error getting stock data:', error);
    throw error;
  }
};

위 코드에서 getStockData 함수는 주식 심볼(symbol)을 인수로 받아 해당 주식 가격 데이터를 반환합니다.

React 애플리케이션 구축하기

이제 React 애플리케이션을 구축해보겠습니다. src 폴더에 components 디렉토리를 생성하고 StockPrice.js 파일을 생성합니다.

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

const StockPrice = () => {
  const [price, setPrice] = useState(null);

  useEffect(() => {
    const fetchStockPrice = async () => {
      try {
        const data = await getStockData('AAPL'); // AAPL은 애플 주식의 심볼입니다. 원하는 주식의 심볼로 변경하세요.
        setPrice(data['Global Quote']['05. price']);
      } catch (error) {
        console.error('Error fetching stock price:', error);
      }
    };

    fetchStockPrice();
  }, []);

  return (
    <div>
      {price ? (
        <p>The current price of AAPL stock is $ {price}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default StockPrice;

위 코드에서 StockPrice 컴포넌트는 useEffect 훅을 사용하여 주식 가격을 가져와 price 상태를 설정합니다. 이후에는 이 price 상태에 따라 현재 주식 가격을 표시하거나 ‘로딩 중’ 메시지를 표시합니다.

마지막으로, App.js 파일에서 StockPrice 컴포넌트를 렌더링합니다.

import React from 'react';
import StockPrice from './components/StockPrice';

const App = () => {
  return (
    <div>
      <h1>Stock Price App</h1>
      <StockPrice />
    </div>
  );
};

export default App;

애플리케이션 실행하기

이제 애플리케이션을 실행해보겠습니다. 터미널에서 다음 명령어를 실행합니다.

npm start

브라우저에서 http://localhost:3000을 열어 애플리케이션을 확인할 수 있습니다. “The current price of AAPL stock is $ {price}” 메시지가 표시되면 정상적으로 구동되고 있는 것입니다.

이제 자바스크립트와 React.js를 사용하여 실시간 주식 가격 알림 애플리케이션을 구축하는 방법을 알게 되었습니다. 주식 시장의 변동에 맞추어 적절한 알림 기능을 추가하면 더욱 유용한 애플리케이션을 만들 수 있을 것입니다.

GitHub 저장소 #javascript #reactjs