《用 JavaScript 打造全端產品的入門學習筆記》系列指南
邁向全端開發者／全端工程師的學習手稿
Published in
4 min readSep 14, 2020
記錄在 Alpha Camp 學習「JavaScript 全端開發 — 學期 2–3 後端開發實務」的筆記，期待為非本科初心者指出學習誤區，提供明確方向及有效策略。從 PURPOSE 目的與起源、INPUT 投入和預備、OUTPUT 目標及成果、PROCESS 前提與策略，切入導讀。文章將於我在 第 12 屆 iT 邦幫忙鐵人團體賽 的 專欄 中發表。
PURPOSE 目的與起源
- 最有效的學習就是「教導他人」：根據學習金字塔 The Learning Pyramid，當能夠在學習中實作，實作後傳授，能夠協助技能紮實深根。
- 一群人能走得又遠又久：非常感謝 Alpha Camp 社群的揪團，團員中不乏身經百戰的前輩，讓從未挑戰過 iT 邦幫忙鐵人賽 的我，能夠按部就班上手。
- 施比受更有福是 Open Source 的核心：我相信奉獻和給予並不吃虧，反而讓生活更豐盛。這也是知識能不斷傳遞、科技持續演進的原因，我們因此能站在巨人肩膀上看世界。
INPUT 投入和預備
這期課程共四週，預計每週需投入至少 20 小時，主要分配在理解教材內容（佔 20%）、反覆刻意練習（佔 50%）、提問及查詢資料（佔 30%）。
高學習品質的關鍵在於：
- 壓力與休息的調配，平衡作息以保持高質量產出及創造力
- 有效的刻意練習，聚焦每次的進步，以接近目標為前提進行優化
OUTPUT 目標及成果
- 能打造兼具前端體驗與後端資料庫的網路應用程式
- 熟練網路開發專業工具，如全端框架、資料庫、指令列與版本控制系統
- 初步建立「產品思維」，從使用者體驗與產品功能的角度規劃程式開發流程
- 掌握軟體開發全貌，並展望自身職涯
- 累積在快速變動的科技圈中不可或缺的強大自學能力
PROCESS 前提與策略
先修基礎與工具
- 熟悉 JavaScript 核心應用：運用函式、物件及陣列組成一支程式
- 具備 CSS 必備技術：Bootstrap & RWD｜網頁切版
- 能善用 DevTools 、
console.log()等工具，檢查程式碼細節並排除錯誤 - 熟悉 Visual Studio Code 等本地開發環境
學習主題與策略
將循序漸進以 Node.js 架設伺服器、Git & GitHub 管理程式碼、Express.js 打造 Web App、NoSQL 的 MongoDB 建立資料庫、聚焦 CRUD 資料處理、在 Heroku 雲端佈署。
按部就班打造全端產品的過程中，大量實作、刻意練習、精於搜尋，以及撰寫技術文章是真實累積能力的重點策略。
ARTICLES 文章列表
觀念型筆記關注以下三大層次，以建構基礎知識、創造反思空間：
- WHY：為什麼這些觀點重要？存在的意義是什麼？
- HOW：執行前中後有哪些重點要注意？有哪些資源可以參考？
- WHAT：有哪些刻意練習及實際應用的小技巧？
實作型筆記聚焦以下四大重點，提供實作後可反覆迭代的洞察及技巧：
- OBJECTIVE：實作時碰到哪些問題、如何思考及解決、結果如何
- REFLECTIVE：為什麼這個問題值得被記錄？為何會遇到這個狀況？
- INTERPRETIVE：這次處理的過程有哪些做得好或值得改進的地方？
- DECISIONAL：如何優化問題處理的程序？
攻略心法
全端開發者必懂觀念
全端產品工具箱
- VS Code & Terminal 初步上手
- Git 程式碼版本控制 初步上手
- GitHub 程式碼遠端管理 初步上手
- Node.js & nvm 初步上手
- 資料庫學習的入門指南
- Heroku 雲端佈署初步上手
全端實作體驗
經典全端實務
- 用 Mongoose 迅速架設資料庫伺服器
- 資料操作 CRUD 功能〔思維流程篇〕
- 資料操作 CRUD 功能：實作新增、讀取
- 資料操作 CRUD 功能：實作修改、刪除
- 強化功能：排序 sort、篩選 filter
- 重構程式碼
全端刻意練習
- 產品工匠日常：打造 web app 的宏觀程序
- 產品工匠日常：打磨 web app 的實作細節
- 用 MongoDB 及 Mongoose Model.Populate() 實作關連式資料庫
- 手刻登入功能：帳密檢查、保存登入狀態
