【程式學習日記】六角學院：2023 Vue 作品實戰班

從 Vue 班畢業已經 1 個多月，最近也轉職成功，終於有機會把這段歷程記錄下來，當作一個里程碑。此次參加 Vue 班，心境上最大的不同，大概是知道自己即將在完課後，踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品，我就能提早出發。

▍學習狀況

雖然先前有稍微玩過 Vue，但也早已忘光，需要重頭學起。再加上我還提早開始準備履歷，花了些時間。導致在 Vue 班開課前，我都沒有事先預習，結果每天都緊張的在趕課。

從 pure JavaScript 轉換到 Vue 是個挑戰，雖然不用再綁定 DOM 很快樂，但也多了很多語法規則要記憶。六角的 Vue 教材是有學習手冊檔案，可以跟著影片填入程式碼的方式。我為了盡可能加深記憶，會採取以下步驟學習：

1. 邊看影片，邊看手冊檔案
2. 影片看到一個段落，停下來編寫檔案
3. 如果遇到不會寫就回去重播影片
4. 完整寫完後，到 codepen 重新復刻一次所有程式碼
5. 尋找額外網路學習資源，重新整理程式碼寫成 notion 筆記，剛才寫的 codepen 範例也可以嵌入當實例。

notion 筆記，可嵌入 codepen 範例

雖然這麼做，學完一堂課的時間花費很久，但在未來回顧時，通常能很快讀懂自己寫的範例，直接做取用。也有同學是採用邊上課邊寫筆記的方式，手冊編寫遭遇困難時回去翻筆記，同學的想法是「如果現在看不懂筆記，以後也看不懂。」感覺也是不錯的方法。

▍社群參與

在 JavsScript 班結束後，我的 Side Project 組員 WA 介紹我一個由六角同學們自發組成的 Discord ──「我盯著你」，成員幾乎都是同期進入六角的學生們，所以我在 Vue 班的社群主要以「我盯著你」和「六角 Vue 頻道」為主。

社群真的是我在六角獲得最大的收穫，很開心因為在六角，才能認識這麼多貴人與夥伴。一起研究新知、一起講幹話，互相排解求職壓力、分享學習心得。有的同學是已經在職的工程師，為了學習進入六角，我從他們身上看到未來自己可能的模樣。有的同學入學比較晚，可能從寫功能開始，還不會切版，在我看來就像回顧自己。這是很有趣的體驗，或許有的人過陣子後決定下船放棄，或是堅持並成功轉職，也有純粹因為興趣學習的夥伴，從觀察人生來說也是很棒很棒的經歷。

「我盯著你」社群，我是求職分享會的主辦與分享者

最近很愛的梗圖，真的是當了工程師才體驗社群美好

▍技術文件撰寫

我在 Vue 班還沒畢業前，就已經先求職投遞履歷了。這也算是我正式開始經營技術 blog 的時候吧！我將先前在 JavaScript 直播班撰寫在六角 Discord 上的文章移植到 Vocus，寫了更完整的思路介紹與步驟圖。加上在 Vue 班時期，為了解答同學疑惑特別撰寫的技術文，目前已經累積 6 篇文章了。

最近在想著是不是要學 Hexo，把紀錄移植到 GitHub 上，未來也方便搬家。

技術文件發布於 Vocus

▍專題 Side Project

• Repo：https://github.com/AnnChouCode/WandererLand
• Pages：https://annchoucode.github.io/WandererLand/

這次因為幾乎是零基礎學 Vue，在進度沒有超前的狀態下，不太敢找人組隊做專題。一方面也是經歷切版和 JS 為期 5 個月的協作，真的也是有點累了。所以這次打算依照自己的步調來獨立製作。

當初也是很緊張，因為每天都在趕學習進度，不知道自己能否在 Vue 班結業前完成專題。想不到 Vue 班進行 1 個月就差不多具備可以完成專題的程度了（感謝六角~），前面耐心打好基礎，之後開發真的順利很多。所以此次專題大約是花了 1 個月，從規劃、設計、切版與功能，獨立開發完成的。

Wanderer Land 首頁

專案說明

透過 Vue3 框架 + Pinia 狀態管理建構，個人獨立製作的電商平台作品，靈感源自我過去在藝術創業時使用過眾多電商開店平台，以銷售畫作、介紹藝術家、推廣藝文為目的。期待帶給買家與管理者流暢的使用體驗，前後台都有 RWD 響應，可以行動裝置操作。

選用技術

• 使用 Vue 3 和 create-vue 構建開發環境
• 選用 Bootstrap 5 搭配 Sass 進行網頁切版
• 整合 ESLint Standard 以保持程式碼風格的一致性
• 運用 Pinia.js 作為狀態管理工具，實現跨元件資料的傳遞
• 使用 Axios 串接 RESTful API，並運用 async/await 實現非同步操作
• 使用 Figma 設計 UIUX

技術項目

• 前台收藏、購物、檢索排序商品功能。
• 前台根據儲存於 localStorage 的用戶瀏覽紀錄推薦商品。
• 後台登入驗證、視覺化圖表、管理商品、發布與置頂文章、建立優惠券功能。
• UIUX 設計。

開發心得

• 過去因為經營電商，玩了很多開店平台。本來想藉此次機會，在自己做的後台裡實現一些喜歡的功能，例如客製上架模板，或是做產品規格價錢組合、智慧推薦標籤。沒想到這些讓使用者喜愛又操作流暢的功能，實作起來其實非常不容易，還要另外考慮 edge case 的情況。最後礙於開發時程考量，只能先退而求其次做比較簡易的版本。
• 我很喜歡下圖中元件和資料庫的設計，左圖是同一個元件的不同運用情境，右圖是實際元件拆解樣貌。藉由 slot 插槽和外部引入屬性控制元件形狀和功能按鈕，並搭配 Pinia store 實現跨元件間傳遞資料。

元件架構

• 這次使用的 API 是由六角開發的，比起 JS 班自己開發 API，用起來真的順暢超級多XD 但就是個體驗，不論是自己用 json server 開發，或是使用真正後端工程師造的 API，都是學習。我看這次有些同學的專題是自己的 API 和學院的 API 同時並行使用，真是太有勇氣了，很佩服他們。
• 這是我第一次嘗試獨立開發，其實開發速度並不比協作慢，因為做任何決定都由自己評估和修改就可以了。但協作的好仍然在更大型且複雜專案的時候，有人可以一起討論，多一個腦袋設想不同狀況和解方。
• 我延續先前專案的工作習慣，建立自己的待辦小卡。開發過程中難免有臨時發現的問題，也不一定能馬上處理，就可以先記錄起來。處理過程中的各版本 commit 與遭遇問題也都可以寫在小卡中。

工作待辦小卡

優化測試

我參加其中一場面試中，面試官提醒可以做優化測試，我才嘗試著做優化。跑出來的效能分數不太好，尤其行動裝置很難看 XDD 但效能牽扯的層面真的太廣了，我試著把最大描繪像素的圖檔降低，但效能反而也跟著變低了。也試過把字體載下來從本機引入，但分數也沒有變高。

最後我決定先從比較好處理的部分著手，讓無障礙、最佳做法、SEO 的分數都先進入 90 分以上，再來慢慢想辦法 ><

報告建立時間：2024年4月17日 下午4:22:07

▍發表會心得

雖然這次我沒有報名六角專題分組，但個人製作還是可以一起參加發表會。我不想錯失曝光機會，而且同時也能訓練表達能力就參加了。

參加發表會總是很讓人驚艷，有些組別在視覺表現上特別搶眼，很讓人好奇這些特效是怎麼做的。有些組別的組員內本身就有後端工程師，這感覺是超級棒的合作體驗。也有的是報告口條歷練，風格各有特色，都能讓聽眾清楚了解專案內容。綜合層面上，我要學習的部分還有好多好多，知道自己仍有不足是很讓人開心的。

我的發表會簡報

我在會後收到了來自卡斯伯老師發放的獎勵，這是沒有報名專題，還願意參加發表會的同學才會領到的禮物，可以從星巴克禮券和 Udemy 課程選擇其一。我當時正在因為準備面試而刷題，也不知道未來職場會走向何處，想說 JS 學好肯定沒錯，就選了 Udemy 的演算法課程，結果完全沒有打開學習的一天 XD

▍總結

• 體驗營：適合各個階段的學習者，每年都有不同主題。學習者可以自由選擇要從切版、JS，或是針對當年主題做研究。不到千元，真的很適合用來體驗學習程式的感覺。
• 切版班：入門最容易，但每周主線作業耗費時間最久，精準切版和流暢 RWD 變化很需要經驗。
• JS 班：入門稍有難度，因為前期會不知道自己學零件是為了什麼，但有耐心學好的話，後期寫功能會很有成就感。個人感覺 JS 每周主線作業是三班裡最簡單的。
• Vue 班：課程最緊湊的一班，有很多新的框架語法要理解，應該也是最虐待學生的一班吧。跟 JS 班有完全不同的體驗，有框架除了速度快之外，要幫同學看問題也因為程式有固定格式，讀懂對方程式碼也相對容易許多。一段時間後回顧自己程式碼，也不那麼陌生XDD

從基礎切版、JavaScript、Vue，一路跟著六角直播班學習至今近一年，直至轉職成功。六角老師與助教「不怕你問」的授課方式，一直都讓我非常放心，不論是程式解題，或是職涯選擇煩惱，每每都感受六角對每位學生都是很真摯在回答。做 Side Project 時，也從教練引導中得到許多協作經驗和專案管理上的輔助。直播班學生間的社群關係也十分緊密，我們直到現在也仍然會互相分享新知。這些都是我很開心，也很慶幸當初選擇了六角、開始學習寫程式的原因。（好像又想回顧一次上面那張「猩猩，一起，強大」的梗圖了）

Ann Chou 喜愛電影和威士忌，既是前端工程師，也是藝術愛好者。喜歡書寫學習歷程和技術文件，掌握經驗與隨時提取的感覺很好。