AlphaCamp_DevC2 完課心得

從 AC_DevC1 完課後 (連結)，邁入了 DevC2 前端開發實作（Practical Front-End Development Course），難度真的躍升了許多，畢竟相較於之前專注在 Data-Programming 的經驗，很快地就進到全然陌生的領域，所有的知識點，對我而言都是新的。

趁著完課沒多久，想說就用 AC 教案會鼓勵大家定期做的 ORID（焦點討論法）來看看自己走了多遠，接下來又要往哪裡去吧！

ORID 是什麼 ？

ORID 焦點討論法，將整個討論、回顧過程分為四個部分：

• Objective（客觀事實）

• Reflective（感受反應）

• Interpretive（詮釋意義）

• Decisional（作出決定）

如果以回顧學習歷程的話，大概可以轉換成幾個常見的問題：

• 你這次/這週，學了什麼？有沒有達到你預期的目標？

• 經歷這一系列的學習，你的感覺如何？有哪些是偏向正面的？哪些又是偏向負面的？這背後是有什麼可能的原因嗎？

• 這樣的感覺對你來說是什麼？要如何去延續好的部分、改善不好的感覺？

• 後續的學習你打算做什麼？（像是微調自己的學習方式？專注突破哪些挑戰？）

Objective

推進 C2 的過程，也完成了預先安排的出國走走、教召（學的東西一下子忘了大半 XD)，『指標作業』也都順利 Meet Expectations ，並完成助教回饋的訂正或反思。

撇開教案裡面提供回放的工作坊影片，畢竟想專注在每週推進一個『指標作業』，所以就先割捨；整體來說，滿開心可以在一定時程內完課的=)

Reflective 1

關於 DOM

關於收穫，從第一週開始接觸 DOM Manipulation，基本上就是全新的學習了，從前接觸了一點 HTML/CSS，聽過 DOM Tree，但是 DOM 的全名叫做 Document Object Model 也是碰了這堂課才知道的哈哈哈

DOM 不僅是瀏覽器解析完 HTML 文件的結果，DOM 其實也是一個介面（Interface），讓程式語言（像是 Javascript）可以跟瀏覽器解析後的網頁成果進行互動，進而動態改變網頁內容或行為。

HTML 文件（Document）中的每一個網頁元素，就像是變成一個物件（Object）一般，擁有豐富的屬性（Attribute）、方法（Method）可以對其操控，像是用來選取網頁元素的 querySeletor、querySelectorAll。

關於 Template Literal

年輕的時候（！？）愛看 Yahoo 娛樂新聞，有時也會逛一下電影評論，曾經想到工程師該不會要緊盯最近有哪些電影準備上映、上映的時間、地點，然後把握黃金時間，人工把電影封面照和簡介，上架到對應的區域吧？

感覺就很累，沒辦法準時下班，應該有更有效率的做法吧？只不過不知道是什麼 XD

Template Literal 是一個可以依照資料，迭代產生 HTML 程式碼進而動態渲染成網頁內容的作法，隨著資料增減，有效率改變前端顯示的內容，才不用一部電影要上架/下架了，還要每次都人工調整。

不過若要處理更複雜的前端使用情境，可能單純用 Template Literal 會有點不足，或許就需要運用到像是 React, Vue.js 的框架了。

關於事件驅動程式設計

基本上就是在聊掛上事件監聽器（addEventListener）的概念和眉眉角角，包含：

• 事件監聽的類型（click；dblclick；submit；input 等）

• 初期多善用 console.log(this)，以及 console.log(event.target) 去測試目前的監聽機制是否合乎預期

• 事件傳遞機制（Bubbling 由下而上 v.s. Capturing 由上而下）

透過這幾個概念，感覺是能夠稍稍體會，那些點來點去的網頁小遊戲，背後主要就是依賴這些機制；也趁著教案實作，練習一個小小的 計分板（雖然監聽設計和函數寫法還有重構的空間就是了…）

Reflective 2

教案進入到後半之後，也開始接觸第三方 API 和透過 AJAX（Asynchronous JavaScript and XML）來實現非同步請求。主要是用 axios 套件。

關於非同步請求（Asynchronous Request）

一直以來，我都覺得臉書動態可以一直往下滑，彷彿不會窮盡，有點妙～其實是因為使用者向伺服器（Server）進行了請求（Request）後，非同步請求的技術讓網頁可以繼續做別的事，甚至可以將請求返還的東西再融入網頁內容之中，而不用單調地等待返還的東西，而讓使用者等待，降低了使用者體驗。

教案到這，『指標作業』就是透過 Template Literal 動態產生歌單，然後配合『事件驅動程式設計』去綁定監聽器，當點擊歌名時候會驅動請求，透過第三方 API，將歌詞返還並且展示出來。

等於是把教案目前學到的東西都嘗試綜合在一起 (連結)。能夠順利完成也是鬆了一口氣 XD

關於 Local Storage

Local Storage 是 HTML5 提供的一種在使用者瀏覽器中儲存資料的一種技術，並不需要伺服器支援，這些數據在瀏覽器關閉後仍然存在，不會消失。

這也讓 Local Storage 成為在用戶端保存數據的一個簡單有效的方式。簡單的購物車功能大概是可以用 Local Storage 來實作，我覺得很酷！不過有優點就有缺點，它比較不適合儲存機敏的資訊，而且容量有限，也沒辦法跨裝置共享。

關於 MVC 架構

從前有稍微接觸過 Python 的物件導向程式設計，大概知道封裝（Encapsulation）的概念，曾經也看過別人在 Github 上公開的 Repo，通常都會很完整地定義一塊一塊的程式碼，或者說 Object。透過教案，感覺到之前的經驗，跟 MVC 架構是有一定的相似。

MVC 架構，完整叫做 Model, View, Controller，其中：

• Model 主要在處理資料的取得、加工、儲存

• View 主要是處理使用者視覺上看到的一切

• Controller 主要作為 Model 和 View 的橋樑，並且監聽（事件驅動程式設計）使用者的特定行為，進而動態改變 Model 的內容，然後再透過 View 更新網頁呈現。

透過 MVC 架構，也可以讓程式碼分成更容易維護的區塊，各自區塊的目的也不同，除錯或開發新功能的時候，才不用所有的程式碼都要重新看過一遍。

整個教案的最後，也稍微演練了用 MVC 架構，完善一個包含搜尋、收藏、分頁功能的電影清單 (連結)

Reflective 3

天阿不知不覺 Reflective 寫得有點多！

學到許多，只不過挫折感（或者說知道自己還有許多不足的感覺）也沒少過…

寫 JS 我覺得比較有邏輯性，但是關於切版，我覺得目前還是滿卡的，連標配的 flex system 或 Bootstrap 也沒有到很熟悉，想要用上，都得反覆查找文件，所以只要教案實作需要連 HTML/CSS 一起架構，大概就得多花一倍的時間，才能搞定那些『理論上沒有那麼複雜』的 layout。甚至有點想逃避@@

對於 JS Array, Object 常見的操作手法像是 some，find ，map，reduce，includes，也還沒有很能靈活應用這些常見的處理函數。通常還是得搭配 ChatGPT 看一下示範，然後才能照 sample code 依樣畫葫蘆，雖然不用追求都記起來，但終究是有一個熟悉度的差異，自然也會影響到怎麼 prompt。

三元運算子（Ternary Operator），在教案的後期才有聊掉，可以更簡約地完成邏輯判斷，不過也還沒有熟到可以游刃有餘地用出來。

//簡單條件判斷
let isLoggedIn = true;
let greeting = isLoggedIn ? 'Welcome back!' : 'Please log in';
console.log(greeting); // 輸出 'Welcome back!'

//複合條件判斷
let score = 85;
let grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'F';
console.log(grade); // 輸出 'B'

只能說，這終究是一個實作經驗夠不夠的問題。

Interpretive

整體來說，完課是踏實的，也必須稍微放下 XD

想一次就學好所有的知識點總是不太可能，一定會有些部分，需要靠實作經驗來累積的，重點是刻意練習，然後慢慢來比較快。

後來針對前端切版的不熟，我發現若把既有畫面截圖＆現有程式碼，一起丟進去 ChatGPT，然後儘可能問他一個小而精準的（切版）問題，效果好像都還不錯，就繼續邊走邊看，觀察一個更進階學習切版的時機。

Decisional

未來開發環境將以 VSCode 為主，我覺得一個視窗寫程式，一個視窗做教案筆記，一個視窗問 ChatGPT，有點不是太有效率，加上久仰 GitHub Copilot 大名～決定邁入下一階段的學習，也來摸索如何跟這個副駕一起協作，提升自己的開發效率、品質。

另外，針對教案補充的延伸閱讀（Further Reading），因為之前主要都是專注在推進度，想要每週完成對應的『指標作業』，所以一些延伸閱讀就先跳過，不過這『很公平地』反應在，若面對教案以外的世界，個人的知識之網是否夠廣、夠扎實，進而能夠面對未知的情境？

所以我覺得，就算延伸閱讀沒有辦法馬上讀，還是值得把這些東西備在更容易取得的地方，方便必要時查找。

就先寫到這吧，Keep Going~