Alpha Camp 學期3 - 期末回顧

這學期最有代表性的題目大概就是『老爸私房錢』系列題了，幾乎是繞著它在學習、熟練這學期的各種技術，也因此，可以說在它身上發現最多問題，也從跟它的相處學到最多教案外的額外資訊。

關卡1：單一頁面多Modal視窗

從A17開始，因為我想要的輸入和編輯頁面是可以用modal呈現的，不想只照著教案render不同的頁面，所以就開始興致高昂地用bootstrap貼modal程式碼。

結果測試的時候發現居然只有create的modal，edit的modal怎麼按都是只有一層overlay的感覺，沒有欄位可填。

因此我嘗試先註解掉沒問題的create modal程式碼，發現edit的modal就正常的出現了，感覺問題應該是出在同一份文件有多段modal程式碼，於是開始google，關鍵字大概就是中英文的『multiple modal』、『多modal』。

果然就有很多不同解法，有人是設定不同的id，但我想了一下，如果今天專案不再那麼單純，而我都想用modal怎麼辦？這樣不就要設一堆id嗎？於是就看了其他解法，果然馬上就看到了一個相對簡單的，在各個modal外面再包一個 .update-modal，不用管id是哪個元件對哪個元件，就解決了！兩個modal以上也可行～

關卡２：月份選擇

接著做 A18挑戰題，要做出月份和類別的結合篩選，因為不想雞肋地讓時間篩選只限定在特定時間區段內，例如只有2019年，所以首先想找有沒有方式可以輸入時間範圍，google時不外乎把『用到的tech stack』和『date range』這個關鍵詞做結合去搜尋，以免找到的解決方案太過發散。

結果就看到了各種datetime picker套件，選了一些下載量比較大的套件官方文件來瀏覽一下，但考量：

1.     曾在聽畢業學長姐口試時，聽到Jack老師提醒，不要養成一味地追求套件的習慣，維護性要考量進去。

2.   看了AC職涯社群的某篇文章裡面提到，的確不要重複造輪子，但不代表我就可以沒有造輪子的能力，現在的我是在練習，就來造造看輪子嗎？

3.   這學期已經學了一堆套件的語法，再學新的我要頂不住了...

4.   看完文件當下實在想不到要怎麼串接後續的月份選擇

所以放棄學用新套件，秉持著"一定有解，只是還沒找到"的信念，換個關鍵字找，不找date range了，直接找month！結果就看到MDN上寫著input type="month"....

而在度過了這個傳說中的魔王作業後，以為從此跟他說再見了，沒想到這週會在期末考遇見它...但既然重逢了，我不想只是完成從mongoose換成sequelize語法的工作，至少要多做一個功能出來，所以給自己兩個目標：

1.     先把原本mongoDB的版本，完全轉換成MySQL版本。
2.   限制支出日期不能是未來日期。

關卡3：日期格式

首先就是在日期格式處理上遇到問題，一開始把日期定義為Date型別，但在建Date實例時，就是拿不到想要的格式，查了一下Sequelize的Data type，發現有DATEONLY，格式就是我想要的，反正也用不到後面的小時、分鐘和秒，就來加一個migration吧！但教案內只有教addColumn和removeColumn，變更欄位不知道要用什麼方法？

以之前查資料的經驗，這種介紹性的資訊，通常會把操作主體(ex. column)的功能彙整在一起介紹，所以就直接用教案內的兩個方法為關鍵字下去搜尋，果然馬上就找到語法說明了。

接著在做filter時，又遇到query語法和mongoose不同，但因為官方文件寫得挺詳細的，約莫摸索個20分鐘，就搞定了！(其實沒有…)

就在測試極端數據(潤、平年的2月、大小月的第一天和最後一天)時，又發現怎麼明明篩選條件設為11月，怎麼12/1的也跑出來？！但我試了一下12/2就正常，那應該不是邏輯錯，應該還是日期區間的問題。

於是進行一連串的測試和console.log，果然會有日期類似溢位的現象，而日期又是個物件，篩選條件是個字串，應該是要想辦法把複雜的物件變成簡單的字串來比對就好。

變成字串最直覺的想法就是toString()，結果console.log出來的結果居然還出現英文月份…只好再查日期轉換成字串的方法有哪些，看了一下格式發現toISOString()蠻符合我裁減字串的需求。

接著就是思考怎麼解決日期溢位狀況造成篩選不準的問題了。因為是藉由query string傳進來的月份來建日期實例，而月份天數的差異也就4種，就直接採窮舉法建立實例了，接著再去比較日期實例轉換成字串並裁切成YYYY-MM格式後，當月一號切出來的結果和當月最後一天窮舉後切出來的結果是否一樣。

例如：先比對假設最後一天是29號，如果切出來第一天的結果和最後一天的結果不一樣，代表當月份實際天數其實只有28天，所以造成1天的溢位，就變成下個月的1號了，因此我可以把篩選條件就設成between 1號 and 28號了，依此類推，就解決這個問題了。

關卡4：標籤setAttribute

最後就剩限制不得為未來日期了，想到的方法就是在新增時不給使用者選，而input標籤很容易可以做到設定日期的最大值，超過最大值的日期便無法選取，只是需要知道取得頁面當下是什麼日期。

因此將想要控制的元件都先加上同樣的class名，並另外寫一支前台的js，先用之前沒用過的querySelectorAll方法選取所有同class名的元件，再產生日期實例，日期經過字串組合後，設定為元件的max屬性。結果馬上發現querySelectorAll只是選取了元件形成集合，後續的動作要用迴圈才能把每個元件的屬性都設定好。

心得

綜合這一系列的卡關/解決迴圈，如果要我明確描述每一個解決方案背後的原理，目前可能還無法做到，但還是讓我覺得獲益良多，因為網路上大家的專案架構、程式碼撰寫方式、撰寫風格都不同，光是要理解解決方案怎麼實行其實就已經是種學習了。

回顧這種學習方式，我覺得有點像在學整個學期三教案的感覺，雖然很多都只知其然，但看久了還是會在心中默默歸納出一些描述方式，比較能具體幫助自己理解怎麼施作的方式，也許不是真正原理上的正確答案，也不見得是最佳解，但絕對有助於熟練新技能和拓展認知邊界。

而這種學習方式其實包含了試誤和演繹，我自己的感覺是兩者呈負相關，當天腦袋越清楚，演繹得越有條理，試誤的時程就越縮短 ; 而當發現試誤時程拉得太長了，就該提醒自己可能是理解得不夠多、不夠深，就應該先暫停試誤，再找找資料來釐清一下問題所在。

除了呼應之前Wells助教說的，有時候卡住的時候就去睡覺、追劇，保持自己的良好身心狀態外，隨時找機會學習類似async章節這種偏原理面的內容，真的是對提升演繹能力有很大的幫助！

後記

交完期末考題後，MiaYang老師有回饋日期格式的補充資料，看完只覺得...我為什麼沒有查到這些東西呢？！就不用寫得那麼累了...XD