文章

2024 前端工程師學習指南

文章發表於

前言

當初在學程式時總是可以在社群找到很多無私分享,這些分享有如引路的明燈般,讓我在茫然時,依然有勇氣繼續往前。希望這篇文章能像明燈般為在相同道路上的人照亮前方的道路。

這篇文章會分享自己從剛開始學程式到現在的知識獲取來源,會分成兩部分,第一部分就是前端相關的學習資源,第二部分則是資訊工程的基礎知識。接下來所分享的學習平台都可以找到品質非常好的課程,並且多數都是免費的,所以在這裡分享給大家!

另外如果是剛開始進入前端領域,也不知道該從哪裡開始下手的讀者們,建議可以先看這個 roadmap,知道大概的方向後,再透過本篇提到的資源進行學習。

前置工具

如果在財務上允許的話,強烈建議訂閱一款 AI 服務,像是 Claude 或是 OpenAI,有 AI 幫助下讓你可以減少除錯而導致心灰意冷的時間,更能夠提升你學習的效率。

至於要不要訂閱 Github Coplit,筆者認為等你到達一定的基礎後,再使用該服務,因為 Github Coplit 的自動填充功能是一把雙面刃,儘管能夠讓你快速完成工作,但也可能會讓你沒有思考的時間,這將會對新手造成一定的傷害,尤其在面試時,面試官很容易就能看出你是不是真的懂。

如果自己覺得英文閱讀能力且需要每篇都丟給 AI 去翻譯的話,建議可以訂閱像是 Immersive Translate 這種工具,它可以幫助你在閱讀英文文章時,一鍵翻譯成中文,讓你可以更快速的理解文章內容。

前端相關

Udemy

如果是剛學的程式的人,找幾門 Udemy 的課程並且 認真動手做完課程內所有範例 是非常基本的,特別是在 2024 軟體求職市場相較於前幾年有冷卻的情況下,可能學完這些都還不足以得到面試機會。而以下是筆者當初 2018 上完眾多課程後,分享出自己覺得學到最多的幾堂課

  • The Web Developer Bootcamp

    這門課程基本上就是一個網頁開發的通識課,從最基本的 JavaScript, CSS 到 NodeJS 與部署都會在這門課學習到,非常推薦新手可以從此入門。

  • React & Redux

    想要學 React 與 Redux 這門課是非常好的起始點,此講師講得淺顯易懂,並且會帶很多小專案,讓初學者可以由深入淺的學習。

  • Advanced CSS

    要學 CSS 看這門課就夠了,其也是由深入淺的方式,課程會有三個專案,如果有認真學習,上完課後你的 CSS 實力會有一定的水準。

  • Advanced JavaScript Concept

    想要更深入了解 JS 概念的人不仿可以嘗試這門課!

  • MERN

    這門課有點類似第一門課的進階版,使用 MongoDB, Express, React 與 NodeJS 實作出一個 Web App. 非常值得一學。

由於這些課程都是多年前所學習的,在日新月異的前端領域,這些資訊就請斟酌參考,但不變的原則還是先選擇一款前端框架 (React 或是 Vue),然後專注學習,不要一開始就學習太多,這樣只會讓你更加困惑。

Youtube

  • Traversy Media

    Brad Traversy 非常佛心,免費公開了不少很有品質的課程,非常適合初學的人跟他一起動手做。

  • Philip Fabianek

    這位講者總是能夠用淺顯易動的方式解釋 React 整體的運作,非常值得一推。

  • NeetCode

    如果在 Leetcode 解題時遇到瓶頸,看了別人的答案還想不為什麼時,NeetCode 總是能夠用循序漸進的方式講解題目,常常聽他講完後會有豁然開朗的感覺。

書籍 & 網站

  • React Official Website

    老手新手皆宜,React 的官網,全部的程式範例都是用 React Hook 去實作,看完基本上能掌握 React Hook API 大致的運作。

  • Next.js

    NextJS 是基於 React 之上所建立的元框架 (Meta Framework),它提供了更多的功能,像是 SSG, SSR, API Routes 等等,其也是目前業界常用的框架,如果想要學習 NextJS,這個網站是最好的起點。內部有一系列的教學文章,從基本到進階都有。

  • Web Dev

    優質學習平台裡面有不少很有深度的技術文章,筆者三不五時也會從此網站找東西學習。

  • MDN

    這個就不用多做介紹了,基本上可以把它當成是前端的 Wiki,有什麼語法或是 JS 觀念的問題,看它就對了!

  • JavaScript Info

    整本書深入淺出,比起 YDKJS 我更喜歡這本書的解釋,作者用非常淺顯易動的詞彙講解 JS 的觀念,如果有不懂的觀念從這裡找準沒錯!

  • Design Pattern

    整本書有三章

    • 第一章: 介紹基本常用的 Design Pattern

    • 第二章: 介紹 Rendering Pattern

      此章我認為最精彩的部分,同時也是面試最常被問到的,尤其現在 NextJS 當道,那為何要用 NextJS,而又怎麼從 JQuery,Backbone 時代到 CSR 在到現在的 SSG/SSR 中間的利與弊都在這裡可以看到。

    • 最後一章: 介紹效能優化

  • Functional Light JS & Mostly Adequate Guide

    如果對 Functional Programming 有興趣,看上面兩本書絕對獲益良多,前者提到了所有 FP 基本技巧,也容易在工作中使用,後者則是進入到 Monad 世界,深入探索 FP 的奧妙。

部落客

  • Dan Abramov

    Dan Abramov 很常在自己的部落格發布讓人為之讚嘆的 React 文章,超讚!

  • Kent C.Dodds

    Kent C.Dodds 算是前端社群最活躍的人了,時常可以看到他在社群看到他的教學,而他部落格的文章都能夠用淺顯易動的方式講解 React 的概念。

  • Mark Erikson

    如果想要知道 Redux 歷史演變,優缺點或是其他 Redux 相關的主題, Mark 的部落格絕對可以解答你的困惑。

  • Jser

    這是一位日本的工程師所建立的部落格,有分享 React 一系列的內部運作原理,也有推出一款免費的視覺化工具,讓你可以更直觀的了解 React 的運作。

電子報

  • ExplainThis 全端開發雙週報

    ExplainThis 是一個非常強的團隊,除了有電子報外,也有經營部落格,裡面有很多關於前後端的技術文章,也有不少求職與職涯成長相關的文章。

  • Jing Tech 前端技術週報

    毛遂自薦,這是筆者經營的電子報,裡面會分享一些前端技術文章,也會分享一些筆者的學習心得,如果對前端技術有興趣的話,歡迎訂閱!

訂閱平台

平台訂閱費質量廣度評價
Frontend Master39 鎂 / 月Frontend Master 的質量不用多說,整體是非常不錯的,很常會有開源的核心貢獻者開課,課程長度中長且扎實。前端相關的課程居多。自己訂閱一年多,整體來說 Frontend Master 上面有許多不錯的課,像是 YDKJS 的作者 親自教授 JS 概念又或是 Brian Lonsdorf 所開設的 Functional Programming 都是值得五星吹捧的。但訂閱費偏貴以及課程更新頻率稍微漫長,比較適合中老手短期想要精進某項技術,並且不太適合長期訂閱。
Egghead12.5 鎂 / 月質量參差不齊,有些課令人讚嘆,有些則是看不到一節就想要關掉,CP 值中等,內容短很適合平日下班進修。前端相關的課程居多。自己訂閱一年多,但完整看完的課程卻少之又少,多數都是完不到一節就關掉了。

資訊工程相關

Mindset

以下是自己覺得必學的 CS 基礎課程,儘管這些課程不像是仿間或上面提到的 bootcamp 會讓你快速有成品,但這就是最基礎的 CS 學科,基本上所有應用就是建築在這些基礎上的變化,知道這些概念會可以使你加快理解新的應用,雖然短期可能沒辦法看到實質幫助,但長期下來花時間學習絕對有益無害。自己也還沒有全部學完,也會在未來加緊腳步努力補強!

因為而個人偏愛教授在課堂所錄製的影片,所以主要都是從教授的個人網頁去找,而非 coursera 或 edX。

尋找課程的方式

想當初在大學時,什麼都沒有就是時間最多,所以很常在空閒時在網路上挖寶,也讓自己有了找 OCW 的 SOP

  1. 閒暇時間搜尋各 CS 名校教授的網頁
  2. 看是否有公開的課程材料(Video/Lab/HW)
  3. 透過 Rate My Professors 看該教授評價
  4. 試聽一堂,覺得是自己喜歡的就會收錄到待學清單。

Note

如果不想這麼麻煩,MITUCSD 也有提供該校 CS 的完整課程

  • MIT

    MIT 是 OCW 的先驅,裡面的課程是最齊全的並且內容也很豐富,但自己不太習慣 MIT 的教學方式,可能是自己資質愚昧,與教授講課的頻率真的對不太上,而課程作業也是偏論述題居多。

  • UCSD

    UCSD 也是提供了很完整的 CS 課程,此網站雖然只有提供課程側錄,但課程網站基本上都可以用 ${課程季度} UCSD ${課程代碼} Google Sites, (e.g. winter 2022 UCSD CSE 110 Google Sites) 在 Google 搜尋到。

如果想要上一系列同一大學所開的課程,其實這兩個就已經是很棒的選擇了!

基礎

離散數學 & 機率

其實離散數學跟機率在網路上的資源都不太好找,如果找到評價也都不是太好,但目前有找到兩堂是還不錯的。

程式基礎

  • CS61 系列 - UCB - CS61A(John DeNero) / UCB - CS61B(Josh Hug)

    沒錯,這就是我在之前提到的神之課程,這兩門課程都是 UC Berkeley 開的課程,前者是教程式的基本概念,後者則是教資料結構跟一點軟體工程。兩門課程的教授都很會教也非常有啟發性,是讓我不知不覺愛上程式的兩門課程。也強烈建議時間允許的話,將課程提供的教材都做過一遍,超推!

  • 其他熱門 - Harvard - CS50 / Stanford - CS106A / Stanford - CS106B

    雖然 CS61 系列已經講得夠好了,但說不定有人覺得並不對味,所以列出了這三堂聲量不輸 CS61 的課程,可以嘗試看看!

演算法

進階

以下推薦的都是我完全沒有看過,但是未來計畫看的課程。

資料庫

計組/計結

  • CMU - CS15213

    據說這是 CMU 的神課之一,不論是用書 CSAPP 以及其 LAB 都是廣受好評。

  • U of Wisconsin - CS354

    這門課也是評價很好的課程,只是教授口音稍微重一點,給大家參考看看。

  • U of Wisconsin - CS537

    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 最想完成的課程之一。

如果您喜歡這篇文章,請點擊下方按鈕分享給更多人,這將是對筆者創作的最大支持和鼓勵。