자바스크립트에서 JSON 데이터를 이용하여 주식 시세 표시하기

15 Sep 2023

vuejs

이번 포스트에서는 JSON 데이터를 활용하여 자바스크립트에서 실시간 주식 시세를 표시하는 방법에 대해 알아보겠습니다.

1. JSON 데이터 가져오기

먼저, 주식 시세를 제공하는 API를 통해 JSON 형식의 데이터를 가져와야 합니다. 예를 들어, Alpha Vantage의 주식 API를 사용한다고 가정해보겠습니다.

async function fetchStockData(symbol) {
  const apiKey = "your_api_key";
  const response = await fetch(`https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=${symbol}&interval=1min&apikey=${apiKey}`);
  const data = await response.json();
  return data;
}

위 코드에서 fetchStockData 함수는 symbol 매개변수로 주식의 심볼을 받아와 API 요청을 보내고, JSON 데이터를 반환합니다. API 키는 Alpha Vantage에서 제공하는 고유한 키를 사용해야 합니다.

2. 웹 페이지에 시세 표시하기

JSON 데이터를 가져온 후에는 웹 페이지에 시세 정보를 표시해야 합니다. HTML 파일에서 아래와 같이 요소를 추가합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>주식 시세 표시</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>주식 시세</h1>
    <div id="stock-data"></div>
  </body>
</html>

그리고 script.js 파일에 아래와 같이 자바스크립트 코드를 작성합니다.

window.addEventListener("DOMContentLoaded", async () => {
  const symbol = "AAPL"; // 표시할 주식의 심볼
  const stockData = await fetchStockData(symbol);
  
  const latestPrice = stockData["Time Series (1min)"]["2022-12-31 16:00:00"]["4. close"];
  
  const stockDataElement = document.getElementById("stock-data");
  stockDataElement.textContent = `최신 주식 가격: $${latestPrice}`;
});

위 코드에서 symbol 변수에는 표시할 주식의 심볼을 입력합니다. stockData 변수에는 fetchStockData 함수를 통해 받아온 JSON 데이터가 저장됩니다. 이후 latestPrice 변수에서는 가장 최근의 주식 가격을 추출합니다.

마지막으로, stockDataElement 변수를 통해 HTML 요소를 찾고, 해당 요소의 텍스트 내용을 업데이트하여 최신 주식 가격을 표시합니다.

마무리

위의 코드를 활용하면 JSON 데이터를 이용하여 자바스크립트에서 주식 시세를 표시할 수 있습니다. 이를 활용하여 실시간으로 업데이트되는 주식 시세를 웹 페이지에 표시할 수 있습니다. 실제로 사용하는 API와 JSON 형식은 상황에 따라 다를 수 있으므로, 해당 API의 문서를 참고하여 코드를 작성해야 합니다.

#주식 #자바스크립트