哈囉，我是切版直播班的卡斯伯老師

這是「專題班」專屬的週報，每週我會花點時間跟大家分享：

• 最近的一些心情
• 專題班接下來要做什麼

在過去框架直播班時…

在我們上課的時候，會用很多方式來引導同學理解，試圖去認識各種不同的進階觀念，上課過程中也會盡可能回覆同學們的問題，不過在過去框架直播班時（像是 Vue），同學們其實很常回饋到「老師，你上課的時候我都聽得懂，不過換我做的時候就不知道怎麼下手了😂」。

為什麼會這樣呢？

1. 因為我們上課其實都演練很多次了
2. 因為我們的基礎很穩，所以整體會顯得流暢
3. 因為我們會很清楚每個技法之間的關聯性，不容易出現自縛手腳的狀況

而同學在做作業的過程中，就會遇到不知道怎麼把這些技法混在一起，或是該如何開始的狀況。所以這篇文所介紹的心法，就是在技術力有限的情況下，一一擊破許多還不夠熟悉的問題。

這邊文，其實是要到更進階的時候再分享給同學，不過剛好有同學問到類似觀念，就直接加入週報分享給同學喔。

簡化問題 與 流程拆解

這兩個概念是一起說的，拆解流程是為了簡化問題，簡化問題需要透過拆解，這個手法可以用在絕大部分的開發情境。

案例：框架元件的撰寫基本原則 → 不要去拆元件

框架本身都具備 “元件的概念”，而很多新手開發者都會一直思考：

• 元件要拆多細
• 怎樣的狀況需要去拆元件
• 用元件起手該怎麼開發？

如果說一直陷入上述狀況，甚至想要像高手一樣直接以元件做為起手，那就是將兩個以上的技法進行混合（框架語法、元件拆分），在基礎不夠穩固的情況下，就會落入兩頭空（寫完不會動、元件拆的很爛）。

所以我都會倡導一件事：「不要拆元件」，這聽起來很反直覺，畢竟我們看很多高手元件都拆的很漂亮，為何要說不要拆元件呢？

不要拆元件的優點在於，我們會專注在如何讓程式碼正常運作，將學習過程複雜度從兩個知識點降為一個知識點，藉此來簡化問題。而拆解元件則是會在程式碼完成，確保他可以運作以後再進行拆解，這個時候一樣是維持單點知識，甚至有許多人反應，這個手法會比「一開始就拆元件都還要快上許多」。

拆解技巧

所以，在開發中我們如何用拆解來簡化問題呢？以上面的案例來說，就可以拆解步驟來一一擊破：

1. 撰寫完整可運作程式碼
2. 拆解元件

這樣一次就只面對一個問題囉～

誒，不是，這是切版課程。

我再舉一個第三週、第四週的作業案例，而這也是最多人有問題的地方，就以這兩週的作業來說，就具備了 Vite 開發環境、RWD、Scss 等許多的知識點，所以一定要將所有的不熟知識點，一一的列出、並且一一的擊破。

在概念上可以拆解成以下步驟：

• [ ] 建構 Vite 環境 → 專注在環境建立
  • [ ] 環境建立
  • [ ] 頁面檔案建立
  • [ ] CSS 檔案關聯
  • [ ] 部署 GitHub Pages 測試
• [ ] 撰寫桌面版首頁 → 專注在 CSS 桌面版切版
  • [ ] 撰寫 navbar
  • [ ] 撰寫 header
  • [ ] 撰寫不同區塊 …（不熟的區塊可以特別列出）
• [ ] 撰寫桌面版產品列表頁面
  • [ ] 撰寫 xx 區塊…
• [ ] 調整成 RWD 頁面 → 專注在套用 RWD
  • [ ] 首頁 RWD 開發
  • [ ] 選單 RWD 開發（覺得要花超過 20 分鐘的可以特別列出）
  • [ ] 產品列表頁面 RWD 開發
• [ ] 拆分 SCSS → 專注在 scss 檔案拆分、SCSS 運用
  • [ ] 將 SCSS 檔案進行拆分（可以依據頁面區塊進行拆分）
  • [ ] 嘗試套用 SCSS 變數
  • [ ] 嘗試學習使用巢狀功能

以上就是一份開始開發前的概要，每一個被拆解出來的列點都是相對單純，僅專注在特定的範疇上。透過這種拆法有幾個好處：

1. 一個一個點完的時候，會很有成就感 🤤
2. 很清楚當下及接下來的目標
3. 如果遇到問題，想要詢問助教或老師，可以很有脈絡的進行提問（我的問題就是不知道問題在哪 🫣

要拆到什麼程度呢？

最後，同學們學到拆解的方式後，也會接著問要拆到什麼程度呢？這就沒有絕對了，不過依據同學目前的階段來說，可以依據以下兩點來進行拆解：

1. 花費超過 20 分鐘 → 優點在於執行時一直勾，心情好舒爽
2. 該區塊無法預估難度 → 有些區塊很小，但因為不熟悉，就會建議拆出來

當然，在一開始條列的項目不一定代表會順順利利的完成，過程中都多少會進行調整（像是有區塊太難，沒有預估到的問題）。

我自己在開發上也會這麼做，除了可以簡化問題以外，很大一部份是會讓我在專案開始前，就開始推估專案的複雜度、需要投入的時間長度等。還有我的工時很常被切的很細，有時只能一次工作一個番茄鐘，而這個拆解出來的表，就很適合讓我回憶上次做到哪、接下來要做什麼。

所以，如果你也有遇到不知如何下手的狀況，試試看「拆解流程」來簡化問題吧！

六角切版特務

專題進度 - 進行切版主線以及做專題

這週的主線是開始做專題的起頭，主要活動行程如下：

1. 練技術 - 第四週主線任務
2. 做專題 - 3. 網站地圖、流程圖、線稿圖 | | 8/7, 8/10 | 每日活動 | 程式助教 |

✨ 重要：大家盡量可以在 8/11 前完成要提交設計的線稿圖頁面

學習進度安排

專題已經開始，本週雖然沒有安排新的進度，還是盡可能提前繳交作業，學習進度可以參考學習進度文件。

另外，專題部分也可開始推進，如果有任何專題上的問題，可以詢問專題教練喔。