2024 前端工程師學習指南
- 文章發表於
前言
當初在學程式時總是可以在社群找到很多無私分享，這些分享有如引路的明燈般，讓我在茫然時，依然有勇氣繼續往前。希望這篇文章能像明燈般為在相同道路上的人照亮前方的道路。
這篇文章會分享自己從剛開始學程式到現在的知識獲取來源，會分成兩部分，第一部分就是前端相關的學習資源，第二部分則是資訊工程的基礎知識。接下來所分享的學習平台都可以找到品質非常好的課程，並且多數都是免費的，所以在這裡分享給大家！
另外如果是剛開始進入前端領域，也不知道該從哪裡開始下手的讀者們，建議可以先看這個 roadmap，知道大概的方向後，再透過本篇提到的資源進行學習。
前置工具
如果在財務上允許的話，強烈建議訂閱一款 AI 服務，像是 Claude 或是 OpenAI，有 AI 幫助下讓你可以減少除錯而導致心灰意冷的時間，更能夠提升你學習的效率。
至於要不要訂閱 Github Coplit，筆者認為等你到達一定的基礎後，再使用該服務，因為 Github Coplit 的自動填充功能是一把雙面刃，儘管能夠讓你快速完成工作，但也可能會讓你沒有思考的時間，這將會對新手造成一定的傷害，尤其在面試時，面試官很容易就能看出你是不是真的懂。
如果自己覺得英文閱讀能力且需要每篇都丟給 AI 去翻譯的話，建議可以訂閱像是 Immersive Translate 這種工具，它可以幫助你在閱讀英文文章時，一鍵翻譯成中文，讓你可以更快速的理解文章內容。
前端相關
Udemy
如果是剛學的程式的人，找幾門 Udemy 的課程並且 認真動手做完課程內所有範例 是非常基本的，特別是在 2024 軟體求職市場相較於前幾年有冷卻的情況下，可能學完這些都還不足以得到面試機會。而以下是筆者當初 2018 上完眾多課程後，分享出自己覺得學到最多的幾堂課
這門課程基本上就是一個網頁開發的通識課，從最基本的 JavaScript, CSS 到 NodeJS 與部署都會在這門課學習到，非常推薦新手可以從此入門。
想要學 React 與 Redux 這門課是非常好的起始點，此講師講得淺顯易懂，並且會帶很多小專案，讓初學者可以由深入淺的學習。
要學 CSS 看這門課就夠了，其也是由深入淺的方式，課程會有三個專案，如果有認真學習，上完課後你的 CSS 實力會有一定的水準。
想要更深入了解 JS 概念的人不仿可以嘗試這門課！
這門課有點類似第一門課的進階版，使用 MongoDB, Express, React 與 NodeJS 實作出一個 Web App. 非常值得一學。
由於這些課程都是多年前所學習的，在日新月異的前端領域，這些資訊就請斟酌參考，但不變的原則還是先選擇一款前端框架 (React 或是 Vue)，然後專注學習，不要一開始就學習太多，這樣只會讓你更加困惑。
Youtube
Brad Traversy 非常佛心，免費公開了不少很有品質的課程，非常適合初學的人跟他一起動手做。
這位講者總是能夠用淺顯易動的方式解釋 React 整體的運作，非常值得一推。
如果在 Leetcode 解題時遇到瓶頸，看了別人的答案還想不為什麼時，NeetCode 總是能夠用循序漸進的方式講解題目，常常聽他講完後會有豁然開朗的感覺。
書籍 & 網站
老手新手皆宜，React 的官網，全部的程式範例都是用 React Hook 去實作，看完基本上能掌握 React Hook API 大致的運作。
NextJS 是基於 React 之上所建立的元框架 (Meta Framework)，它提供了更多的功能，像是 SSG, SSR, API Routes 等等，其也是目前業界常用的框架，如果想要學習 NextJS，這個網站是最好的起點。內部有一系列的教學文章，從基本到進階都有。
優質學習平台裡面有不少很有深度的技術文章，筆者三不五時也會從此網站找東西學習。
這個就不用多做介紹了，基本上可以把它當成是前端的 Wiki，有什麼語法或是 JS 觀念的問題，看它就對了！
整本書深入淺出，比起 YDKJS 我更喜歡這本書的解釋，作者用非常淺顯易動的詞彙講解 JS 的觀念，如果有不懂的觀念從這裡找準沒錯！
整本書有三章
第一章: 介紹基本常用的 Design Pattern
第二章: 介紹 Rendering Pattern
此章我認為最精彩的部分，同時也是面試最常被問到的，尤其現在 NextJS 當道，那為何要用 NextJS，而又怎麼從 JQuery，Backbone 時代到 CSR 在到現在的 SSG/SSR 中間的利與弊都在這裡可以看到。
最後一章: 介紹效能優化
Functional Light JS & Mostly Adequate Guide
如果對 Functional Programming 有興趣，看上面兩本書絕對獲益良多，前者提到了所有 FP 基本技巧，也容易在工作中使用，後者則是進入到 Monad 世界，深入探索 FP 的奧妙。
部落客
Dan Abramov 很常在自己的部落格發布讓人為之讚嘆的 React 文章，超讚！
Kent C.Dodds 算是前端社群最活躍的人了，時常可以看到他在社群看到他的教學，而他部落格的文章都能夠用淺顯易動的方式講解 React 的概念。
如果想要知道 Redux 歷史演變，優缺點或是其他 Redux 相關的主題， Mark 的部落格絕對可以解答你的困惑。
這是一位日本的工程師所建立的部落格，有分享 React 一系列的內部運作原理，也有推出一款免費的視覺化工具，讓你可以更直觀的了解 React 的運作。
電子報
ExplainThis 是一個非常強的團隊，除了有電子報外，也有經營部落格，裡面有很多關於前後端的技術文章，也有不少求職與職涯成長相關的文章。
毛遂自薦，這是筆者經營的電子報，裡面會分享一些前端技術文章，也會分享一些筆者的學習心得，如果對前端技術有興趣的話，歡迎訂閱！
訂閱平台
| 平台 | 訂閱費 | 質量 | 廣度 | 評價 |
|---|---|---|---|---|
| Frontend Master | 39 鎂 / 月 | Frontend Master 的質量不用多說，整體是非常不錯的，很常會有開源的核心貢獻者開課，課程長度中長且扎實。 | 前端相關的課程居多。 | 自己訂閱一年多，整體來說 Frontend Master 上面有許多不錯的課，像是 YDKJS 的作者 親自教授 JS 概念又或是 Brian Lonsdorf 所開設的 Functional Programming 都是值得五星吹捧的。但訂閱費偏貴以及課程更新頻率稍微漫長，比較適合中老手短期想要精進某項技術，並且不太適合長期訂閱。 |
| Egghead | 12.5 鎂 / 月 | 質量參差不齊，有些課令人讚嘆，有些則是看不到一節就想要關掉，CP 值中等，內容短很適合平日下班進修。 | 前端相關的課程居多。 | 自己訂閱一年多，但完整看完的課程卻少之又少，多數都是完不到一節就關掉了。 |
資訊工程相關
Mindset
以下是自己覺得必學的 CS 基礎課程，儘管這些課程不像是仿間或上面提到的 bootcamp 會讓你快速有成品，但這就是最基礎的 CS 學科，基本上所有應用就是建築在這些基礎上的變化，知道這些概念會可以使你加快理解新的應用，雖然短期可能沒辦法看到實質幫助，但長期下來花時間學習絕對有益無害。自己也還沒有全部學完，也會在未來加緊腳步努力補強！
因為而個人偏愛教授在課堂所錄製的影片，所以主要都是從教授的個人網頁去找，而非 coursera 或 edX。
尋找課程的方式
想當初在大學時，什麼都沒有就是時間最多，所以很常在空閒時在網路上挖寶，也讓自己有了找 OCW 的 SOP
- 閒暇時間搜尋各 CS 名校教授的網頁
- 看是否有公開的課程材料(Video/Lab/HW)
- 透過 Rate My Professors 看該教授評價
- 試聽一堂，覺得是自己喜歡的就會收錄到待學清單。
Note
如果不想這麼麻煩，MIT 跟 UCSD 也有提供該校 CS 的完整課程
MIT 是 OCW 的先驅，裡面的課程是最齊全的並且內容也很豐富，但自己不太習慣 MIT 的教學方式，可能是自己資質愚昧，與教授講課的頻率真的對不太上，而課程作業也是偏論述題居多。
UCSD 也是提供了很完整的 CS 課程，此網站雖然只有提供課程側錄，但課程網站基本上都可以用
${課程季度} UCSD ${課程代碼} Google Sites, (e.g. winter 2022 UCSD CSE 110 Google Sites) 在 Google 搜尋到。
如果想要上一系列同一大學所開的課程，其實這兩個就已經是很棒的選擇了！
基礎
離散數學 & 機率
其實離散數學跟機率在網路上的資源都不太好找，如果找到評價也都不是太好，但目前有找到兩堂是還不錯的。
離散數學 - Clemson - Math4190
這位老師在自己的網站上釋出了許多數學相關的課程，並且該課在 ratemyprofessors.com 拿到很不錯的分數，推薦給大家！
機率 - Stanford - CS109 / UCB - Prob140
這堂課是 Stanford Chris Piech 教授開的課程，教學非常生動，整體下來是一個非常不錯的課程，建議可以搭配 UC Berkeley Prob 140 教科書一起服用，理論實作一網打盡。讚拉！
程式基礎
CS61 系列 - UCB - CS61A(John DeNero) / UCB - CS61B(Josh Hug)
沒錯，這就是我在之前提到的神之課程，這兩門課程都是 UC Berkeley 開的課程，前者是教程式的基本概念，後者則是教資料結構跟一點軟體工程。兩門課程的教授都很會教也非常有啟發性，是讓我不知不覺愛上程式的兩門課程。也強烈建議時間允許的話，將課程提供的教材都做過一遍，超推！
其他熱門 - Harvard - CS50 / Stanford - CS106A / Stanford - CS106B
雖然 CS61 系列已經講得夠好了，但說不定有人覺得並不對味，所以列出了這三堂聲量不輸 CS61 的課程，可以嘗試看看！
演算法
理論型演算法 - UCB - CS170 / Stanford - Tim Roughgarden / Harvard - Jelani Nelson
學完 CS61B 之後，還念念不忘的話並且想要在對演算法有更深入的了解可以繼續上這幾門課
進階
以下推薦的都是我完全沒有看過，但是未來計畫看的課程。
資料庫
計組/計結
據說這是 CMU 的神課之一，不論是用書 CSAPP 以及其 LAB 都是廣受好評。
這門課也是評價很好的課程，只是教授口音稍微重一點，給大家參考看看。
Operating Systems: Three Easy Pieces 的作者，聽說這本書是神書，而且教授的評價也非常好，我想一定是非常不錯的一門課。
其他
網路概論 - UMass - CS453
目前上完前兩章，教授非常讚，也教得很仔細，而參考書就是教授本人自己寫的 Computer Networking: A Top-Down Approach。
網路安全 - Stanford - CS253
對於前端工程師必學的一門課，裡面涵蓋著經典的前後端常見的駭客攻擊手法，是我 2021 年最愛的一門課。
Programming Language - U of Utah - CS3520
這門課教授也是評價非常高的教授，筆者對於 Functional Programming 也很有興趣，所以可能是 2022 最想完成的課程之一。