鐵人檔案
本系列獻給剛轉職成前端的朋友們，希望透過30篇文章幫助抓到開發重點和需要的能力，成為可以獨立作業的工程師，離開新手村！
討論內容包含：
前端開發流程
SD文件設計思路和模板
常見前端功能實作以Angular為例
專案架構設計以Angular為例
UnitTest導入和設計以
E2ETest導入和設計
在CI pipeline上執行測試
本系列使用的框架和服務:
Angular, Jest, Cypress, AzureDevops
前言: 名詞定義 新手村如何定義我相信每個人，每個組織都不同。以下討論會以我個人給自己的目標當成出發點。歡迎留言分享你的看法。 以下討論只代表個人觀點不代表本台...
為什麼需要認識既有專案呢？ 舉例來說，小明加入了一個電商的前端團隊，負責的第一個項目是要在既有的購物流程中加入一個同意條款的popup。在不了解既有專案的情況下...
系統架構圖是什麼？ 系統架構圖是一種視覺化的圖表，用來展示一個系統的整體結構和組成部分。主要目的是幫助開發者、設計師和相關人員理解系統的各個組件是如何相互連接和...
前一篇文章中，我們提到了工具和劃分區域。本篇文章將延續前篇內容，從Angular的角度手把手繼續繪製系統架構圖。 製作第一份系統架構圖（前端角度） 3. 從前...
前一篇文章我們找到了專案的路由架構並找到了’product-list’，本篇文章要從ProductListComponent開始建立元件之間的關係。 製作第一份...
製作第一份系統架構圖(前端角度) 3. 從前端專案開始繪製組件 外部依賴和API的關聯主要可以分成以下幾類: 後端API請求: 前端應用與後端服務進行數據交...
在第二篇文章中有提到系統流程圖就是像是咖啡廳的作業流程SOP，以前端開發的角度來解釋，系統流程圖的內容會包含使用者的操作行為以及專案的技術細節(生命週期，元件載...
那麼該怎麼畫序列圖呢? 我們從序列圖使用到的圖形開始解釋。 序列圖(Sequence Diagram)中使用的圖形 首先呢，序列圖分成”X軸(橫)”和”Y軸(...
今天我們要透過範例程式碼來畫出序列圖。範例包含一個商品列表Component(HTML,TS)，一個Service，以及一個Route檔案。 廢話不多說先上程式...
前一篇文章我們畫出了使用者進入商品頁面的序列圖，今天我們要繼續完成序列圖。還差兩個功能，使用者過濾商品和前往商品明細頁，我們開始吧! 繪製序列圖 商品列表頁面...
