[前端自學轉職攻略] 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 追蹤
Hi 我是 VK~
在 8 月底寫完〈探索 AI 時代的知識革命：NotebookLM 如何顛覆學習和創作流程？〉後，有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題，剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
國泰CUBE App 整合外幣換匯、基金、證券等服務，提供簡便、低成本的美股定期定額投資解決方案。
5分鐘開戶、低投資門檻，幫助新手輕鬆進軍國際股市；提供人氣排行榜，讓投資人能夠掌握市場趨勢。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
在先前的型別文章中，我們曾經聊過 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，我想要請問妳都是在哪裡學程式的呢？是實體課程嗎？」
Hi 我是 VK~
在 8 月底寫完〈探索 AI 時代的知識革命：NotebookLM 如何顛覆學習和創作流程？〉後，有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題，剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
國泰CUBE App 整合外幣換匯、基金、證券等服務，提供簡便、低成本的美股定期定額投資解決方案。
5分鐘開戶、低投資門檻，幫助新手輕鬆進軍國際股市；提供人氣排行榜，讓投資人能夠掌握市場趨勢。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
在先前的型別文章中，我們曾經聊過 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，我想要請問妳都是在哪裡學程式的呢？是實體課程嗎？」