可視化持股網站

建置心得

這一次嘗試使用 React 建立一個能夠將持股紀錄變成可視化的股票分析圖表，過程中複習了被我荒廢好一大段時間的 React，以及在 JS 中如 何使用 Promise、axios、localStorage …，總之算是學習到蠻多新的東西，也重新恢復一下自己之前上過的課程記憶。

而做到目前我覺得算是告一個段落，從最一開始只是因為很酷炫嘗試仿造其它人做的網站樣貌，到現在能夠請求 Yahoo Finance API 然後繪製出歷史績效圖，能夠靠自己做出來說真的也算是蠻感動的 (雖然對其他人來說這些可能沒什麼 XD)。 其實我一開始也沒有想到自己會做這些功能，有點像是一邊做的過程中一邊覺得自己還可以再哪邊改進，又有哪個部分我可以再額外新增一些東西之類的。

底下是目前持股網站的樣貌:

學習紀錄

ApexChart

這個網站能夠有那麼多的製圖，主要都源自於 ApexCharts 這個套件，在網站內可以看到的柱狀圖、圓餅圖、線圖都是用這個套件繪製出來的。雖然一開始用的不習慣，可是後來比較看得懂怎麼去使用了之後就覺得這個套件還真好玩 XD，像是可以更動 donut chart 中間的數值呈現方式，以及滑鼠觸碰給使用者帶來的回饋我都覺得好讚，這邊也記取一個教訓就是下次要好好看別人寫的 docs。

React-Icons

這次建置的過程中有使用到 React-Icons 提供的 Icons，使用方式很簡單，就照著官方網站的範例來去使用就可以了。比較要注意的是使用不同 Icons 的名稱可能會需要 Import 不同的位置，像是如果要 import 的名稱是 “fa” 開頭，就要 import react-icons 底下的 fa 資料夾 :

import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

而如果要 import 的是 “ai” 開頭，就會需要 import {...} from 'react-icons/ai'。

localStorage / sessionStorage

在這個 APP 中，我原本是使用 localStorage 來儲存從 Yahoo Finance API 獲得的資料以及過去每一天的績效，後來我改成使用 sessionStorage 的原因是因為:

sessionStorage 會在關閉網頁後自動清除，而 localStorage 會一直儲存在網頁儲存空間內

APP 因為每一次重新開啟時都會需要使用者重新輸入 csv 檔以及透過 API 抓取當前股市價格，因此我覺得放在比較容易被清除的 sessionStorage 會比 localStorage 好。

setState 是 async

這次在做的過程中讓我碰壁的是有時候我會需要在 setState 後直接去呼叫一個 function，又或者是在 setState 後立即使用 State 中的值，可是因為 setState 是 asynchronous，所以我立即去使用或是呼叫的話就會出現錯誤。網路上的解決方法是將 callback function 放在 useEffect 裡面，然後配合 useEffect 的參數來去控制次數。

JS: Date

在計算過去每日的績效時，會需要從 startDate 遍歷到 endDate。在建置的過程中學到了一個方式來處理關於時間的遍歷 :

// 開始時間 (2021-12-29)
const startDate = new Date('2021-12-29');
// 結束時間 (2022-01-04)
const endDate = new Date();
const dates = [];
for(let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
    dates.push(d.toLocaleString());
}

總結

之後說不定還會把這個持股網站再新增功能或是升級之類的，還在想說要不要加個 navbar 然後之後試著做一下後端讓使用者能夠紀錄之前匯入的資料，就不用每次都要將 csv 檔匯入進去 blah blah blah，雖然現在覺得目前功能就我自己來說已經足夠了啦。總而言之那些也是之後的事情，這篇記錄網站建置的文章也就到這邊差不多告一個段落。

— Jan 4, 2022