# 專案筆記|2024 六角學院NodeJS 入門班結業

終於把三個月左右的直播班上完，並繳交期末作業了，趁記憶還猶新時把這次直撥班的作業記錄下來。

## 前言動機

從今年開始比較積極為了累積作品開始做side project，但目前線上有的開源API 能做寫入的實在太少，且雖然工作上有與後端工程師配合所以大概有DB與Modal的概念，但還是希望自己能親自寫過一次CRUD，所以報名了今年六角學院Node.js入門班，也趁機拿一個前後端較為完整的side Project <s>（而且終於不用自己規劃設計稿了QQ）</s>

![在工作上常常聽到後端工程師在討論資料夾的關聯，這次終於弄懂了！](https://cdn.hashnode.com/res/hashnode/image/upload/v1718529881452/80611a11-9993-45dc-a2fe-8baa33832026.png align="center")

`在工作上常常聽到後端說的資料表關聯，這次終於弄懂了！XD`

這次直播班主要是**Node Express**與Mongo DB的**Mongoose**為主，並使用Firebase當作圖床，這次我每週約投入15~20小時學習，並以直播出席率100%為目標，還有獨立完成期末作業的前後端。

* * *

## 期末作業介紹

期末作業是完成社群動態牆，可以進行註冊登入、追蹤使用者、按讚使用者、張貼動態、上傳大頭貼等等操作，最終約開21隻API。

### 前後端框架

後端使用上課使用的Node express 與mongoose。前端框架這次選擇Next.js，主要原因有之前工作時摸過，對於使用Next時的`file-system based router` 覺得真是太香，更喜歡快速且彈性的Layout，加上這次自己能掌握後端回傳的內容，希望能將這次專案做SSR的形式。

後端這次選用JWT Toekn，所以前端也使用了NextAuth作為使用者驗證的輔助，雖然搭配Typescript時NextAuth需要設定很久～但最終結果我認為是好的。

切版使用Tailwind，元件框架鑑於之前使用過Headless UI，覺得太過彈性的系統可能適用於更大型的專案，所以選擇與Tailwind 相性很合的Next UI，並使用CVA做自訂的元件樣式管理。

### 開發時遇到的困難

*   ***要調整前端還是後端？***
    
    *   不免俗有一些資料結構調整可以上前端開發更順利，且Next.js有比對機制不用擔心重複的API發數，但還是擔心對資料庫造成負擔，最終還是以少動資料庫為主。
        
*   ***API的數量***
    
    *   以追蹤/取消追蹤的API為例，我看到許多同學的作業會將追蹤與取消追蹤寫為同一隻API，並在node做判斷目前是要執行追蹤還是取消追蹤。但最終我希望API的method 能夠結構清楚一點（追蹤為`Post`/取消追蹤為`Delete`）所以還是將其分開，並且這樣後端的邏輯也能清楚一點，以及避免使用者連點時產生的前端狀態錯亂。
        

### 感謝ChatGPT

有魔法的時代我不想避諱有靠ChatGPT的幫忙，這次同時碰到Mongoose與Mongo shell 時語法真的大錯亂，所以最後要直接在資料庫進行操作時我都直接請ChatGPT產生段Script讓我選擇到想要的`document`來做異動。  
關於變數命名也是與程式碼是否容易閱讀至關重要的一點，但英文單字稀缺的我常常在命名上花半天時間，現在有ChatGPT真的很方便。

當然還有許多寫功能時的輔助，但目前的確還不到完全能使用的階段，自己的專案還是得靠自己來掌握。

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1718531678609/b9d1c600-0b65-4e47-9b60-53a0909a74cd.png align="center")

### 作業的自行優化

老實講課程的設計稿偏精簡，且沒有設計師與PDM可以一起進行畫面狀態上的討論，最後自己依照經驗做了一些優化：

*   **滾動讀取**
    
    *   因為是side project所以資料內容自然都很少，但考量到實際動態牆應該都會有無限滾動，所以把取得貼文的api新增了`page`的`query`，使用者落地時先讀取前五篇貼文，滾動到底部時才接著讀取下五篇貼文。
        
*   **前端表單的驗證**
    
    *   設計稿上關於表單的錯誤狀態寫的較少，但只靠後端收到的資料驗證來做阻擋容易造成多餘的api post，所以前端表單使用`react-hook-form` 多做幾步驗證，確認無誤時才發出api 的請求。
        
*   **貼文圖片的LightBox**
    
    *   因規格只有限制圖片檔案大小，並無限制圖片顯示的尺寸，怕貼文變成無限長所以我有限制貼文上顯示的圖片高度，當使用者點擊圖片時會另外展開LightBox。
        
    *   最終LightBox是用Next.js的平行路由 `(Parallel Routes)` 與軟導航 `( soft navigation )` 實現，主要靈感來自於[Image Gallery Starter](https://vercel.com/templates/next.js/image-gallery-starter)
        

### 結語

這個專案可以再做的後續優化還有非常多，也許是註冊新增信箱的驗證與新增第三方登入的功能，我也很想用`zod`來整理目前前端專案的型別驗證，果然要完整性一個專案需要花費的時間真的非常非常多。

但這次能在三個月內同時起步Node.js與Mongo DB 還是非常開心，希望自己也能在這些技能上繼續深究下去 ─=≡Σ((( つ•̀ω•́)つ