鐵人檔案
本系列獻給剛轉職成前端的朋友們，希望透過30篇文章幫助抓到開發重點和需要的能力，成為可以獨立作業的工程師，離開新手村！
討論內容包含：
前端開發流程
SD文件設計思路和模板
常見前端功能實作以Angular為例
專案架構設計以Angular為例
UnitTest導入和設計以
E2ETest導入和設計
在CI pipeline上執行測試
本系列使用的框架和服務:
Angular, Jest, Cypress, AzureDevops
截至目前為止，我們了解了: 前端開發的流程(需求同步 → 系統設計 → 功能實作 → 測試撰寫 → QA撰寫 → 版本發佈) 理解專案的方式(架構圖 + 序...
首先，為什麼需要系統設計文件? 的確，在某些開發周期短，人數少或是功能較單純的情境底下，可能有個單純的spec或是口頭溝通清楚就可以了。 但是，當今天討論到團隊...
假設今天收到了一個需求，要在前端專案加入一個全域的 Popup。功能點有三： 可以輸入自訂的訊息 依照情境於關閉 Popup 時觸發不同的行為 Popup...
延續上一篇的需求， 一個全域的 Popup。功能有三： 可以輸入自訂的訊息 依照情境於關閉 Popup 時觸發不同的行為 Popup 有統一的 UI 系...
今天我們來把系統文件完成，還剩下兩個流程點。 系統文件設計： 流程點二的實作很明顯是 switch case，於是我們可以使用 “分岔節點” 來繪製。 流程圖...
提問: 有一個header，裡面有A，B兩個區塊，A是固定寬或是固定比例，B是動態寬度隨內容而定。今天客戶希望B在字數少一點的時候必須要置中對齊，字數多的時候...
提問: 我希望使用者按下瀏覽器的回上一頁或是重新整理時，能夠先跳出一個確認訊息，提醒使用者之後再讓他選擇是否離開該怎麼做? 我們可以利用Window Hist...
提問: 消費者從商品明細頁回到商品列表的時候，希望可以保留消費者先前瀏覽的位置。 我們可以透過頁面緩存機制來實現這個需求。 什麼是頁面緩存？ 簡單來說，頁面緩...
提問：專案需要加入一個 NavBar，依據不同頁面顯示切換樣式。 實作方式： 這次的架構針對 NavBar 的部分總共會有四個角色：NavBar 本體、控...
提問：呼叫 API 的時候需要帶 token 給後端驗證該怎麼辦？ 我們可以使用 HttpInterceptor 進行統一處理！ 什麼是 HttpInte...
