Colin's Blog
[javascript] Polymer를 사용하여 실시간 주식 시세 앱 개발하기

소개

이번 포스트에서는 Polymer를 사용하여 실시간 주식 시세 앱을 개발하는 방법을 알아보겠습니다. Polymer는 웹 컴포넌트를 개발할 수 있는 Google의 프레임워크이며, 이를 사용하여 주식 데이터를 실시간으로 가져와서 웹 앱에 표시할 수 있습니다.

Polymer 설정하기

  1. 먼저, Polymer를 사용하기 위해 빈 프로젝트를 생성합니다.
$ mkdir stock-app && cd stock-app
$ polymer init

  1. 프로젝트를 초기화할 때, Starter Kit을 선택합니다. Starter Kit은 Polymer 프로젝트를 시작하기에 적합한 구조와 파일을 제공합니다.

  2. 초기화된 프로젝트 디렉토리로 이동하여 Polymer 서버를 실행합니다.

$ cd stock-app
$ polymer serve
  1. 웹 브라우저에서 http://localhost:8080에 접속하여 Polymer 앱이 정상적으로 동작하는지 확인합니다.

주식 시세 API 사용하기

  1. 실시간 주식 시세를 가져오기 위해 Alpha Vantage API를 사용합니다. Alpha Vantage에 가입하고 API 키를 발급받습니다.

  2. Polymer의 iron-ajax 요소를 사용하여 API를 호출하는 코드를 작성합니다.


<iron-ajax
  auto
  url="https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=IBM&interval=1min&apikey=YOUR_API_KEY"
  handle-as="json"
  last-response="{{stockData}}">
</iron-ajax>

위 코드에서 YOUR_API_KEY를 발급받은 Alpha Vantage API 키로 교체합니다.

  1. 가져온 주식 데이터를 웹 페이지에 표시하기 위해 Polymer의 데이터 바인딩 기능을 사용합니다.

<p>Symbol: <span>{{stockData['Meta Data'].2. Symbol}}</span></p>
<p>Last Refreshed: <span>{{stockData['Meta Data'].3. Last Refreshed}}</span></p>
<p>Open: <span>{{stockData['Time Series (1min)'].1. open}}</span></p>
<p>High: <span>{{stockData['Time Series (1min)'].1. high}}</span></p>
<p>Low: <span>{{stockData['Time Series (1min)'].1. low}}</span></p>
<p>Close: <span>{{stockData['Time Series (1min)'].1. close}}</span></p>

위 코드에서 stockData는 API에서 가져온 데이터로, 해당 데이터에는 주식의 심볼, 최근 업데이트 시간, 시가, 고가, 저가, 종가 등이 포함되어 있습니다.

  1. 웹 페이지에서 불러온 데이터를 실시간으로 업데이트하기 위해 Timer를 사용합니다.
ready() {
  setInterval(() => {
    this.$.ajax.generateRequest();
  }, 60000); // 1분마다 데이터 업데이트
}

위 코드에서 this.$.ajax.generateRequest()는 주식 데이터를 업데이트하기 위해 iron-ajax 요소에서 API 호출을 다시 실행하는 역할을 합니다.

결론

이제 Polymer를 사용하여 실시간 주식 시세 앱을 개발하는 방법을 알아보았습니다. Polymer와 Alpha Vantage API를 활용하여 실시간 주식 데이터를 가져와 웹 페이지에 표시할 수 있습니다. 이를 바탕으로 추가 기능을 구현하여 더욱 다양한 주식 앱을 개발할 수 있습니다. 자세한 내용은 Polymer 공식 문서를 참조하시기 바랍니다.

© 2018 Colin. All rights reserved.