[前端自學轉職攻略] 22. 怎麼避免不小心改壞現有功能？
閱讀時間約 1 分鐘
學習寫測試和使用監控工具
隨著專案功能的日益複雜，每次進行功能修改時，必須考慮的情境也隨之增加。在每一次改動時，手動逐一測試所有流程會相當費時費力。此時，撰寫測試便是一個不錯的解決方案。
單元測試
建議從 Jest、Vitest 中擇一學習，再搭配 testing-library。
使用以下關鍵字，就能找到許多文章與教學。
- {jest or vitest} {react or vue} {testing-library}
例如：vitest react testing-library
e2e 測試
建議從 Playwright、Puppeteer、Cypress 三者中擇一學習。
應不應該寫測試？ 要寫多少測試？
對於測試有許多不同看法，有人覺得沒有測試的程式碼就是 legacy code，也有人覺得寫測試會拖慢開發效率。個人認為多數情況寫測試是利大於弊的，不過寫測試額外的開發成本、維護成本、CI 執行時間等，也都需要納入考慮。
正因為寫測試有額外成本，更應該讓測試真正發揮作用。建議透過持續在 side project 開發新功能，實際體會哪些測試真正幫你避免改壞功能，而哪些測試只是徒增開發時間。
等累積一些經驗後，可以參考 best practices 來精進技術能力。如之前所提，best practices 並非鐵律，應試著理解原因，評估什麼時候適合使用。
監控工具
除了寫測試外，也可以在 side project 中整合 Sentry 或 Datadog 等第三方服務，來監控程式的運作是否正常。確保當程式出錯時，能及時發現並修復。
3會員
31內容數
零基礎到成功轉職，一路上會遇到哪些挑戰、應該如何解決？
- 猶豫階段：「這適合我嗎？薪水如何？...」
- 起步階段：「怎麼開始學？要不要做 side project？...」
- 成長階段：「如何優化開發效率？選擇框架？...」
- 面試階段：「怎麼準備技術和行為面試？...」
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
在先前的型別文章中，我們曾經聊過 JavaScript 常用的一些型別，但針對布林這個型別，我們沒有做太多的解釋，原因在於布林值在 JavaScript 會有一個特殊的規則：自動轉型 。
自動轉型可說是讓 JavaScript 為弱型別、且難以管理的最重要的要素，接著就來讓我們來聊聊什麼是自動轉型
CSS 可以用來創建各種風格的 logo。以下是一個簡單的例子，展示如何使用 CSS 創建一個帶有文字的圓形 logo：
HTML：
<div class="logo">
<span>MyLogo</span>
</div>
CSS：
/* Logo 樣式 */
.logo {
我在準備進入切版的第一步通常會是設定好全域樣式，以及整理出有哪些共用樣式，也就是把設計稿上規範好的設計系統，例如顏色、間距、字體等等先寫好 CSS，而我自從會 SCSS 後就習慣用這個方式去寫 CSS，透過分成不同檔案、依序載入，日後在修改跟維護上會比較好管理跟減少時間。
Functional Programming 中文譯作函式程式設計，或是功能性程式設計，常簡稱為：FP，是一種透過使用純函式（Pure Funciton）進行軟體開發，且避免副作用的程式設計典範，比起宣告式的流程控制，在 FP 採用主要以表達式的方式撰寫程式碼。
Hoisting 可以說是 ES6 問世之後，去面試還是會爾偶被問到的面試考題，雖然 Hoisting 離 Modern JavaScript 的技術有點距離，實作上幾乎不太會用到，但透過了解 Hoisting 的概念，可以對這門語言有更深的了解與掌握度。
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方
尤其適合想要練練手感的時候可以方便地展示成果的地方
在過去使用手動commit至gh-page的分支上，或是使用deploy.sh檔來部署，對於我這種懶人來說都是多一個步驟，時常會覺得麻煩
現在能夠透過github ac
這一次再分享心得，主要是要跟大家聊聊，在結束 JavaScript 直播班後，我發現自己的切版技能跟不上實作功能的開發速度，於是又再投入了同樣是六角學院開的切版直播班之學習心得。
初學程式的時候，可能會有幾個問題讓你的開發速度低落，腦袋動得很快，但是手卻跟不上想法。
舉例來說： 瀏覽器的DevTool一直報錯，畫面的邏輯出錯，或是畫面根本出不來，但你卻不知道問題出在哪。
前陣子有讀者來信詢問我：「嗨！Vivian，我想要請問妳都是在哪裡學程式的呢？是實體課程嗎？」
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
在先前的型別文章中，我們曾經聊過 JavaScript 常用的一些型別，但針對布林這個型別，我們沒有做太多的解釋，原因在於布林值在 JavaScript 會有一個特殊的規則：自動轉型 。
自動轉型可說是讓 JavaScript 為弱型別、且難以管理的最重要的要素，接著就來讓我們來聊聊什麼是自動轉型
CSS 可以用來創建各種風格的 logo。以下是一個簡單的例子，展示如何使用 CSS 創建一個帶有文字的圓形 logo：
HTML：
<div class="logo">
<span>MyLogo</span>
</div>
CSS：
/* Logo 樣式 */
.logo {
我在準備進入切版的第一步通常會是設定好全域樣式，以及整理出有哪些共用樣式，也就是把設計稿上規範好的設計系統，例如顏色、間距、字體等等先寫好 CSS，而我自從會 SCSS 後就習慣用這個方式去寫 CSS，透過分成不同檔案、依序載入，日後在修改跟維護上會比較好管理跟減少時間。
Functional Programming 中文譯作函式程式設計，或是功能性程式設計，常簡稱為：FP，是一種透過使用純函式（Pure Funciton）進行軟體開發，且避免副作用的程式設計典範，比起宣告式的流程控制，在 FP 採用主要以表達式的方式撰寫程式碼。
Hoisting 可以說是 ES6 問世之後，去面試還是會爾偶被問到的面試考題，雖然 Hoisting 離 Modern JavaScript 的技術有點距離，實作上幾乎不太會用到，但透過了解 Hoisting 的概念，可以對這門語言有更深的了解與掌握度。
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方
尤其適合想要練練手感的時候可以方便地展示成果的地方
在過去使用手動commit至gh-page的分支上，或是使用deploy.sh檔來部署，對於我這種懶人來說都是多一個步驟，時常會覺得麻煩
現在能夠透過github ac
這一次再分享心得，主要是要跟大家聊聊，在結束 JavaScript 直播班後，我發現自己的切版技能跟不上實作功能的開發速度，於是又再投入了同樣是六角學院開的切版直播班之學習心得。
初學程式的時候，可能會有幾個問題讓你的開發速度低落，腦袋動得很快，但是手卻跟不上想法。
舉例來說： 瀏覽器的DevTool一直報錯，畫面的邏輯出錯，或是畫面根本出不來，但你卻不知道問題出在哪。
前陣子有讀者來信詢問我：「嗨！Vivian，我想要請問妳都是在哪裡學程式的呢？是實體課程嗎？」