iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

轉生成前端工程師後,30步離開新手村! 系列

本系列獻給剛轉職成前端的朋友們,希望透過30篇文章幫助抓到開發重點和需要的能力,成為可以獨立作業的工程師,離開新手村!

討論內容包含:
前端開發流程
SD文件設計思路和模板
常見前端功能實作以Angular為例
專案架構設計以Angular為例
UnitTest導入和設計以
E2ETest導入和設計
在CI pipeline上執行測試

本系列使用的框架和服務:
Angular, Jest, Cypress, AzureDevops

鐵人鍊成 | 共 30 篇文章 | 6 人訂閱 訂閱系列文 RSS系列文
DAY 21

# 前端實作案例分享: 電商購物車(一)

提問:競業都有提供購物車耶,上頭有交代希望下個版本可以落地購物車功能。 針對購物車相關的需求我們可以從這個功能所會參與的角色下去思考。 首先 ”使用者” 前往電...

2024-10-05 ‧ 由 艾瑞卡 分享
DAY 22

# 前端實作案例分享: 電商購物車(二)

上一篇文章我們提到了購物車的設計想法,以及會使用到的Angular功能。本篇文章我們從專案架構開始,逐一使用範例程式碼進行實作說明該如何在前端建立一個最基本的購...

2024-10-06 ‧ 由 艾瑞卡 分享
DAY 23

# 前端實作案例分享: 電商購物車(三)

上一篇文章我們實作了一個基本的購物車,但現行市面上的電商平台購物車絕對都更加複雜。以蝦皮為例,可以發現要進入購物車必須要有會員資格。即使關閉App或是更換裝置,...

2024-10-07 ‧ 由 艾瑞卡 分享
DAY 24

# 前端實作案例分享: 電商購物車(四)

今天是購物車實作的最後一篇文章,我們要來討論兩個狀態之間相互耦合的情況下,該如何處理。 假設今天的業務需求是,在進入購物車的時候,我們要比對結帳狀態和購物車中的...

2024-10-08 ‧ 由 艾瑞卡 分享
DAY 25

# 開心交付程式碼前,先補上測試 !

當我們費盡千辛萬苦,終於硬著頭皮想辦法把功能實作出來之後,也在Local自己測試過。覺得沒有問題了,想開開心心推PR。一發上去,可能會遇到兩個狀況。CI pip...

2024-10-09 ‧ 由 艾瑞卡 分享
DAY 26

# 使用Jest為Angular專案撰寫UnitTest(一)

上一篇文章我們介紹了測試金字塔。今天我們就從金字塔的最下面開始,來分享如何在Angular專案中,導入Jest這個單元測試框架。 什麼是Jest Jest...

2024-10-10 ‧ 由 艾瑞卡 分享
DAY 27

# 使用Jest為Angular專案撰寫UnitTest(二)

上一篇文章我們分享了如何導入Jest到Angular專案中,今天我們要分享如何規劃單元測試。 測試的範圍 在分享測試金字塔的時候有提到單元測試的目的是驗證應用...

2024-10-11 ‧ 由 艾瑞卡 分享
DAY 28

# 使用Jest為Angular專案撰寫UnitTest(三)

今天要透過上一篇介紹的單元測試撰寫方式,實際來為一個 component 撰寫單元測試。使用Jest為Angular專案撰寫UnitTest(一)使用Jest為...

2024-10-12 ‧ 由 艾瑞卡 分享
DAY 29

# 使用Cypress為Angular專案撰寫整合測試特性的E2E測試

前言 今天我們要聊聊工作中遇到的一個問題。我們需要撰寫測試來驗證前端需求的正確性(也就是UI/UX)。於是我們想,E2E測試非常適合,但是因為環境和經費種種因素...

2024-10-13 ‧ 由 艾瑞卡 分享
DAY 30

# 在Azure CI Pipeline中運行前端測試

今天我們要來聊聊,測試寫完之後,該如何讓測試是具有強制力,並且實際融入開發流程中,能夠持續進行迭代的方法。 在目前的工作經驗中發現在CI Pipeline中進行...

2024-10-14 ‧ 由 艾瑞卡 分享