[前端自學轉職攻略] 22. 怎麼避免不小心改壞現有功能?

更新 發佈閱讀 1 分鐘


學習寫測試和使用監控工具


隨著專案功能的日益複雜,每次進行功能修改時,必須考慮的情境也隨之增加。在每一次改動時,手動逐一測試所有流程會相當費時費力。此時,撰寫測試便是一個不錯的解決方案。


單元測試


建議從 JestVitest 中擇一學習,再搭配 testing-library

使用以下關鍵字,就能找到許多文章與教學。

  • {jest or vitest} {react or vue} {testing-library}

例如:vitest react testing-library


e2e 測試


建議從 PlaywrightPuppeteerCypress 三者中擇一學習。



應不應該寫測試? 要寫多少測試?


對於測試有許多不同看法,有人覺得沒有測試的程式碼就是 legacy code,也有人覺得寫測試會拖慢開發效率。個人認為多數情況寫測試是利大於弊的,不過寫測試額外的開發成本、維護成本、CI 執行時間等,也都需要納入考慮。

正因為寫測試有額外成本,更應該讓測試真正發揮作用。建議透過持續在 side project 開發新功能,實際體會哪些測試真正幫你避免改壞功能,而哪些測試只是徒增開發時間。

等累積一些經驗後,可以參考 best practices 來精進技術能力。如之前所提,best practices 並非鐵律,應試著理解原因,評估什麼時候適合使用。



監控工具


除了寫測試外,也可以在 side project 中整合 SentryDatadog 等第三方服務,來監控程式的運作是否正常。確保當程式出錯時,能及時發現並修復。


留言
avatar-img
留言分享你的想法!
avatar-img
前端轉職經驗談
5會員
41內容數
零基礎到成功轉職,一路上會遇到哪些挑戰、應該如何解決? - 猶豫階段:「這適合我嗎?薪水如何?...」 - 起步階段:「怎麼開始學?要不要做 side project?...」 - 成長階段:「如何優化開發效率?選擇框架?...」 - 面試階段:「怎麼準備技術和行為面試?...」
前端轉職經驗談的其他內容
2025/03/09
原文:HOW TO GET STARTUP IDEAS 原文是針對如何找出創業的題目,不過如果想做 side project 卻苦無想法的話,也可以參考看看。 獲得創業點子的方法不是刻意去想創業點子,而是尋找問題,最好是你自己面臨的問題。 最優秀的創業點子通常具有三個共同點: 這是創辦
2025/03/09
原文:HOW TO GET STARTUP IDEAS 原文是針對如何找出創業的題目,不過如果想做 side project 卻苦無想法的話,也可以參考看看。 獲得創業點子的方法不是刻意去想創業點子,而是尋找問題,最好是你自己面臨的問題。 最優秀的創業點子通常具有三個共同點: 這是創辦
2025/02/02
學習 JavaScript 時,理解語法和概念是一回事,實際應用又是另一回事。許多初學者會遇到「看得懂範例,但自己寫不出來」的困境。因此,本文從實際開發的常見情境中,簡化出了 10 個範例,讓你能夠逐步練習,慢慢熟悉寫程式的思考方式。
2025/02/02
學習 JavaScript 時,理解語法和概念是一回事,實際應用又是另一回事。許多初學者會遇到「看得懂範例,但自己寫不出來」的困境。因此,本文從實際開發的常見情境中,簡化出了 10 個範例,讓你能夠逐步練習,慢慢熟悉寫程式的思考方式。
2025/01/30
每年一次的 State of JS 問卷調查,不只是觀察前端技術趨勢的工具,更是檢視自身技能與學習方向的絕佳機會。透過這份調查,你可以了解前端生態的變化,確保自己沒有錯過重要資訊,並規劃未來的學習路線。
Thumbnail
2025/01/30
每年一次的 State of JS 問卷調查,不只是觀察前端技術趨勢的工具,更是檢視自身技能與學習方向的絕佳機會。透過這份調查,你可以了解前端生態的變化,確保自己沒有錯過重要資訊,並規劃未來的學習路線。
Thumbnail
看更多
你可能也想看
Thumbnail
一位長期推廣閱讀寫作、經營多個平臺,也是《30Days愛自己的小練習》作者,分享首次親自體驗蝦皮購物的歷程。以「網購小白」的角度,詳細介紹了蝦皮平臺操作的便利性,分享了加入分潤的七大好處、賺錢的五大撇步。文章穿插了雙12活動、購物連結及分潤連結,極具參考價值。
Thumbnail
一位長期推廣閱讀寫作、經營多個平臺,也是《30Days愛自己的小練習》作者,分享首次親自體驗蝦皮購物的歷程。以「網購小白」的角度,詳細介紹了蝦皮平臺操作的便利性,分享了加入分潤的七大好處、賺錢的五大撇步。文章穿插了雙12活動、購物連結及分潤連結,極具參考價值。
Thumbnail
(一)分享曾經在蝦皮買過的好物 這是一個真實的故事,筆者大約每半年會去蝦皮網站購買一種叫做永樂健的酵素,這是日本製造原裝進口的酵素,有兩種以上的口味(橘子口味、優酪乳口味),我都買橘子口味的,比較好吃,因為是台灣出貨,很快就會寄來。每次買30包,店家又加贈2包,等於擁有32包。
Thumbnail
(一)分享曾經在蝦皮買過的好物 這是一個真實的故事,筆者大約每半年會去蝦皮網站購買一種叫做永樂健的酵素,這是日本製造原裝進口的酵素,有兩種以上的口味(橘子口味、優酪乳口味),我都買橘子口味的,比較好吃,因為是台灣出貨,很快就會寄來。每次買30包,店家又加贈2包,等於擁有32包。
Thumbnail
雙12即將來襲!今年不只是要買東買西,還要變身購物專家,就由我來推薦大家購物清單,裡面還有開箱文給大家參考。先來一個讓人逛街腳底舒服的「舒壓腳底按摩輪」,數位遊牧一定要帶的「無印良品筆電防震提袋」,讓我想去咖啡廳寫文章帶了就走,再來是居安思危、防災必備的 MVP「3Coins 手搖式收音機」,它還有
Thumbnail
雙12即將來襲!今年不只是要買東買西,還要變身購物專家,就由我來推薦大家購物清單,裡面還有開箱文給大家參考。先來一個讓人逛街腳底舒服的「舒壓腳底按摩輪」,數位遊牧一定要帶的「無印良品筆電防震提袋」,讓我想去咖啡廳寫文章帶了就走,再來是居安思危、防災必備的 MVP「3Coins 手搖式收音機」,它還有
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
當你在開發程式時,難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性,我們使用「例外處理」來處理這些異常情況。
Thumbnail
當你在開發程式時,難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性,我們使用「例外處理」來處理這些異常情況。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
確保沒有遺漏或錯誤 程式的完整資訊資料對於程式設計至關重要。這是因為只有透過完整的資訊,我們才能確保在程式設計中沒有任何遺漏或錯誤。最終,後台管理扮演著管理系統中所有動作和行為是否符合特定標準的重要角色。 採取不符合預期的行動 這種符合性的重要性在於,當我們設計程式時,希望使用者按照預期的方式
Thumbnail
確保沒有遺漏或錯誤 程式的完整資訊資料對於程式設計至關重要。這是因為只有透過完整的資訊,我們才能確保在程式設計中沒有任何遺漏或錯誤。最終,後台管理扮演著管理系統中所有動作和行為是否符合特定標準的重要角色。 採取不符合預期的行動 這種符合性的重要性在於,當我們設計程式時,希望使用者按照預期的方式
Thumbnail
權限管理=新增、修改、刪除+審核 通常,這種程式的設計會包含權限管理,其中包括現場修改、刪除等三大類功能。然而,根據經驗,我們還需要關注另一類功能,即審核權限。 審核不執行新增 審核權限通常不執行新增的動作,僅限於某些欄位的輸入。新增、修改、刪除這些操作基本上是容易理解的。也就是說,對於這個工
Thumbnail
權限管理=新增、修改、刪除+審核 通常,這種程式的設計會包含權限管理,其中包括現場修改、刪除等三大類功能。然而,根據經驗,我們還需要關注另一類功能,即審核權限。 審核不執行新增 審核權限通常不執行新增的動作,僅限於某些欄位的輸入。新增、修改、刪除這些操作基本上是容易理解的。也就是說,對於這個工
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News