百工的一天

2025.04.11 | 1741次觀看

前端工程師是什麼?薪水怎破100萬?完整攻略,附:台積電前端工程師工作心得

前端(Frontend): 給人看的(介面、使用者體驗),網頁的畫面、按鈕、圖片、排版。

前端 (Frontend)是什麼?

這是使用者直接與之互動的部分,包括網頁的設計、佈局和內容。前端開發使用的技術包括HTML、CSS和JavaScript。

舉例來說:當你打開 104人力銀行,看到的畫面就是前端工程師控制的,包含不同裝置的畫面呈現~從電腦、平板或手機觀看,都是前端工程師需要留意的。

重要元素舉例

  • 搜尋欄:讓你輸入「軟體工程師」並按下搜尋
  • 職缺列表:顯示各種公司和薪資範圍
  • 登入按鈕:點擊後彈出登入視窗
  • 應徵按鈕:點了之後,系統會幫你送出履歷

前端工程師的薪水與薪水天花板

台灣整體而言前端工程師薪水中位數落在66.8萬~81萬間,天花板推估是91.3~101.6萬。

工作年資年薪中位數推估薪水天花板職缺
1年以下66.8萬94.1萬
1~3年71萬91.3萬
3~5年78.1萬96.7萬
5~10年81萬101.6萬
資料來源 104薪資情報 有效樣本:575 資料更新:2025年02月10日

如何突破前端工程師的薪水天花板

選擇對的公司/產業

台積電前端工程師工作心得

以下為講座精華節錄

  • 薪水區間?年薪約30個月,新鮮人月薪約6萬。
  • 加班很兇嗎?加班時數看跟的專案,配合專案前進。去年自己未超過100小時
  • 公司內用的語言較多,不同的系統專案或對接的單位不同,要學習不同的語言
  • 怎麼進台積電?平常就有寫技術部落格、每年參加IT鐵人賽、在104經營個人品牌(SEO權重優)
  • 同事都是哪些人?(免費領取台積電工作心得與QA精華)

看懂遊戲規則:深耕5大能力,擁有更多選擇權

1.技術能力(Technical Skills),能否寫出高品質、可維護、效能優化的前端程式,並快速學習新技術應用在工作上,也能夠帶領內部技術前進(內部 Tech Talk 或自建部落格)

  • 程式品質:乾淨、結構清晰、DRY、KISS、SOLID
  • 效能最佳化:頁面載入時間、CDN快取、前端壓縮技術、降低不必要的 re-render
  • 技術廣度與深度:獨立處理 CSS、JavaScript、框架(React, Vue, Angular)等核心技術、熟悉 TypeScript、State Management(Redux, Vuex)、處理前端安全問題(如 XSS, CSRF, CORS)

2.產品與專案影響力(Project & Product Impact),能有效率地完成任務,並確保產品的品質,過程中主動優化現有系統,提出新的技術方案,提升開發效率。

  • 專案完成度:照時程交付、主動發現並解決問題、處理緊急問題
  • 產品價值:功能是否真的提升了使用者體驗、A/B 測試或數據分析、減少技術債,提高長期維護性

3.開發效率(Development Efficiency),高效產出高品質的程式,主動提出更有效率的開發工具或流程,寫出自動化測試(如 Jest、Cypress),減少回歸測試時間。

  • 時間管理:需求評估準確度、根據需求合理拆分任務,安排優先順序
  • 程式碼管理:Pull Request(PR)清楚易讀、Code Review 積極參與給出建設性回饋
  • Debug 能力:利用 Log、DevTools、Profiler 進行高效率的問題解決

4.團隊合作與溝通(Collaboration & Communication),與其他工程師、PM、設計師、QA、數據分析師等合作單位順暢合作。指導新人、撰寫開發文件,幫助團隊快速上手。

跨部門溝通與 PM 討論需求,提供技術可行性建議
與設計師合作,確保 UI/UX 最佳化
與後端工程師協作,確保 API 串接順暢
Code Review幫助同事提升程式碼品質
接受別人的建議,改進自己的程式碼
主動性主動提出問題或改善建議
在團隊會議中有效表達技術方案
前端工程師 團隊合作與溝通的重要性

5.創新與影響力(Innovation & Leadership),完成自己的工作外,帶來更大的影響。有能力也主動推動團隊技術決策,如選擇新框架、優化開發流程。

  • 技術創新:引入新技術來提升開發效率、開發內部工具,幫助團隊節省時間
  • 技術影響力:技術社群內分享知識、開源專案或貢獻
  • 技術領導:在團隊中擔任技術導師、帶領技術專案

關鍵重點:績效不只是寫多少行程式,而是對產品和團隊的影響

  1. 開發速度:平均完成一個 Story(使用者故事)的時間
  2. Bug 數量:新功能上線後的 Bug 率
  3. PR 參與度:Code Review 的次數與回饋價值
  4. 前端效能:Google Lighthouse 分數、First Contentful Paint(FCP)
  5. 使用者行為變化:某個 UI 改版後,點擊率是否提升?

能力方法
技術能力深入學習前端框架、優化效能、提升可維護性
產品影響力確保開發的功能有助於提升使用者體驗
開發效率提高 Debug 能力、善用自動化工具
團隊合作提高溝通能力、參與 Code Review、幫助同事
創新影響力參與技術社群、提出技術改進方案
前端工程師的5大能力

前端用的技術

  • HTML 負責畫出網頁結構(像骨架)
  • CSS 負責排版與設計(讓它變美)
  • JavaScript 負責互動(讓按鈕能點、內容會變)
  • 框架和庫:如React、Vue.js和Angular,這些工具可以幫助你更高效地開發複雜的應用程式。
  • 響應式設計:確保網站在各種裝置上都能良好顯示,通常使用CSS框架如Bootstrap。
  • 版本控制:如Git,用於管理和協作開發

前端工程師主要合作的夥伴

1. 後端工程師(Backend Developer)

👉 負責提供 API,讓前端能夠拿資料,確保功能運作

合作範例:你要做一個「應徵按鈕」,但這個按鈕要能讓使用者點了後,系統能自動送出履歷,這時候前端需要跟後端拿 API。
討論 API 的格式:
你問:「我這邊需要傳哪些資料才能應徵?」
後端說:「你傳 user_id、job_id 給我,我幫你送出履歷」
你:「那回應結果是什麼?我要顯示成功或失敗」
後端:「如果成功,我回 status: success,失敗的話會給錯誤碼」
💡 前端 + 後端 = 讓網站不只是畫面,而是能「動」起來!

3. 產品經理(PM, Product Manager)

👉 負責規劃產品功能,確保開發方向符合商業目標

合作範例

  • 你做完了「應徵按鈕」,但 PM 突然跟你說:「我們希望這個按鈕能讓用戶自訂求職信」
  • 這時候你得確認:
    • 「這功能會影響到後端嗎?需要修改 API 嗎?」
    • 「這會不會影響現在的 UI 設計?」
    • 「會不會讓使用者體驗變得更複雜?」

💡 前端 + PM = 確保開發出來的功能,真的是「使用者需要的」!

4. 測試工程師(QA, Quality Assurance)

👉 負責測試系統,確保功能正常、不出 Bug

合作範例

  • 你開發完「應徵按鈕」,但 QA 測試時發現:
    • BUG 1: 在 iPhone 上點擊按鈕沒反應?
    • BUG 2: 送出履歷後沒有顯示成功提示?
    • BUG 3: 按太快的話會連送兩次履歷?

💡 前端 + QA = 確保使用者「真的能順利使用」功能!

5. 數據分析師(Data Analyst)

👉 負責分析使用者行為,讓前端能做出更好的優化

合作範例

  • 你做了一個「首頁推薦職缺」功能,但數據分析師告訴你:
    • 「這個區塊的點擊率只有 5%!」 → 代表 UI 可能需要調整
    • 「使用者停留時間太短」 → 可能要加上動畫或更清楚的標題
    • 「A/B 測試顯示紅色按鈕比藍色好」 → 你需要調整設計

💡 前端 + 數據分析師 = 讓 UI/UX 變得更直覺、更有效!

6. 運維/系統工程師(DevOps / SRE)

👉 負責網站伺服器的運行與最佳化

合作範例

  • 你的前端代碼已經寫好了,現在要部署到正式環境
  • 可能遇到的問題:
    • 網頁載入速度太慢? → DevOps 可能會幫你設定 CDN 加速
    • 按鈕點擊後沒反應? → 可能是伺服器資源不足,需擴充
    • 某些用戶看不到最新版本? → DevOps 需要清理快取

💡 前端 + DevOps = 確保你的程式能「穩定、安全」地運行!

夥伴主要合作內容影響前端的地方
後端工程師提供 API,讓前端可以拿到資料決定資料怎麼傳遞
UI/UX 設計師設計畫面,確保用戶體驗影響網頁排版、按鈕設計
產品經理(PM)決定功能需求與優先順序決定要做什麼、怎麼做
測試工程師(QA)測試功能,找出 Bug確保程式正常運行
數據分析師提供使用者數據,幫助優化 UI影響 UI 設計與功能調整
運維/系統工程師(DevOps)負責部署、效能優化確保網站運行順暢
前端工程師的合作夥伴