前端工程師是什麼？薪水怎破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萬 |
如何突破前端工程師的薪水天花板
選擇對的公司/產業
- 選擇薪水中位數高的公司：上市櫃公司年薪中位數、外商公司，公司獲利能力好，自然同樣的時間成本，能有更好的薪水保障。
- 選台灣重點產業：半導體業、科技業、金融業
台積電前端工程師工作心得
以下為講座精華節錄
- 薪水區間？年薪約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 進行高效率的問題解決
４.團隊合作與溝通（Collaboration & Communication），與其他工程師、PM、設計師、QA、數據分析師等合作單位順暢合作。指導新人、撰寫開發文件，幫助團隊快速上手。
| 跨部門溝通 | 與 PM 討論需求，提供技術可行性建議 與設計師合作，確保 UI/UX 最佳化 與後端工程師協作，確保 API 串接順暢 |
| Code Review | 幫助同事提升程式碼品質 接受別人的建議，改進自己的程式碼 |
| 主動性 | 主動提出問題或改善建議 在團隊會議中有效表達技術方案 |
5.創新與影響力（Innovation & Leadership），完成自己的工作外，帶來更大的影響。有能力也主動推動團隊技術決策，如選擇新框架、優化開發流程。
- 技術創新：引入新技術來提升開發效率、開發內部工具，幫助團隊節省時間
- 技術影響力：技術社群內分享知識、開源專案或貢獻
- 技術領導：在團隊中擔任技術導師、帶領技術專案
關鍵重點：績效不只是寫多少行程式，而是對產品和團隊的影響
- 開發速度：平均完成一個 Story（使用者故事）的時間
- Bug 數量：新功能上線後的 Bug 率
- PR 參與度：Code Review 的次數與回饋價值
- 前端效能：Google Lighthouse 分數、First Contentful Paint（FCP）
- 使用者行為變化：某個 UI 改版後，點擊率是否提升？
| 能力 | 方法 |
|---|---|
| 技術能力 | 深入學習前端框架、優化效能、提升可維護性 |
| 產品影響力 | 確保開發的功能有助於提升使用者體驗 |
| 開發效率 | 提高 Debug 能力、善用自動化工具 |
| 團隊合作 | 提高溝通能力、參與 Code Review、幫助同事 |
| 創新影響力 | 參與技術社群、提出技術改進方案 |
前端用的技術
- 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） | 負責部署、效能優化 | 確保網站運行順暢 |
