자바스크립트와 Zeit Now를 이용한 실시간 주식 시세 애플리케이션 구축하기

10 Nov 2023

javascript

stock application

소개

이번 블로그 포스트에서는 자바스크립트와 Zeit Now를 이용하여 실시간 주식 시세를 보여주는 간단한 웹 애플리케이션을 구축하는 방법에 대해 알아보겠습니다.

개발 환경 설정하기

먼저, 개발 환경을 설정해야 합니다. 이 예제에서는 다음과 같은 도구와 기술을 사용합니다:

자바스크립트: 웹 애플리케이션의 프론트엔드를 개발하기 위해 사용합니다.
Zeit Now: 웹 애플리케이션을 호스팅하고 배포하기 위해 사용합니다. Zeit Now는 서버리스 클라우드 플랫폼으로, 애플리케이션을 쉽고 빠르게 배포할 수 있습니다.

다음으로, 프로젝트 폴더를 생성하고 자바스크립트 패키지 매니저인 npm을 사용하여 필요한 패키지를 설치합니다. 아래 명령어를 터미널에서 실행합니다:

mkdir stock-app
cd stock-app
npm init -y
npm install axios express

주식 시세 API 호출하기

주식 시세 API를 호출하기 위해 자바스크립트의 axios 패키지를 사용합니다. axios는 HTTP 요청을 보내고 받는데 사용되는 라이브러리입니다.

주식 시세 API는 다양한 제공업체에서 제공됩니다. 이 예제에서는 Alpha Vantage API를 사용하도록 하겠습니다. Alpha Vantage API는 무료로 제공되는 주식 시세 데이터를 가져올 수 있는 API입니다.

다음은 Alpha Vantage API를 호출하여 특정 주식의 현재 가격을 가져오는 함수입니다:

const axios = require('axios');

async function getStockPrice(symbol) {
  const response = await axios.get(`https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=YOUR_API_KEY`);
  const data = response.data['Global Quote'];
  return data['05. price'];
}

module.exports = getStockPrice;

위 코드에서 YOUR_API_KEY 부분은 Alpha Vantage API에서 제공하는 API 키를 입력해야 합니다.

웹 애플리케이션 구축하기

이제 웹 애플리케이션을 구축해 보겠습니다. Express 프레임워크를 사용하여 간단한 서버를 만들고, 해당 서버에서 주식 데이터를 가져와 클라이언트에게 전송합니다.

const express = require('express');
const getStockPrice = require('./stock-api');

const app = express();

app.get('/stock/:symbol', async (req, res) => {
  const symbol = req.params.symbol;
  const stockPrice = await getStockPrice(symbol);
  res.json({ symbol, price: stockPrice });
});

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

위 코드에서 /stock/:symbol 경로는 클라이언트가 주식 심볼을 전달할 수 있는 엔드포인트입니다. 해당 엔드포인트에서는 getStockPrice 함수를 호출하여 주식 가격을 얻고, 해당 정보를 JSON 형식으로 클라이언트에게 응답합니다.

Zeit Now로 애플리케이션 배포하기

마지막으로 애플리케이션을 Zeit Now로 배포해 보겠습니다. Zeit Now는 가장 간단한 방법으로 애플리케이션을 배포할 수 있는 서버리스 클라우드 플랫폼입니다.

먼저, now.json 파일을 생성하고 다음 내용을 추가합니다:

{
  "version": 2,
  "builds": [
    { "src": "index.js", "use": "@now/node" }
  ],
  "routes": [
    { "src": "/stock/(.*)", "dest": "/index.js" }
  ]
}

now.json 파일은 Zeit Now의 구성 파일로, 빌드 설정과 라우팅 설정을 정의합니다.

마지막으로, 아래 명령어를 터미널에서 실행하여 애플리케이션을 배포합니다:

npx now

배포가 완료되면 터미널에 출력된 URL을 통해 애플리케이션에 접속할 수 있습니다.

마무리

이번 블로그 포스트에서는 자바스크립트와 Zeit Now를 사용하여 실시간 주식 시세 애플리케이션을 구축하는 방법을 알아보았습니다. 이 예제를 통해 자바스크립트와 서버리스 클라우드 플랫폼의 활용에 대해 이해할 수 있었을 것입니다. 시작해 보세요! #자바스크립트 #ZeitNow