iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 3249 瀏覽

鐵人賽 Modern Web DAY 7

用React刻自己的投資Dashboard 系列第 7 篇

技術用React刻自己的投資Dashboard Day7 - CORS與Proxy Server

tags: 2021鐵人賽 React 上一篇在串接API的時候有遇到一個前端蠻常見的問題，跨來源資源共用(CORS)被阻擋，錯誤代碼如下：打開瀏覽器的con...

Sean Liu ‧ 2021-09-22

0 Like 0 留言 2539 瀏覽

鐵人賽 Modern Web DAY 12

用React刻自己的投資Dashboard 系列第 12 篇

技術用React刻自己的投資Dashboard Day12 - 下拉式選單篩選功能

tags: 2021鐵人賽 React 還記得這個網站有篩選圖表的功能嗎？當初畫wireframe的時候考量到未來圖表可能會越來越多，因此規劃了下拉式選單來做篩...

Sean Liu ‧ 2021-09-27

0 Like 1 留言 2520 瀏覽

鐵人賽 Modern Web DAY 10

用React刻自己的投資Dashboard 系列第 10 篇

技術用React刻自己的投資Dashboard Day10 - 用useCallback hook幫你記住函式

tags: 2021鐵人賽 React 在Day9說明了useEffect的用法，不過其實當Card.js渲染時，會發現console有錯誤訊息如下： src...

Sean Liu ‧ 2021-09-25

0 Like 0 留言 2427 瀏覽

鐵人賽 Modern Web DAY 21

用React刻自己的投資Dashboard 系列第 21 篇

技術用React刻自己的投資Dashboard Day21 - 介紹Finmind API

tags: 2021鐵人賽 React 接下來幾篇都會串接Finmind這個開源API，本篇就先來理解一下Finmind有哪些資料可以使用。看了一下官方網站的資...

Sean Liu ‧ 2021-10-06

0 Like 0 留言 2330 瀏覽

鐵人賽 Modern Web DAY 4

用React刻自己的投資Dashboard 系列第 4 篇

技術用React刻自己的投資Dashboard Day4 - highcharts製作線圖

tags: 2021鐵人賽 React Javascript繪圖套件在搜尋chart library的時候，發現JS可以用的library很多，包含 D3.j...

Sean Liu ‧ 2021-09-19

1 Like 1 留言 2066 瀏覽

鐵人賽 Modern Web DAY 1

用React刻自己的投資Dashboard 系列第 1 篇

技術用React刻自己的投資Dashboard Day1 - 前言

tags: 2021鐵人賽 React 系列文想法來源因為筆者本身在金融業工作，日常生活中時常關注一些投資相關的數據，例如：總體經濟數據、個股財務報告、加密貨...

Sean Liu ‧ 2021-09-16

0 Like 0 留言 1770 瀏覽

鐵人賽 Modern Web DAY 2

用React刻自己的投資Dashboard 系列第 2 篇

技術用React刻自己的投資Dashboard Day2 - 網站Wireframe設計

tags: 2021鐵人賽 React 投資Dashboard內容設計要實際動手製作wireframe之前，先來規劃一下圖表的內容有什麼，一般來說，投資相關的...

Sean Liu ‧ 2021-09-17

1 Like 0 留言 1748 瀏覽

鐵人賽 Modern Web DAY 3

用React刻自己的投資Dashboard 系列第 3 篇

技術用React刻自己的投資Dashboard Day3 - React專案初始架構

tags: 2021鐵人賽 React 使用 Creat react app 對於React的初學者來說，create react app是最好的朋友，可以快速...

Sean Liu ‧ 2021-09-18

0 Like 0 留言 1708 瀏覽

鐵人賽 Modern Web DAY 30

用React刻自己的投資Dashboard 系列第 30 篇

技術用React刻自己的投資Dashboard Day30 - 股票代號輸入防呆機制

tags: 2021鐵人賽 React 股票代號輸入錯誤當機問題 Day28的文章有提到，當使用者想要輸入股票代號看K線圖時，如果輸入的股票代號是錯誤的，也就是...

Sean Liu ‧ 2021-10-15

0 Like 0 留言 1674 瀏覽

鐵人賽 Modern Web DAY 5

用React刻自己的投資Dashboard 系列第 5 篇

技術用React刻自己的投資Dashboard Day5 - 多張圖表渲染(Rendering lists)

tags: 2021鐵人賽 React 上一篇只畫了一張圖表，投資怎麼可能只需要看一張圖呢？這邊就再加上兩張圖來看看吧! 更改資料放置位置專案架構圖如下這...

Sean Liu ‧ 2021-09-20

0 Like 0 留言 1619 瀏覽

鐵人賽 Modern Web DAY 26

用React刻自己的投資Dashboard 系列第 26 篇

技術用React刻自己的投資Dashboard Day26 - 台股技術面功能規劃

這篇終於要來開始做台股技術面的功能了，對於善於技術分析的投資人來說，看K線是非常基本的事情，因為從技術分析的角度來看，K線可以分析出很多其他面向看不到的學問喔~...

Sean Liu ‧ 2021-10-11

0 Like 0 留言 1554 瀏覽

鐵人賽 Modern Web DAY 18

用React刻自己的投資Dashboard 系列第 18 篇

技術用React刻自己的投資Dashboard Day18 - 選單列active style功能

tags: 2021鐵人賽 React 上一篇將選單列做出來，並且完成點擊上方按鈕會跳轉至對應頁面的功能，不過總覺得好像少了些什麼？原來是點擊按鈕之後，按鈕的樣...

Sean Liu ‧ 2021-10-03

0 Like 1 留言 1549 瀏覽

鐵人賽 Modern Web DAY 28

用React刻自己的投資Dashboard 系列第 28 篇

技術用React刻自己的投資Dashboard Day28 - 串接台股技術面API

tags: 2021鐵人賽 React 上一篇刻好版型後，這篇就可以來串接API拉，目標當然就是讓使用者輸入股票代號後，能夠跑出最新收盤價格、漲跌幅度、漲跌幅度...

Sean Liu ‧ 2021-10-13

0 Like 0 留言 1465 瀏覽

鐵人賽 Modern Web DAY 22

用React刻自己的投資Dashboard 系列第 22 篇

技術用React刻自己的投資Dashboard Day22 - API與前端資料需求比對

tags: 2021鐵人賽 React 一般來說在開發階段，前端與後端會討論資料需求，讓API產出的內容能夠滿足前端畫面的需求，不過這次因為是串接外部的API，...

Sean Liu ‧ 2021-10-07

0 Like 0 留言 1389 瀏覽

鐵人賽 Modern Web DAY 14

用React刻自己的投資Dashboard 系列第 14 篇

技術用React刻自己的投資Dashboard Day14 - 解決重複發送API請求的問題

tags: 2021鐵人賽 React 之前剛開始設計call api取得資料的時間點是在Card元件載入的時候才讀取，但是加上分頁功能之後，會發現一個問題，假...

Sean Liu ‧ 2021-09-29

0 Like 0 留言 1327 瀏覽

鐵人賽 Modern Web DAY 25

用React刻自己的投資Dashboard 系列第 25 篇

技術用React刻自己的投資Dashboard Day25 - 製作漢堡選單

tags: 2021鐵人賽 React 安裝styled-components套件在專案資料夾內一行安裝就完成了。 npm install --save st...

Sean Liu ‧ 2021-10-10

0 Like 0 留言 1281 瀏覽

鐵人賽 Modern Web DAY 6

用React刻自己的投資Dashboard 系列第 6 篇

技術用React刻自己的投資Dashboard Day6 - 建立圖表區元件，串接API取得數據

tags: 2021鐵人賽 React 上一篇使用靜態的資料，將多張數據資料表畫成線圖呈現在網頁上，因為這個資料來源是JSON檔，所以是相對難更新的，因此本篇要...

Sean Liu ‧ 2021-09-21

0 Like 0 留言 1186 瀏覽

鐵人賽 Modern Web DAY 27

用React刻自己的投資Dashboard 系列第 27 篇

技術用React刻自己的投資Dashboard Day27 - 台股技術面刻板

tags: 2021鐵人賽 React 一般來說刻板前應該會需要畫個wireframe會比較清楚一些，不過時間有限，就在紙上畫一畫就先開始寫code吧，先達成功...

Sean Liu ‧ 2021-10-12

0 Like 0 留言 1172 瀏覽

鐵人賽 Modern Web DAY 8

用React刻自己的投資Dashboard 系列第 8 篇

技術用React刻自己的投資Dashboard Day8 - useState hook

tags: 2021鐵人賽 React 在Card元件中有使用到useState，是React中一個蠻重要的hook，是一個非常強大的功能，看起來跟用起來都非常...

Sean Liu ‧ 2021-09-23

0 Like 0 留言 1075 瀏覽

鐵人賽 Modern Web DAY 23

用React刻自己的投資Dashboard 系列第 23 篇

技術用React刻自己的投資Dashboard Day23 - 非同步呼叫API，完成首頁資料串接

tags: 2021鐵人賽 React 上一篇確認過API內容之後，剩下的部份就是串接API，並將資料呈現在畫面上了，雖然描述起來是短短兩句，不過還是寫了好多的...

Sean Liu ‧ 2021-10-08

0 Like 0 留言 1051 瀏覽

鐵人賽 Modern Web DAY 29

用React刻自己的投資Dashboard 系列第 29 篇

技術用React刻自己的投資Dashboard Day29 - 替股票加上名稱

tags: 2021鐵人賽 React 上一篇提到台股技術面的最新收盤資訊只有股票代號，似乎少了名稱，本篇就來把它補上吧。資料來源 Finmind API裡面...

Sean Liu ‧ 2021-10-14

0 Like 0 留言 1016 瀏覽

鐵人賽 Modern Web DAY 9

用React刻自己的投資Dashboard 系列第 9 篇

技術用React刻自己的投資Dashboard Day9 - useEffect hook

tags: 2021鐵人賽 React 既上一篇介紹完useState hook後，本篇就來介紹Day6也有用到的useEffect hook，在React官網...

Sean Liu ‧ 2021-09-24

1 Like 0 留言 932 瀏覽

鐵人賽 Modern Web DAY 20

用React刻自己的投資Dashboard 系列第 20 篇

技術用React刻自己的投資Dashboard Day20 - 首頁功能切板

tags: 2021鐵人賽 React 先從mobile版型的頁面來看，可以分為幾個部份，如下圖：分為最上面Title、TaiwanStock、USStock...

Sean Liu ‧ 2021-10-05

0 Like 0 留言 916 瀏覽

鐵人賽 Modern Web DAY 16

用React刻自己的投資Dashboard 系列第 16 篇

技術用React刻自己的投資Dashboard Day16 - react-router-dom讓SPA也有路由

tags: 2021鐵人賽 React 前一篇提到的導覽列的各個按鈕，點擊之後會跳到不同的頁面，每個頁面都會是不同的路徑，這個功能可以使用react-route...

Sean Liu ‧ 2021-10-01

0 Like 0 留言 909 瀏覽

鐵人賽 Modern Web DAY 24

用React刻自己的投資Dashboard 系列第 24 篇

技術用React刻自己的投資Dashboard Day24 - styled components

tags: 2021鐵人賽 React 因為下一篇要讓導覽列在手機版網頁呈現漢堡選單的樣式，在參考其他工程師寫的網頁的時候，發現有一位是用styled-comp...

Sean Liu ‧ 2021-10-09

0 Like 0 留言 878 瀏覽

鐵人賽 Modern Web DAY 17

用React刻自己的投資Dashboard 系列第 17 篇

技術用React刻自己的投資Dashboard Day17 - Dashboard 2.0版路由功能

tags: 2021鐵人賽 React 如Day15的wireframe，為了要加上更多的功能，因此要在頂端列新增幾個按鈕，每個按鈕代表不同的路由，而不同的路由...

Sean Liu ‧ 2021-10-02

0 Like 0 留言 865 瀏覽

鐵人賽 Modern Web DAY 11

用React刻自己的投資Dashboard 系列第 11 篇

技術用React刻自己的投資Dashboard Day11 - 分離UI元件與抓取數據元件

tags: 2021鐵人賽 React 本篇要將call api的功能獨立成一個元件，在架構上會更清楚的分工不同檔案的功能，之後也有可能是其他元件會呼叫api的...

Sean Liu ‧ 2021-09-26

0 Like 0 留言 724 瀏覽

鐵人賽 Modern Web DAY 15

用React刻自己的投資Dashboard 系列第 15 篇

技術用React刻自己的投資Dashboard Day15 - 投資Dashboard 2.0版 Wireframe

有了總體經濟的圖表之後，接下來就要來製作各國股市的資訊站，筆者最常看的就是台股的資訊，其次則是美股、英股、歐股、日股、匯率、利率...等等，想做的很多，剩下15...

Sean Liu ‧ 2021-09-30

0 Like 0 留言 592 瀏覽

鐵人賽 Modern Web DAY 19

用React刻自己的投資Dashboard 系列第 19 篇

技術用React刻自己的投資Dashboard Day19 - 2.0版首頁內容設計

tags: 2021鐵人賽 React 2.0首頁想加上各國股市的最新盤勢資訊，畢竟這些資料是投資人每天都會需要看一下的，所以放在首頁會是不錯的選擇。首頁會放...

Sean Liu ‧ 2021-10-04

技術 用React刻自己的投資Dashboard Day7 - CORS與Proxy Server

技術 用React刻自己的投資Dashboard Day12 - 下拉式選單篩選功能

技術 用React刻自己的投資Dashboard Day10 - 用useCallback hook幫你記住函式

技術 用React刻自己的投資Dashboard Day21 - 介紹Finmind API

技術 用React刻自己的投資Dashboard Day4 - highcharts製作線圖

技術 用React刻自己的投資Dashboard Day1 - 前言

技術 用React刻自己的投資Dashboard Day2 - 網站Wireframe設計

技術 用React刻自己的投資Dashboard Day3 - React專案初始架構

技術 用React刻自己的投資Dashboard Day30 - 股票代號輸入防呆機制

技術 用React刻自己的投資Dashboard Day5 - 多張圖表渲染(Rendering lists)

技術 用React刻自己的投資Dashboard Day26 - 台股技術面功能規劃

技術 用React刻自己的投資Dashboard Day18 - 選單列active style功能

技術 用React刻自己的投資Dashboard Day28 - 串接台股技術面API

技術 用React刻自己的投資Dashboard Day22 - API與前端資料需求比對

技術 用React刻自己的投資Dashboard Day14 - 解決重複發送API請求的問題

技術 用React刻自己的投資Dashboard Day25 - 製作漢堡選單

技術 用React刻自己的投資Dashboard Day6 - 建立圖表區元件，串接API取得數據

技術 用React刻自己的投資Dashboard Day27 - 台股技術面刻板

技術 用React刻自己的投資Dashboard Day8 - useState hook

技術 用React刻自己的投資Dashboard Day23 - 非同步呼叫API，完成首頁資料串接

技術 用React刻自己的投資Dashboard Day29 - 替股票加上名稱

技術 用React刻自己的投資Dashboard Day9 - useEffect hook

技術 用React刻自己的投資Dashboard Day20 - 首頁功能切板

技術 用React刻自己的投資Dashboard Day16 - react-router-dom讓SPA也有路由

技術 用React刻自己的投資Dashboard Day24 - styled components

技術 用React刻自己的投資Dashboard Day17 - Dashboard 2.0版路由功能

技術 用React刻自己的投資Dashboard Day11 - 分離UI元件與抓取數據元件

技術 用React刻自己的投資Dashboard Day15 - 投資Dashboard 2.0版 Wireframe

技術 用React刻自己的投資Dashboard Day19 - 2.0版首頁內容設計

標記使用者