Yang Yang

當我們需要設計會員登入機制的時候，很常會面臨到該如何選擇最適合的技術在網站上？這裡將會整理出設計驗證機制的重點。 前情提要驗證 Authentication簡單來說就是驗證使用者的身份。 授權 Authorization使別人有權限做事情，例如給予第三方應用程式可以用哪些服務。 憑證 Credentials要實行驗證和授權之前，需要有東西可以證明這些事情，而這個東西就叫憑證，可以想像是你的身分證。例如你要在凌晨的時候進去網咖或是酒吧，必須要有東西證明你是成年的。 認證機制種類最常見的認證機制為以下三種： Cookie Session JSON Web Token Cookie以key-value的方式儲存在瀏覽器內。 無狀態的協議無狀態表示對處理過的事件並沒有記憶性，每個請求都是獨立的，因此也無法辨識這次的請求和上次的請求是否為同一個人。為了要確認是否是同一個瀏覽器執行請求，因此需要額外處理這些判斷，可以透過Session來判別。 儲存在ClientServer會發送一些資料到Client儲存，下次Client發送請求的時候會送給Server。因為儲存在Client，資料可能會被用 ...

當我們在開發React的時候，多少會遇到一些Warning，例如：map需要加上key的訊息，但是有時候卻會忽略裡面所要傳達的意思，或是很少花時間去研究需要那樣做的原因為何，這次就來重新認識他們吧！ keys的Warning相信很多人開發React都會看過一種warningWarning: Each child in an array or iterator should have a unique “key” prop. Check the render method of EventsTable. See fb.me/react-warning-keys for more information. 這個時候你會做什麼動作？A. Google我來了！B. stackoverflow開起來C. 仔細查看Warning 如果連log的資訊都沒仔細看，直接丟到Google去搜尋問題就會看到需要在map的時候加上key。但是為什麼要加上key這件事情可能還是一知半解，甚至連stackoverflow這種文章也很常看到。如果仔細查看訊息，你會發現他有提供一個網址：fb.me/react-war ...

React提供了lazy與Suspense改善程式碼分割的方式讓專案能夠決定是否需要載入，但是可能有些人發現到討論度相較其他功能來得低不少，這邊將會介紹功能與討論實用性的問題。 React lazy與React suspense的出現可參考官方網站的code-splitting文章當我們在開發程式的時候，我們希望避免引入多過的程式碼或是開發套件，所以React提供了一些方法來讓開發者可以進行程式碼分割。 使用介紹假設你有一個Component叫Form 1import Form from './Form'; React lazy使用的時候，需要搭配import使用，裡面回傳的型別是一個Promise。 1const Form = React.lazy(() => import('./Form')); 再來使用Suspense包裹lazy component，裡面可以放置多個。在載入的過程中，會顯示fallback內的內容，這裡用文字loading表示，可以替換成其他內容，例如：載入中的圖片。 12345678910111213impor ...

在設計元件的時候，有時候因應專案的需求要不斷的增加新功能，隨著功能的增加，該如何一邊增加功能一邊增強元件的維護性呢？一起來看看吧！ 設計元件一開始開發專案的時候，我們可能會先設計一個元件： 123456789const Button = ({ children, onClick, disabled }) => { return ( <button className="btn" onClick={onClick} disabled={disabled} >{children}</button> );} 但是後來又其他需求，所以又要多加一些新的功能在同個元件上： 123456789101112131415161718const handleWarning = (onWarning, onClick, type, target) =&g ...

React官方最近提倡大家使用Functional programming來設計React，其中也有提到為什麼要用React hooks的原因以前大家常犯的錯誤有哪些，以下就來針對這些情境來探討。 React的side effect介紹談到React的side effect，最具有代表性的就是： componentDidUpdate useEffect 介紹最近剛入手React的人可能對useEffect比較熟悉，而已經使用一段時間的人，大概都認識componentDidUpdate（而且也被它折騰了好一陣子了）此外，React官方目前統稱在React中effect都稱為side effect，所以當我們在使用side effect這個名詞時，需要稱為定位一下他的意思。 兩者差異最大的差異就是在React 16.8版本之後，React hooks系列才正式使用，也是React開始提倡全面使用functional component的開始。componentDidUpdate則是以前class based component的產物。 componentDidUpdate當Virt ...

相信有在開發程式的，不管是前端還是後端都有看過函式串燒這種東西，這次就來認識他吧！ 你看過這些東西嗎？ 前端也許你看過這個 123const score = catList .map(cat => cat === isCute) .reduce((cuteSum, cuteScore) => cuteSum + cuteScore, 0); 後端也許你會看過這個 123String[] nameCard = new String[2];nameCard[0] = employee.getName().substring(employee.getName().indexOf(" ") + 1);nameCard[1] = employee.getName().substring(0, employee.getName().indexOf(" ")); 你可能會覺得很神奇，到底是怎麼辦到的？其實原理比你想像中的簡單 設計計算機現在來用簡單的計算機來介紹，一開始我們會設計這樣的功能 123456789101112var ...

儘管nodejs簡單易學的特性，也讓很多人發現到一些值得優化的地方需要改善，例如：容易寫出攏長的程式。為了提升開發者體驗，expressjs就此誕生了，他作為一個middleware，簡化了一些攏於的設定，讓開發者不必再做一些重複的動作，只有在非必要的時候，才需要額外傳遞參數設定。那麼以下就來介紹使用方式吧！ 為什麼要用Expressjs你可能會問，同樣都是在開發Nodejs，但是為什麼要用它？Express字面上有便捷快速的意思，他是一個提升開發效率的一個middleware，開發者不再需要去記那些多又雜亂的名稱，即可順利開發。如果你有看過上一篇文章的話，相信你已經被Nodejs摧殘過後，更了解需要尋求改善開發效率的重要性了！ 使用npm安裝 首先你需要初始化npm我們很常會用到第三方library時，使用到npm 1npm init 安裝相關套件 1npm install express --save 使用Express 載入express通常我們會用app去接express，這樣app裡面就包含各種實用的功能可以使用。當然，也少不了listen去監聽port。 12345 ...

nodejs在前幾年是一個非常熱門的框架，因為他使用上非常容易上手，而在短時間之內爆紅。最常見的就是在小團體或是新創團隊，希望在短時間之內建立簡易的後端小程式，而nodejs就會是相對合適的選擇。以下就來看nodejs的使用方式吧。 簡單架構設定讓我們來看看純用Nodejs如何寫一個後端 載入http 1const http = require('http'); 使用createServer產生服務使用方式就是從http裡面使用方法，而裡面需要放的是requestListener，如果參考文件的話，可以發現這個requestListener有兩個參數分別叫做req, res，可以用來判斷使用者發送的請求是什麼類型，還有回傳的資料是什麼。以這個例子，會用一個server接住產生的服務。 1const server = http.createServer((req, res) => {...}); 設定port接著使用剛剛宣告過的server去設定需要監聽的port。意思是當你啟動這個服務的時候，你可以在指定的port連結和這個服務互動。 ...

當我們設計Component一段時間之後，Component會隨著時間不斷的壯大，到最後就會面臨效能的議題，如果使用者在使用部分Component的時候，需要花過多的時間載入，一定會影響到使用者對產品的喜好程度。因此以下討論優化Component的思路。 React.memo在學習useMemo與useCallback之前，讓我們先來認識什麼是React.memo。官方的介紹為：React.memo 是一個 higher order component。如果你的 function component 每次得到相同 prop 的時候都會 render 相同結果，你可以將其包在 React.memo 之中，透過快取 render 結果來在某些情況下加速。這表示 React 會跳過 render 這個 component，並直接重用上次的 render 結果。 簡單來說，你可以把React.memo想像成是一個cache，只有偵測到props改變才會render。 如果你在child Component寫一個log測試render的次數，你可能會發現光是一個click事件就render了好幾 ...

以下將會以前端開發作為例子，讓大家更了解耦合與內聚的概念是什麼。 耦合（Coupling）簡單來說就是相依性，如果討論的對象，彼此的相依性越強烈，那麼我們就可以說彼此的耦合性越大。 代表人物如果要拿來擬人的話，最具代表性的人，大概就是國文課本的賣油翁了。大家最熟悉的課文：康肅問曰：「汝亦知射乎？吾射不亦精乎？」翁曰：「無他，但手熟爾。」康肅忿然曰：「爾安敢輕吾射！」翁曰：「以我酌油知之。」乃取一葫蘆置於地，以錢覆其口，徐以杓酌油瀝之，自錢孔入而錢不濕。因曰：「我亦無他，惟手熟爾。」 賣油翁雖然其他的事並不會，但是他只負責賣油這個任務，而且很專精。 共用元件耦合性可以讓同樣頁面擁有的Component, function…，重複被使用，因為我們在開發程式的時候，一定會時常遇到類似的情境需要用到類似的功能，因此會把這些東西便成為共用元件。例如以下的例子： config.js12345export const categories = [ {label: '全部', value: 0}, {label: '未滿一年&# ...