淺嚐後端
Xuan0
之前有提到我前端的知識都是在 The Odin Project 學的，其實這個網站除了前端的知識以外，也有後端的教學。趁著這次放暑假，我快速的把後端的部分看過一遍，然後做其中一個 project 試試水溫。
2022 Dcard Frontend Intern 面試分享
Xuan0
在一月底的時候，我在求職網上看到了 Dcard 開出了前端實習生的職缺。雖然條件很吸引人，但其實我還是猶豫了很久，一直到快二月底才開始做前置的作業。之所以會猶豫是因為我在前端這塊領域上的經驗不多，履歷上也沒有什麼令人驚豔的作品或是厲害的經歷，感覺就算投遞了也是會被刷掉。簡單來說，就是害怕失敗吧。
但是，能夠進到 Dcard 工作實在是太吸引我了，而且就算被刷掉了，我也不是一無所獲，至少還能把前置作業當成是一個作品來充實我的履歷。
typescript 的 conditional types
Xuan0
最近在開發一個簡化使用 useReducer 流程的 package，雖然實作起來不難，但是想要讓它能夠有很好的 type definition 卻不是一件簡單的事。
那麼，為什麼一定要有良好的 type definition 呢？就算沒有，這個 package 不是也能 work 嗎？確實，即便沒有 type definition，這個 package 也能夠正常使用。然而，我認為身為一個 package developer，除了提供 package 的功能以外，也應該要提供良好的開發者體驗。
使用 useReducer 來處理複雜的 state
Xuan0
最近在 Medium 上看到一篇文章說，在處理比較複雜的 state 時，應該使用 useReducer 將 state 變化的邏輯從 component 中抽離出來。想想覺得滿有道理的，以不久前做的 todo-app 為例子，如果我想要更新其中一個 todo 的話，用 useState 我需要在 component 這樣寫：
const checked = e.currentTarget.checked; const nextTodos = todos.map(todo => { if (todo.id === id) return { ...todo, isCompleted: checked }; return todo; }); setTodos(nextTodos);
但如果是用 useReducer 的話，我只需要這樣寫：
const checked = e.currentTarget.checked; dispatch({ type: 'check', payload: { checked, id } });
因為更新 state 的邏輯從 component 中抽離出來，所以在 component 內只需要把 action 傳進 dispatch 就好，是不是簡潔許多？
Next.js 的 getStaticPaths
Xuan0
如果想要 Next.js 在 server 端就產出網頁內容，並且又想使用 dynamic routes 的話，除了使用 getStaticProps 之外，還必須搭配 getStaticPaths，如此一來 Next.js 才會預先在 server 端就把畫面渲染出來。
那麼，在什麼樣的情況下會需要使用 getStaticPaths 呢？部落格就是一個很好的例子，我們將文章寫好後，透過 getStaticPaths 產生出所有文章的 paths，接著在 getStaticProps 就可以根據 path 去 render 不同的頁面。Next.js也有列出一些應該使用 getStaticPaths 的情況，有興趣的讀者可以點擊連結去看看。
本篇文章不會介紹什麼是 Next.js，而會著重在如何使用 getStaticPaths，所以如果讀者不知道什麼是 Next.js 的話，推薦先去 Next.js 的 Learn Course 學習。