沒想到自己又要重新這個輪迴了

我也不確定這個系列會更新到幾時，但我挺想要紀錄我學習前端的讀書計畫，從我下定決心想要下一份找前端工程師的工作，直到找到為止或者找到工作後，若有持續學習也能繼續更新。(記得的話)

還記得自己之前在剛畢業後，第一份工作幸運騙進(喂)後端工程師，開啟了我的後端小菜鳥磨練之路，啊因為當時是一邊工作一邊寫，所以寫的內容跟學的內容非常凌亂，曾有幾次下定決心想要重新整理，但都沒有機會 XD。

由於自己大學的志願跟研究所網站開發的合約都熱衷於前端開發，只是不小心一畢業後就踏進了後端的坑，現在看似有機會可以回頭試試看前端，看看是不是真的這麼熱衷於前端，只不過要從後端跳到前端，就好像我從剛畢業的新鮮人，不小心跌入後端開始，前1-2年都在痛苦的學習深淵裡打滾。

從本來就有的經驗，跳到另一個0經驗，需要很大的勇氣，目前的熱忱戰勝了這些，即便我知道自己又要歷經一次那痛苦的學習深淵，仔細思考後，決定還是勇敢的擁抱他們。想起自己剛出社會那狼狽不堪的模樣，我就在思考已經擁有這麼多後端經驗的自己，能夠在前端的學習跟成長中貢獻些什麼？

背景

首先，我是大學跟碩士資訊本科系畢業，而且作為後端工程師已有四年經驗，兩年前開始利用閒暇時間自學前端然後自己創作幾個前端網站專案練習。

目前主要聚焦學習的前端技術是 HTML, CSS, Javascript, React.js。

學習計畫的內容是我融合過去在後端面試被叮爆的經驗、自己自幹幾個專案遇到的技術 融合 網路上很精細的Roadmap去制定的學習計畫，途中可能會遇到什麼就加加減減。

但這份前端讀書計畫有個盲點區，是我在這之前已經自己創作幾個前端專案練習，所以有很多技術我已經了解，只是不熟悉，我列出的是我自己覺得需要在複習或者學習的部分，而不是從0開始學習的計畫。

下面列出的Roadmap也都有相對應的教學網站，目前都是免費的，請多多利用。

另外，Youtube 有很多英文教學系列影片，可多善用。

Front-end 讀書計畫

• 按照 Roadmap 讀書 (Front-end, JS, React.js)

  • [Front-end] Internet 區塊: 學習筆記連結

    • Internet Basic 知識
    • Inernet Connection: 幾種協議 (Protocols) 跟溝通方式 HTTP Requests, Server-Sent Event, 雙向溝通技術 WebSockets。補充: MQTT, SOAP, GraphQL
    • Internet and API Calls: Ajax, SWR, react-query, Axios, fetch API

  • HTML/CSS (roadmap.sh 好像沒有CSS的Roadmap)

    • [HTML] Cheatsheet (本人的學習筆記連結)
    • [CSS] Learn CSS - web.dev 搭配 TailwindCSS 搭配 MDN
    • [CSS(替代方案)] CSS Cheatsheet + CSS - w3schools
    • [CSS] 搭配 Hackerrank CSS 證照題目交互學習
    • [CSS] 41 CSS 面試題目 (選擇擺在這看或者移到最後皆可)
    • [CSS] 看 創意構想 有2個影片 (滿滿的知識)
    • [Front-end] 簡單了解一些CSS框架 TailwindCSS, Sharon UI, HeadlessUI

  • Javascript

    • [JS] JS -> Js Roadmap
    • [JS] Cheatsheet (三選一)
    • [JS] PJCHENder (三選一)
    • [JS] web.dev (三選一)
    • [JS] Promise 概念 , async/await 概念, callback 概念

  • React.js

    • [React] Framework -> React Roadmap
    • [Front-end] Package Managers (npm, pnpm, npx, nvm)
    • [React] Youtube 課程 Course 1, Course 2
    • [React] Class Component vs Functional Component (and Lifecycle methods and hooks)
    • [React] Redux 套件、React Router、Async Server State TanStack

  • 前端知識

    • [Front-end] Build Tools Babbel, Vite
    • [Front-end] Testing, Debug
    • [Front-end] Web Security
    • [Front-end] Localstorage, Application Cache
    • [Front-end] SSR: React SSR、React SSR 從零開始
    • [Front-end] CSR、SSR、SSG

  • 面試題目

    • 列出一些非關技術，但會被問的General面試題目 （學習筆記連結)
    • [前端] 15 Popular Common Frontend Interview Questions （學習筆記連結)
    • [React.js] 10 common React Js interview questions （學習筆記連結)
    • [CSS] 41 Frontend Interview Questions - CSS
    • [JavaScript] 52 Frontend Interview Questions - JavaScript
    • [React.js] 44 React Frontend Interview Questions
    • 額外面試題：
      • RoadMap JavaScript questions
      • RoadMap React.js questions

  • 延伸 + 額外的概念

    • [CSS] 了解 Canvas, WebGL, SVG, CSS 3階層樣式表 or three.js
    • [Front-end] Framework - Next.js 與 ISR Mode
    • [Front-end] Mobile - React Native
    • [Front-end] Desktop - Electron
    • [Front-end] Typescript
• 刷題網站 (Front-end Mentor, hackerrank (但好像只有證照考試), CSSBattle)
• 多看他人的專案，盡量可以的話聚焦在弄清楚原理、細節跟邏輯。

接下來就照順序一篇一篇更新。