最近面試蠻容易遇到，大家都用框架也沒可能自己費工刻一個，因此練好作文說得一口好 SSR(Server Side Rendering) 還是需要練習一下。
以 Vue 3 與 React 做比較
建立實體：
Vue：
const vm = Vue.createApp({
data(){
return{
name:'Jeff'
}
}
})
vm.mount('#app')
React：
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
componentDidMount()
componentDidUpdate()
React 的首次 render 不會觸發 DidUpdate
componentWillUnmount()
React 16.8之後狀態管理改用 Hook ，具有比生命週期更為直覺且省去複雜的 this，轉向 function component 為主的建置。參考資料：
最近因為面試解了不少前測，爬文章的時候看到這題有蠻多想法的， leetCode 會計算花費的運算時間覺得有趣，就研究了一下。
題目是 0~N 的整數陣列，中間缺了哪一個數？
一開始想到用排好再計算差值的方法
覺得有點多行，感覺應該有什麼很酷的方法不用反覆對陣列操作，就找了一下，發現可以用XOR 運算。
原理是 a ^ b ^ c ^ a ^ b = a ^ a ^ b ^ b ^ c = 0 ^ 0 ^ c = c
於是改了一種寫法，就程式的行數而言下面比較長，效能而言由於我家網路莫名其妙，兩者互有快慢比不出來，未來要仔細研究一下時間複雜度的計算。
參考資料：https://www.ruanyifeng.com/blog/2021/01/_xor.html
最近接觸到不少 Promise 操作，早期抄的一些範例也已經不合時宜不易讀，因此重寫一下理解。
創造一個 Promise 物件：
用 setTimeout 做出時間差，模擬真正 API 回來時間差的情境；
Promise 物件有三種狀態：pending(等待)，fulfilled(已完成)，rejected(已失敗)；
Promise 物件有 resolve 與 reject 兩種回傳，resolve 是成功，reject 是失敗；
當串聯操作的時候，有幾種情況要考慮：需不需要照順序執行？需不需要依序得到結果？
先創造範例 a，b，c 三個 function
照順序執行：
直接用 .then 或 .catch 可以按順序執行。不過 return 的順序則不一定。
依序得到結果：
透過 ES6 async await ，使每個 Promise 得到結果才執行下一個，由於這樣一串時間會拖很長，務必將 function 與主要組件拆開，避免主要畫面轉圈圈轉不完。
整個都綁在一起不怕一個錯就全都跳錯，或是針對裡面的 Promise 物件錯誤有調整 resolve 的話，也可以用 Promise.all 來進行處理。
這個範例應該複製貼上都跑得了，也可以觀察 return 的順序，如有錯誤還請不吝指教。
一個用來處理組件共用狀態與邏輯的功能，是前端在工作時必備的，例如登入後要把登入狀態跟一些環境變數給予大部分的組件，或開發新的功能要在多個平行組件上運作，如果一層一層傳遞一是麻煩，二是要改 Code 追蹤的時候很痛苦，在 React 是使用 Context 或 Redux ，Vue 是 Vuex，原理都是創建一個 Store ，Store 儲存 State 與 Dispatch，例如登入與否，State:{ isLogin: false }，Dispatch 就會是一個更新 State 的 function，如 dispatch({ type:isLogin , data:true})，再透過 reducer 去更新 State 使狀態發生改變，意義在於使共用狀態與邏輯是可追蹤的，方便知道哪些組件會更改，以及除錯會比較方便。
在 Vue 3 中，綁定需要加上 ref ，例如： const isLogin = ref ( false ) ，因為原始型別與物件型別在傳值與傳參考的反應不同。Vue 2 升級 Vue 3 時，生命週期可以由 vue import，mount 改成 onMounted，watch(觀察對象, callback , option)，剩下的下集再續。
setup () {
const isLogin = ref ( false )
onMounted(()=>{
dispatch()
})
}
參考資料：
Kuro 在大神來六角的解說
前陣子因為工作串接 Google reCAPTCHA Enterprise ，為了測試有辦了 Google 的雲端服務，現在買東西登入也懶得打一堆有得沒得，相當欣賞這種一個按鈕就解決的登入方式，所以來實作看看。
首先看文件引入 <script src="https://accounts.google.com/gsi/client" async defer></script>
在 Next.js 用 GCP 相關服務都有點麻煩，剛好看到有套件就用了
npm install react-google-login
再來設定 GCP OAuth 相關
在 GCP 左邊 API 與服務 選擇 OAuth 同意畫面進行設置，測試時記得加上 localhost ，上正式或測試環境時也要加上 domain。
API 與服務 > 憑證 建立憑證，建立OAuth 用戶端 ID，授權的 JavaScript 來源也要加上包含 localhost 等 domain ，重新導向 URI 是登入成功之後會導轉的頁面，然後可以把 JSON 下載下來可以看到 client_id ，需要設置在登入登出按鈕的組件上。
最後就運用 Next.js 完成設定與部屬。
取得的個資會在 profileObj 裡，進行 Hook 設置跟登入導轉(也可以直接寫在 GCP 的重新導向URI)
其他有練習使用 Tailwind CSS 建立 Context 部屬 Vercel。
Github： https://github.com/oneraner/react 原始碼
Vercel： https://react-delta-bay.vercel.app/ Demo位置
參考資料：
故事是這樣的，有很多小錢包需要分別打 API 去取得餘額，GraphQL API 本身是非同步的，可是當我要加總所有錢包的餘額就會：
const total = async () => {
const walletList = [ a , b , c , d , e]
let total = 0
await walletList.forEach( async (item,index) => {
const cash = await getCashApi(item)
total = total += cash
console.log(index)
})
console.log(total)
}
然後 index 亂跳 total = 0，完全沒用。
原因是 await 只看後面回傳的是不是 Promise ，但在改寫之前還要釐清是否有順序問題，如果要照順序，就用 reduce 的方法寫，不過我只要算加總，錢包 API 的錢回來的順序不重要，因此可以用 Promise.all 改寫：
const total = async () => {
const walletList = [ a , b , c , d , e]
let total = 0
await Promise.all(walletList.map( async (item,index) => {
const cash = await getCashApi(item)
const outputCash = cash === undefined ? 0 : cash //後來發現 API 會回傳 undefined 導致加不起來
total = total += outputCash
console.log(index)
}))
console.log(total)
}
這樣就會出來正確的 total 啦
參考資料：
React、Next.js、GraphQL、Gitlab、AWS、TypeScript、Styled Components、Trello、Jenkins...等等，還有一些 CI/CD 相關的東西我碰不到。
目前就職剛滿三個月，這篇文章寫完就過了三個月試用期，但是我真的是六角的學生，所以這時候要推薦大神來六角！隨著找到工作之後，接觸越來越多不同的技術，發現大神來六角都找的到基礎教學，可以延伸再去找講師的文章或社群尋找學習資源，剛錄取的時候覺得挑戰很大，公司的技術跟在六角學的 Vue、RESTful API、SCSS 完全不一樣，不過轉念想想公司都不怕了，我有什麼好怕的。
剛進公司就是把 VSCode 與套件裝一裝，比較重要的大概是 TSLint 與 Prettier 和 Docker ，主要溝通或問問題是直接走過去說，要留記錄或 OnCall、訂便當就是不同 Line 群，公司提供工作用 Mac 跟螢幕，還有 VPN ，排 OnCall 跟加班要用。
目前在支援另一個部門，公司有兩個會需要前端的部門，專案都是 React + Next.js + TypeScript 的主架構，只是 CSS 是 StyleComponent 或 CMS 上傳原生 CSS 的差別，還有 React 版本導致一個可以盡量寫 Hook，作到結構與樣式分離，一個只能用 Class 的 this.State 和 setState。
整體的流程大概是：從 PM 收到需求，通常會連帶跟技術主管一起說或是由技術主管轉達，大概有修改已有資訊、加新功能、改樣式，偶爾會有哪裡顯示有問題需要檢查的時候，討論完要怎麼實作之後開始動手，一開始會弄不清楚檔案在哪裡？桌機、手機有沒有分開？資料呈現的時候有沒有經過什麼計算或處理？作好了以後先單機測試，然後提 PR ，在 Trello 登記，推測試環境自己再看過一遍，然後通知 PM 跟 QA。
第一次當前端工程師，一開始作過各種蠢事：
活動用連結：六角學院
在 104 投了大約 30 家履歷，cakeresume 4 家，得到面試機會 5 次。筆者背景是 2019 年底
開始積極準備轉職，原本是象棋教師，觸動我轉行的動機是每個行業的薪資上下限就在那，
結構性問題也不是個人可以改變的，於是選擇六角學院作為主要的學習管道開始學習前端，
理由是對於學習路線描述的很清楚：連結，前端一方面比後端好上手，一方面是作出來的成果
直接在畫面上回饋感強，再來搜尋各家工程師從業心得，大概都是需要不斷學習，剛好我就是
喜歡學習研究的人，於是就入了這個坑。
配合活動的六角工商，介紹一下六角的學習歷程：在六角有買 jQuery、JavaScript、Vue...
等等，但是後來出的切版直播班跟 Vue 作品直播班比較有衝刺的效果，學習時間的話，在直播
班寫作業的時候，全職的時候就趁半夜沒聲音的時候狂寫，平均八小時，兼職的時候就比較
規劃平均只有兩個小時。最後把作品直播班作品作出來之後，精實修改了 300 條左右程式跟
設計上的建議，配著加碼的履歷健檢跟模擬面試，還有自己趁機寫的一些 F2E、Chart.js 小作品
就開始求職了。
時間大約從六角最後一次改作業然後模擬面試完，2020/10月底到2020/12月底拿到 offer letter
為止。職缺都是前端，Vue 或 React 都投，薪資條件都開 4 萬。
在 cakeresume 上投履歷得到回應。
作寶寶攝影機，連 APP，母嬰分房照顧之類的時候很方便，覺得我有小孩就會買的一個
產品，第一關電話面試，自我介紹、介紹作品，由於這家是最早面試的，所以履歷上只有六角
的主要作品，作了一些技術問答後，問公司對工程師的配置，前端只有一個人，大部分都是
APP 或後端，公司直接表明不適合，給了一段發問閒聊時間。
其中一個建議：作品介紹的時候可以從主題如何發想開始，在我後來的面試中也有很大的
幫助。
準備的對公司問題：
主管已說明主要負責 Vue 的一些工具 component 跟網站前端。
前端團隊的配置？1前端，其他都是 APP 或後端。
caseresume 投履歷得到回應。
考卷回應後無聲卡。題目主要是 LeetCode 。
104 上公司主動邀約面試。
104 上投履歷，第二天收到電話聯絡。
很久沒發文了感覺很廢，所以舉一個最近工作學到的東西，公司採用的框架是 React、Nest、
Typescript、Styled，所以階段性任務都在學怎麼切 React Component，跟尋寶(找有沒有前人建好
的 Component可以套或事先包好的常數)，還有整個開發流程，組織算蠻扁平的，發現測試環境
掛了可以直接去問後端，同事也蠻友善。
任務大概是做一顆有三種狀態的按鈕，onClick 一個方法大家都會，Vue 跟 React 有個不同的
地方是渲染方式，Vue 只要在 data 先 set 好，數據雙向綁定跟畫面渲染通常沒太大問題，
但 React 數據是向下傳遞，一開始我還想要作兩個組件然後平行組件傳，在 React 依然是件困難
的事，並且公司的東西也不能因為一個小組件就讓你隨便傳值到 store 借放，後來作成一個組件
將按鈕控制的畫面跟按鈕放在一起，大不了把按鈕用絕對定位定到天涯海角，因此還要將畫面
的狀態設置成一個 hook ，React 才會監控並在數據變更的時候重新渲染，一開始我會 if 連發：
let status = 0
if( status === 0 ){
狀態0
status = 1 //切換到下一個狀態
} else if (status === 1){
狀態1
status = 2 //切換到下一個狀態
} else {
狀態2
status = 0
}
後來運用 switch：
switch(status){
case '0':
狀態0,
break
case '1':
狀態1,
break
case '2':
狀態2,
break
}
至此剩下一個問題是，case 0、1、2 過幾個月別人會看不懂，雖然本人通常會記得是怎麼
回事，所以這時候就要用 Eunm 把 case 變成英文：
eunm name {
OPEN:'OPEN'
'0.5X':'0.5X'
CLOSE:'CLOSE'
}
const [mode, setMode] = useState('OPEN')
React 的 useState，可以用 setMode 改變 mode 的值並重新渲染影響範圍。
change( ) => {
const nameArray = [name[OPEN], name[0.5X], name[CLOSE]]
const modeLength = nameArray.indexOf(mode)
( modeLength + 1 ) > nameArray.length ?
setMode( nameArray[0] ) :
setMode(nameArray[modeLength + 1])
}
首先先做一個 enum 內容的陣列，然後找出現在狀態是第幾種，之後作一個沒事 length + 1 跳到
下一個狀態，到底則回到第一種( length = 0 )狀態的判斷。
雖然實際上的程式會變比較多行比較繞，但是在這裡可讀性的要求在節省行數之前。
參考資料：