技術分享 | 如何成為前端工程師
更新於 2023/02/18閱讀時間約 3 分鐘
嗨 我是森妮 一個資管背景的菜鳥工程師
四年學習不少基礎，終究逃不過理論無法符合職場需求的命運，跳不少坑才成為軟體工程師，跟大家分享軟體工程師中常見的三種角色的怎麼開始學習、學習路線、必備的技能跟就業注意事項！
軟體工程師屬於一個統稱，開發網頁、APP是多數，在求職的職缺中分為「前端」與「後端」兩種角色，包含前端及後端的角色則是「全端」工程師。
這篇是【前端工程師篇】，後續會再介紹後端工程師與全端工程師，文章會以網頁做為說明的例子，分享給在學過程中或想轉職的人，知道自己適合哪一種軟體工程師角色以及一些必備的技能！
［前端工程師］
前端工程師就像裝潢師建立使用者的操作介面，我們在網頁所看到的畫面中的字體、間距、配色，包含所有圖片呈現，功能操作流程、動態效果呈現，都是由前端工程師所打造！
前端工程師會自行設計或根據UI/UX設計師所提供的設計圖將網頁畫面切版，設計功能間的操作流程，建立順暢與方便操作的介面，加上使用者互動(彈跳視窗、按鈕調整、表格調整)提升網站靈活度，而在這過程中也需確保使用者在不同裝置、不同瀏覽器的使用上都能擁有舒適的體驗、完整功能與資料呈現，提供使用者視覺跟良好的體驗環境！
在我們所看到的網站設計完成後，還需建立與後端的資料接收與傳遞，透過API的方式讓使用者可以在互動過程中取得所需的資料，並將資料傳遞到後端達到資料交換效果。
［工作流程］
- 團隊中的PM、SA與客戶進行需求確認
- UI/UX設計師根據客戶需求設計出網站的建構原型prototype或線框稿wireframe，與前端工程師合作，將開發會遇到的問題進行討論與調整，將設計的品質維持並降低開發的風險
- 前端工程師以設計圖利用 HTML, CSS, JavaScript 等前端技術進行網站畫面的切版，實現按鈕設計、操作流程與互動體驗至瀏覽器
- 根據裝置尺寸、裝置設定、瀏覽器、瀏覽器版本等不同因素進行調整，使網站在這些因素下仍可以完整將資料呈現與使用，盡可能涵蓋至更多不同的使用者
- 與後端工程師合作討論資料的接收與傳遞格式，並根據API文件進行前端與後端的資料串接
- 開發的工時評估與開發目標安排為PM的管理範圍，遇到問題與需要協助也須即時反應，讓進度可以順利進行。
［學習路徑］
HTML→CSS(Sass/Less)→JavaScript→jQuery→Ajax→框架(Angular/Vue/React)→Bootstrap→RWD→版本控制(Git/Svn)→API串接(閱讀API文件/串接API交換資料)
- 著重系統UI/UX畫面設計的前端工程師
對於需設計系統畫面的前端工程師，可以學習Sketch或Figma做為設計建構原型prototype或線框稿wireframe畫面的工具
- 著重資料串接與資訊安全的前端工程師
可以學習Open API的操作頁面，以及自動化測試的測試案例、跨域、憑證等實作。
［求職注意］
前端工程師的職缺分布於許多產業，部分屬於企業形象網站與產品介紹網站，這類型的前端工程師較重視美觀與商業風格呈現，資訊系統的前端工程師則更重視商業邏輯與使用者的流暢度！
- 是重視設計與美觀還是重視商業邏輯的資料處理
- 是否需要進行UI/UX的設計
［適合對象］
- 具備視覺設計美感與理解力
- 善於整理資料經過排版呈現
- 耐心觀察細節查找畫面問題
- 換位思考使用者的使用情境
- 對設計提出建議與解決方案
- 能與團隊協作及高校執行力
希望大家喜歡今天的分享，有想看的主題也歡迎告訴我💬
instagram：@xenialin.tw
email：xenialin.tw@gmail.com
instagram：@xenialin.tw
email：xenialin.tw@gmail.com
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
本篇整理自：如何用『心流』幫你成功 |《不可能的藝術》讀書分享
是我很喜歡的一位YTR-MoneyXYZ，解說的內容時常很豐富、有深度，所以也透過這篇筆記紀錄來增加我的理解。
本篇重點筆記：
勇於挑戰→將任務拆解→讓小任務在「能力挑戰最優點」→心流→保持狀態→確保自己在往目標靠近的路徑上
文中有免費的Notion模板，文末有關於Obsidian的關聯單字筆記術，專門給和我一樣，覺得背單字好無聊、總是無法順利使用出來的人。
在某個暑假，吐司編前往了日本東京，即便身處陽光灑落的商店街，或是波光粼粼的濱海商場，都無法掩蓋一個令人心痛的現實：我竟然無法運用日語單字！
Woldcoin 虹膜識別目的是透過虹膜確認你是獨立且唯一存在的，但你有想過不透過硬體在鏈上要怎麼做嗎? 為什麼要鏈上獨立唯一? 你是否曾經想過，到底誰在項目中獲取了大多數利益? 為什麼他辦的到? 為什麼項目方允許資源集中的事情發生? 這邊提出一個方法並實際看看結果!
網易旗下《陰陽師》的主美術汪洋先生，於網易遊戲學院內分享了《陰陽師》製作過程中一些有關美術設計的感悟，以及該如何成為遊戲美術設計師的心得；本文無論是從玩家的角度來閱讀，或是以設計師的角度來看，都頗為有趣。
❤️閱讀之後，如何化【知道】為【做到】呢？
這次挑了這本《少就是力量》，其實，這本書從買回家，反反覆覆被我看了好多次，反覆看原因是我內心一直有想培養的習慣，但是，想馬上養成並不容易，剛開始以為這一本斷捨離的書，可以協助解決內心的困擾，後來發現減法的道理，套在看待人生也是可以，但是，人生就是這樣，很多
除了遵從醫師指示按時服藥之外，正確的飲食也非常重要！經過營養師的指導，才知道自己的飲食不夠均衡，也發現每天三餐進食的內容及份量是影響血糖波動的重要因素。營養師提供的觀念，例如調整進食順序，把澱粉放在最後面、拉長進食的時間等，對血糖控制非常有幫助。
有時候我們在執行專案的時候會遇到一個狀況，工程師實作的東西跟預期的不一致，因此能夠正確傳達需求是一個重要的技巧。原本我認為應該就是規格說明清楚就沒問題了，實際上事情卻沒有這麼單純。
每個人在職場上或多或少都有犯錯過，但回頭檢視自己為何做不好，且力求改善的人並不多，很多時候不去做新的嘗試，就不會找到新的方法。今天跟大家聊聊初階工程師如何提高自己的經驗值以及工程師的當責之道是什麼。
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
本篇整理自：如何用『心流』幫你成功 |《不可能的藝術》讀書分享
是我很喜歡的一位YTR-MoneyXYZ，解說的內容時常很豐富、有深度，所以也透過這篇筆記紀錄來增加我的理解。
本篇重點筆記：
勇於挑戰→將任務拆解→讓小任務在「能力挑戰最優點」→心流→保持狀態→確保自己在往目標靠近的路徑上
文中有免費的Notion模板，文末有關於Obsidian的關聯單字筆記術，專門給和我一樣，覺得背單字好無聊、總是無法順利使用出來的人。
在某個暑假，吐司編前往了日本東京，即便身處陽光灑落的商店街，或是波光粼粼的濱海商場，都無法掩蓋一個令人心痛的現實：我竟然無法運用日語單字！
Woldcoin 虹膜識別目的是透過虹膜確認你是獨立且唯一存在的，但你有想過不透過硬體在鏈上要怎麼做嗎? 為什麼要鏈上獨立唯一? 你是否曾經想過，到底誰在項目中獲取了大多數利益? 為什麼他辦的到? 為什麼項目方允許資源集中的事情發生? 這邊提出一個方法並實際看看結果!
網易旗下《陰陽師》的主美術汪洋先生，於網易遊戲學院內分享了《陰陽師》製作過程中一些有關美術設計的感悟，以及該如何成為遊戲美術設計師的心得；本文無論是從玩家的角度來閱讀，或是以設計師的角度來看，都頗為有趣。
❤️閱讀之後，如何化【知道】為【做到】呢？
這次挑了這本《少就是力量》，其實，這本書從買回家，反反覆覆被我看了好多次，反覆看原因是我內心一直有想培養的習慣，但是，想馬上養成並不容易，剛開始以為這一本斷捨離的書，可以協助解決內心的困擾，後來發現減法的道理，套在看待人生也是可以，但是，人生就是這樣，很多
除了遵從醫師指示按時服藥之外，正確的飲食也非常重要！經過營養師的指導，才知道自己的飲食不夠均衡，也發現每天三餐進食的內容及份量是影響血糖波動的重要因素。營養師提供的觀念，例如調整進食順序，把澱粉放在最後面、拉長進食的時間等，對血糖控制非常有幫助。
有時候我們在執行專案的時候會遇到一個狀況，工程師實作的東西跟預期的不一致，因此能夠正確傳達需求是一個重要的技巧。原本我認為應該就是規格說明清楚就沒問題了，實際上事情卻沒有這麼單純。
每個人在職場上或多或少都有犯錯過，但回頭檢視自己為何做不好，且力求改善的人並不多，很多時候不去做新的嘗試，就不會找到新的方法。今天跟大家聊聊初階工程師如何提高自己的經驗值以及工程師的當責之道是什麼。