前言

在開發 Node.js 應用程式時，我們可能需要在不同的 Node.js 版本之間進行切換。
在這種情況下，一個方便的解決方法是使用 Node Version Manager（nvm）。
而 Homebrew 則是一個流行的 macOS 套件管理工具。
在這篇文章中，我們將探討為什麼官方不建議使用 homebrew 安裝 nvm。

情況

首先，值得注意的是，nvm 官方文件明確表示不建議使用 Homebrew 安裝 nvm。
主要是因為 Homebrew 的安裝方式可能會干擾 nvm 的運作，導致一些奇怪的問題。
nvm 官方建議使用其提供的安裝方式，以確保 nvm 能夠正常運作。

那麼，標準的 nvm 安裝方式是什麼呢？
您可以在 nvm 的 GitHub 頁面上找到完整的安裝指南，這裡不再贅述。
簡而言之，您需要在終端機中運行一個安裝腳本，該腳本將安裝 nvm，並更新您的 shell 啟動腳本以使其能夠正常運行。

如果您仍然希望使用 Homebrew 安裝 nvm，可以參考一些額外的資源。
這裡有一篇詳細的文章，介紹了如何使用 Homebrew 安裝並配置 nvm。
不過，需要注意的是，這種方法仍然不是官方建議的方式。

實作

不管您選擇哪種方式安裝 nvm，一旦完成後，您需要在終端機中設置 nvm 的環境變數才能正常運行。
如果您希望在不關閉終端機窗口的情況下讓變數生效，可以使用以下命令：

1

source ~/.bashrc

如果您使用的是 zsh，則需要使用以下命令：

1

source ~/.zshrc

這將重新載入您的 shell 啟動檔案，使 nvm 環境變數生效。

參考：

• NVM
• How to install and Configure NVM on Mac OS

(fin)

前言

在 macOS Monterey 上如何處理開發伺服器使用端口被佔用的問題，
若使用其他 macOS 版本，請查看相關頁面。

問題

更新到最新的 macOS 作業系統時，發現我的前端網站，
顯示類似於「Port 5000 already in use」的訊息。

透過執行

1

lsof -i :5000

發現正在佔用該端口的進程名稱為 ControlCenter，這是一個原生的 macOS 應用程式。
即使你使用強制終止它，它還是會自動重新啟動。

處理方式

原來使用該端口的進程是 AirPlay 伺服器，
你可以在「系統偏好設定」 >「共享」中取消勾選「AirPlay Receiver」以釋放 5000 端口。

小結

網路大多的中文解法是關閉”隔空播放接收器”，在新版的 OS 找不到，可能是語言差異。
所幸找到英文的解法，順利停止佔用 port 的服務。

參考

• [Solved] Port 5000 Used by Control Center in macOS Monterey

(fin)

前言

在開發Node.js應用程序時，開發人員通常需要經常重新啟動應用程序來看到他們所做的更改。
這真的很煩，因為每次修改都需要重新啟動應用程序。
為了解決這個問題，開發人員可以使用許多自動重新加載工具，
例如 nodemon 和 pm2。

比較

首先，讓我們來比較 nodemon 和 pm2 自動重新加載功能。

nodemon

一個簡單易用的自動重新加載工具，可以在幾分鐘內完成安裝和設置。
它會監聽文件的更改，並在發現更改時自動重新加載應用程序。
此外，它還可以在命令行中顯示有用的日誌信息，例如錯誤和堆棧跟踪。
但是 nodemon 需要不斷監聽文件系統的更改，因此它會帶來一些性能開銷。
此外，它也不能用於在分佈式系統中部署 Node.js 應用程序。

pm2

pm2 是另一種自動重新加載工具，具有進程管理功能，例如重啟和停止應用程序，監聽應用程序的日誌等等。
它可以輕鬆地在分佈式系統中部署 Node.js 應用程序，並可以與其他 pm2 命令進行集成，
例如性能監測和自動縮放。 然而，相對於 nodemon，pm2 更為複雜，需要更多的配置和設置。
此外，某些 pm2 命令可能會影響系統的性能，例如性能監測和自動縮放。

小結

在開發 Node.js 應用程序時，自動重新加載工具是非常重要的。
如果開發人員只需要簡單的自動重新加載功能，並且不需要在分佈式系統中部署應用程序，
那麼 nodemon 是一個不錯的選擇。
如果需要進程管理功能和在分佈式系統中部署Node.js應用程序，
那麼 pm2 是一個更好的選擇。

參考

• nodemon
• pm2

(fin)

前言

本篇是 AI Knows 的第一篇，ChatGPT 問世後，
在學習開發上，我認為又到了一個新的領域，
很多人開始作分享對 ChatGPT 的看法，在我看來還是社群時代的蹭流量作法。
更進一步的有人開始透過 AI 實作商業應用，商人果然是跑最快的。
另外一種，用嘴涮夢、涮 AI，開始賣書賣課的，我認為接近灰色地帶，就不予置評了。

問題

我正在替專案配置 EsLint 文件，過程當然直接請 AI 代勞，
但是有一些設置我不那麼清楚也懶得查文件。
就一樣也請教 AI 囉。

對話記錄

Q:tsconfig.json 中的 jsx 屬性為何？**

jsx 屬性是用來指定 TypeScript 如何處理 JSX 語法的選項。
JSX 是一種 JavaScript 語法擴展，允許在 JavaScript 代碼中直接使用
HTML 標籤來描述 UI 組件，使得開發 Web 應用程式更為方便。

在 tsconfig.json 中，jsx 屬性可以設置為以下值：

“react”：表示使用 React 的 JSX 語法。
“preserve”：表示將 JSX 語法保留為原始的 JSX 代碼。
“react-native”：表示使用 React Native 的 JSX 語法。
當設置為 “react” 時，TypeScript 會將 JSX 轉換為對應的 JavaScript 代碼，
這樣就可以在瀏覽器中運行。而當設置為 “preserve” 時，TypeScript 不會對
JSX 進行任何轉換，而是將其保留為原始的 JSX 代碼。

Q:為什麼我看到的設定是　“jsx”:”react-jsx”

在 TypeScript 4.1 之前，jsx 選項僅有兩個可選值，分別是 preserve 與 react。
其中 preserve 會保留 JSX 並將其轉換為對應的 React.createElement 函式，
而 react 則是直接轉換為對應的 JavaScript 代碼。

在 TypeScript 4.1 中，又新增了一個選項 react-jsx，用來代表 TypeScript
將會使用 @babel/plugin-transform-react-jsx 進行轉換，以此來與 Babel 兼容。

因此，如果你的 TypeScript 版本較新，通常會看到的 jsx 設定是 “jsx”: “react-jsx”，
表示 TypeScript 將會與 Babel 兼容。

小結

綜合以上問答，我們可以得知 JSX 是一種 JavaScript 語法擴展，讓開發 Web 應用程式更加方便，
而 tsconfig.json 中的 jsx 屬性用來指定 TypeScript 如何處理 JSX 語法的選項，
可以設置為 react、preserve 或 react-native 三種值，分別代表將 JSX 轉換為對應的 JavaScript 代碼、保留原始的 JSX 代碼或使用 React Native 的 JSX 語法。

而在 TypeScript 4.1 中，新增了 react-jsx 選項，用來與 Babel 兼容。
因此，如果 TypeScript 版本較新，通常會看到的 jsx 設定是 “jsx”: “react-jsx”。

寫在最後

通篇八成為 AI 牙慧，正確性未考究。

(fin)

前言

最近接觸的專案有一部份是 express 與登入機制有相關
使用的套件是 Passport
Passport 是這樣介紹自已的

Simple, unobtrusive authentication for Node.js
Passport is authentication middleware for Node.js. Extremely flexible and modular,
Passport can be unobtrusively dropped in to any Express-based web application.
A comprehensive set of strategies support authentication using a username and password, Facebook, Twitter, and more.

這裡我們不作使用教學，官方都有而且相當簡單。
passport.authenticate 本質上就是一個 middleware。
而 passport.use 會用來註冊各種 Strategy。
比如說 facebook login、google login 等…
更多可見這裡

談談 passport-local

開發的過程中，有小朋友反應，如果他不輸入帳密，
頁面就會直接轉導，無法看到錯誤訊(有關 req.flash 的部份，本文不會談到)。

1
2
3
4
5

passport.authenticate('local', {
  successRedirect: '/',
  failureRedirect: '/users/login',
  failureFlash: true
})

當然我們很清楚有設定 failureRedirect
不過讓我們不得其解的是，我們寫的整個 LocalStrategy 並沒有被執行，連 log 都沒有

這裡要翻一下原碼，
這個作者的專案我覺得很棒，大多數都有測項，
除了文件外，你可以直接看測項理解它的想法。
在 Strategy.prototype.authenticate 可以發現以下程式

1
2
3

if (!username || !password) {
  return this.fail({ message: options.badRequestMessage || 'Missing credentials' }, 400);
}

簡單的說，它預設回傳一個 400 錯誤，而我們又設定了一個錯誤轉導。
使用這類的第三方套件就怕這類的非預期行為，
好在這個套件的文件與測項開源且清楚，我們才能快速定位問題。

參考

• [筆記] 透過 Passport.js 實作驗證機制
• Express 使用中介軟體

(fin)

警語

這不是很安全的做法。因為 .ssh 的檔案通常包含了敏感的訊息，比如私鑰。
如果放到雲端服務(Dropbox)上，就會有風險。

為什麼要這樣作 ?

現在混合的工作型態，有時會需要用家中的電腦工作，
每次都要花時間重建或是搬移 ssh pub key 顯得有點麻煩
Dropbox 本身就是一個適合的資料同步工具，之前我也設定過 zshrc 與 vimrc 的同步機制。
同理　.ssh 也可適用，但風險需要評估

實作

1. 將你的 .ssh 內所有檔案移至 ~/Dropbox/.ssh
2. 刪除 .ssh 資料夾
3. 執行以下語法

1

ln -s ~/Dropbox/.ssh ~/.ssh

(fin)

簡介 JSON.stringify()

JSON.stringify() 是 Javascript 提供的一個方法，
可以將 JavaScript 的值轉換成 JSON 字串(String)。

這方法需要 3 個參數

1. value
   這個參數是必填的，會被轉成 JSON 字串

   1 2 3

   var obj = { name: "John", age: 30, city: "New York" }; var myJSON = JSON.stringify(obj); //myJSON is 「{ "name":"John", "age":30, "city":"New York"}」

2. replacer
   這個選擇性參數，會是一個陣列或是一個 function ，主要的目的可以過濾 value 的值。
   我們可以用 w3school 的範例說明一下
   如果我們傳入的是一個陣列，那它會像一個過濾器一樣，只篩選出陣列中的字串

   1 2 3

   var obj = { name: "John", age: 30, city: "New York" }; var myJSON = JSON.stringify(obj, ["name", "city"]); //myJSON is 「{"name":"John","city":"New York"}」

   如果我們傳入的是一個 function，會將每一個參數丟入 function 之中(可以進行加工或裝飾)

   1 2 3 4 5 6

   var obj = { name: "John", age: 30, city: "New York" }; var myJSON = JSON.stringify(obj, (key, value) => { if (key.match(/(age|city)/)) return "*"; return value; }); //myJSON is 「{"name":"John","age":"*","city":"*"}」

3. space 選擇性
   這個參數是為了可讀性

   1 2 3

   var obj = { name: "John", age: 30, city: "New York" }; var myJSON = JSON.stringify(obj, null, 2); //myJSON is 「{ "name": "John", "age": 30, "city": "New York" }」

JSON.stringify(obj, null, 2);或JSON.stringify(obj, null, 4);便是開發者常用的呼叫方式

Ref

• What is null in JSON.stringify(obj,null,2)
• JSON.stringify()
• JavaScript JSON stringify() Method
  (fin)

引言

回顧過往的 Blog，我很少在作年度的計劃與回顧，
22 年末我個人發生比較大的變化。
甚至讓我斷了每個月都寫一篇 Blog 的紀錄…
下面就是我個人的回顧與反思。

工作相關

我不打算在這裡寫太多細節，畢竟事情都還在進行中，未來有機會再細講。
簡單講是我會離開 T 社，回顧一年，不論是支援前端 Flutter 或是後台 React 的開發，
又或是離職同事的 golang 專案，我自認盡力了，但結果可能不如人意。
好處是我學會了 React、Golang、K8s 與部份 GCP 的服務
— Flutter 不算有掌握，畢竟公司內的專案實務上並無法接觸 —
但是這樣的技能樹是我現在該點的嗎 ? 我心中總有點疑惑…

我的觀察

找工作的過程中，發現了很多，
太多的公司(不論新舊、大小)都不具備技術審核的能力，
這樣的公司都會希望找一個資深的工程師，來帶領團隊，而我似乎是他們的人選，
實際上，我不太確定我是否能作好管理，但是無止的追求新技術，也不是我目前的高優先選項，
我還是追求匠人精神，技術總是 2~3 年一個大迭代，但是產品不可能不停的翻新，
而使用的技術，其實對招募會有很大的影響，畢竟市場上的人才很多會技術導向，
開發、維運、招募之間取得平衡是一個持續不斷的挑戰。

跟很多開發者不一樣的地方，我開發的專案，
追求的是零知識的轉移，讓巴士因子儘可能與人脫勾，
說白話一點，我希望我開發的產品，透過工程的手段與必要的文件，
任何人都可以快速上手，只要搭配不同的組態，可以佈署到不同的環境上。
然後我很追求 XP 的開發精神，以前說蠻多的，以後也會再說，就不再佔本篇篇幅了。

面試感覺

如果要透過 Hunter，可以再看看他手上的機會，
如果都是人力銀行就找得到的機會，可以試試看自已投吧，
Hunter 或許可以談出比較高的薪水，但是我的感覺是在玩遊戲，
當我表達對工作有興趣，但是薪水可不可能再往上談的時候，講得很硬，
當我表達有其它的機會時，薪水就又都可以談了，無言…
至少 A 社與 S 社的 Hunter 我是不推的。

一般的工程師職務都會考 LeetCode，
沒刷過的人去刷吧，也不用卡太久，但是一定要把答案看懂，　　
常見的資料結構與演算法寫個一輪吧，
是不是需要上百題，就見人見智了。

未來的走向

首先，我最理想的狀態，是找到一份遠端的工作機會，如果這個工作穩定，　　
或許我會開始數位遊牧的生活，每隔幾年會到不同的國家作線上的工作。
不過我現在有的選項當中，並沒有這個項目

保持現狀

A 社是一個老牌的公司了，系統就是 10 年來的累積，
感覺有要作很多新東西，但是老系統會放不掉，薪資 N 有符合預期，
離家也不算太遠，可以說如果選擇了這份工作，
會最接近我的現況。

出國

另一個可能性是出國遊學，
與打工留學不同的是他沒有年齡限制，
剛好現在長輩健康、沒有家累，工作停下來一下，或許是我現階段需要的　　
缺點是這段時間不但沒有收入，半年內可能還會花費不少儲蓄。

主管職

另一間 A 社的工作機會是一個主管職，主要的技術棧也與我原本的不大相同。
但轉念一想，或許可以有更高的自由度與挑戰，
團隊的組成是年輕的新創團隊，2 個後端與 1 個前端，1 個全端與 1 個 AI 工程師。
有一種工程師的路走到了盡頭，是不是應該去接受這樣挑戰呢 ?

(fin)

前情提要

最近很紅的聊天 AI ChatGPT 開始出現各種應用了。
這基本上應驗了我 2010 年說的 「10 年內，軟體工程師不會被取代」的說法
雖然是否真的會取代工程師，我會另文寫寫我現在的看法，不過也算是敲響了一記警鐘。
各式各樣的應用也隨之而來。
此外文末記錄一下 heroku 停止免費服務後的可能方案。

Line Bot 與 chatGPT

最常見的應用就是 Line Bot 與 OpenAI GPT-3 API 進行串接。
來達到一個賴機器人能夠與你有一定程度的智能對話。
(不過實測看來 GPT-3 API 無法與 ChatGPT 的提供智能相比)

這類的應該短短幾周就出現了各式各樣的版本，
語言有 nodejs、python、C#

主要的步驟大概如下，

1. 主程式 push 到 Github 上(大部份都很佛，可以直接 Clone)
2. 到 OPEN AI 取得 API KEY
3. 到 Line Developer 建立一個 Message API
4. 取得 Line Channel Access Token 、Channel Secret
5. 調整 Line 相關設定 ex: 停用自動回復
6. 到 Vercel 申請免費伺服器並連結 GitHub 帳號
7. Vercel 進行伺服器設定 webhook

即可完成

Vercel 這個服務也可以自定 domain，
當然買了 marsen.me 這個 domain 的我自然不會放棄裝專業自定義 domain 的機會
在 Vercal → 登入 → 找到你的專案 → Settings → Domains
輸入你的網域 subdomain.yourdoma.in

接下來去你的 DNS 服務商的設定表(我是用 cloudflare)加上一個 CNAME 的記錄，

後記

這是我第一次使用 Vercel，沒什麼門檻，簡單好上手。
不過看到各方大神使用了各種免費服務，
想說稍微記錄一下這些服務，以因應 heroku 停止免費服務，
或許未來也會有有機會用到

uptimerobot

免費服務通常一段時間沒有用就會睡著，這是個自動喚醒它們的服務

免費部署 service 的方案

• heroku(已停止免費方案)
• Colab + Flask(Google 提供給 python 的雲端 solution)
• fly.io
• vercel
• render

我還沒有用過這些服務，所以先作記錄，想要比較的話，可以使用 slant

參考

• 【Side Project】(全圖文教學) 用 Python flask 實作類似 ChatGPT 的 Linebot，並部屬至 Vercel 上 (updated: 2022/12/15)
• OPEN AI x ChatGPT x LineBot 串接完整全紀錄 python 不採用，教學隨附影片的聲音好吵
• ChatGPT LINE Bot　 C# 不採用，對機敏資料的處理方式我不喜歡
• 用 Node.js 建立你的第一個 LINE Bot 聊天機器人以 OpenAI GPT-3 為例 Nodejs 未採用，就找到適合的專案了

(fin)

前情提要

最近想再面試，發現大家都很流行刷題，好像沒有刷個 100、200 題，就不能夠面試了。
我剛開始從事軟體工作之初，刷題並不是一個很主流的面試條件，不過也是會準備一些考古題，
關於這樣的面試方式，是不是真的能找到公司要的人才，或許有機會未來，再寫一篇來聊聊。

總之，我很喜歡 TDD 的開發方式，試著在刷題的過程之中，順便練手一下 TDD

二元搜尋樹(Binary Search)

演算法題庫的第一題，就是二元搜尋樹(Binary Search)，
概念上很簡單，就是將數列排列後，由中位數去比較大小，
如果目標比中位數大，那麼就往右側的樹，再作一次搜尋
如果目標比中位數小，那麼就往左側的樹，再作一次搜尋
直到找目標，或是抵達樹葉，而仍未找到目標便回傳 -1

這樣的作法，不考慮極端狀況下，會比遍歷整個樹快一倍

測試案例

目標 5，空陣列，回傳-1

這個案例用來建立方法簽章，
用最簡單的方法實作

1
2
3

public int Search(int[] nums, int target) {
  return -1;
}

目標 5，[5]，回傳 0

這個案例用來實作判斷 target 是否在 nums 之中，
先 hard code 通過測試

1
2
3
4
5

public int Search(int[] nums, int target) {
  if (nums.Length > 0)
    return 0;
  return -1;
}

接著我們要修改 hard code 的部份，首先實作中位數的比較，
同時代出左右 index 的概念

1
2
3
4
5
6
7
8
9
10

if (nums.Length > 0)
{
    int left = 0;
    int right = nums.Length - 1;
    int mid = (right - left) / 2;
    if (nums[mid] == target)
    {
        return mid;
    }
}

重構，利用左右 index 的觀念，改寫進入搜尋的條件式

1
2
3
4
5
6
7
8
9
10

int left = 0;
int right = nums.Length - 1;
if (right - left >= 0)
{
    int mid = (right - left) / 2;
    if (nums[mid] == target)
    {
        returN mid;
    }
}

目標 5，[5,6]，回傳 0

我們的樹開始長出葉子，僅管通過測試，
我們也需要透過這個案例，產生一個 while 迴圈，

1
2
3
4
5
6
7
8
9
10

int left = 0;
int right = nums.Length - 1;
while (right >= left)
{
    int mid = (right - left) / 2;
    if (nums[mid] == target)
    {
        returN mid;
    }
}

目標 5，[5,6,7]，回傳 0

目標 5，[3,4,5]，回傳 2

有了 mid 的概念，我們可以以 mid 的左右 假想為不同的子樹，
用這兩個案例逼出左、右樹邊界重設條件，
注意 mid 同時也是邊界重要條件之一，
為此，我們需要調整 mid 的邏輯，
完整的程式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

int left = 0;
int right = nums.Length - 1;
while (right >= left)
{
    int mid = (right - left) / 2 + left;
    if (nums[mid] == target)
    {
        returN mid;
    }
    if (nums[mid] < target)
    {
        left = mid + 1;
    }

    if (nums[mid] > target)
    {
        right = mid - 1;
    }
}

小結

二元搜尋樹是屬於簡單的題型，
也是資工學習演算法的初級題目，
轉為 TDD 的過程也不困難，掌握幾個原則，
一、先設計再實作
二、用測試案例趨動實作
三、果斷拋棄無法趨動實作的測試案例(案例設計不當的壞味道)
四、適當的重構，以符合當初的設計

(fin)