TradingView사용하기

https://kr.tradingview.com/widget 홈페이지에 나와있는 임베드 코드를 복사해 React에서 public폴더에 .html파일로 작성한다음, <iframe/>태그로 열어보았지만 스타일하기도 불편하고 오류가 발생했다.

<div class="tradingview-widget-container">
  <div id="tradingview_6ec21"></div>
  <div class="tradingview-widget-copyright">TradingView 제공 <a href="https://kr.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL 차트</span></a></div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "autosize": true,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "dark",
  "style": "1",
  "locale": "kr",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "container_id": "tradingview_6ec21"
}
  );
  </script>
</div>

라이브러리로 만들어져 있는걸 발견했다...
1. 설치하기

npm i react-ts-tradingview-widgets

2. 사용하기
   https://jorrinkievit.github.io/react-ts-tradingview-widgets/docs/intro

import { AdvancedRealTimeChart } from "react-ts-tradingview-widgets";

const Chart = () => {
  return (
    <AdvancedRealTimeChart
      theme="dark"
      width={500}
      height={568}
      symbol="BINANCE:BTCUSDT"
      interval="D"
      timezone="Asia/Seoul"
      style="1"
      locale="kr"
      toolbar_bg="#f1f3f6"
      allow_symbol_change={false}
      container_id="tradingview_dcf24"
    ></AdvancedRealTimeChart>
  );
};

export default Chart;