2024/03/16

[Vite] 前端開發模擬 API 的好物 Mock Service Worker (MSW)

markdown ### 前言 網站開發階段,常常會遇到前端開發時需要模擬呼叫 API 的情境。 用 json-server 來起一個服務是方便測試,但是跟網站是分開的 server,可能會因為忘記把服務開啟而呼叫失敗。 在不用後端介入的情境下,前端用 Vite 整合 Mock Service Worker (MSW) 模擬客製回應是個不錯的選擇。

2024/02/10

[Visual Studio 2022] v17.8 新功能 - 字串搜尋取代時保留原始大小寫格式

markdown ### 前言 在過去要搜尋文字取代時,不同的大小寫可能要分批做幾次取代,以保留原始的英文字母大小寫。 在 VS2022 v17.8 的新功能就可以一次辦到囉!多省做幾次取代步驟的時間。 ### 環境 - Visual Studio 2022 v17.8.6 ### 實作 原始的文字內容如下
用快速鍵 Ctrl+H 做取代動作,點選 AB 的按鈕做 Case 保留
第一組: 只取代 demo
第二組: 取代 demohttp
是不是很方便呀?

2024/02/09

[RESTful API] 如何在 Visual Studio 2022 及 VS Code 使用 .http 檔案文件化測試 API 執行結果

markdown ### 前言 通常在測試 API 的工具中,Postman 或 Insomnia 都是很方便的 API 測試圖形介面工具。 只是各工具有各自的保留文件格式,若能把測試 API 的資料文件化並做版控,又能夠減少散落在各處的翻查不易的問題。 因為 Visual Studio 2022 已支援能夠在 IDE 開啟 .http 文件,並直接可做測試看結果,而且功能齊全,文字檔案又能做版控。 但筆者不是只有 .NET 的專案,還有其他程式語言的專案,也會使用 Visual Studio Code 來撰寫,所以若能讓 .http 文件能跨專案跨工具來執行並管理就更棒了。 在本文中分別介紹在 Visual Studio 2022 及 Visual Studio Code 如何使用 .http 來執行測試 RESTful API。

[WSL] 如何在 Windows 11 安裝 WSL

markdown 趁著換新電腦,安裝主機開發環境,記錄一下安裝 WSL 的步驟 (Windows 11 之後的預設 WSL 版本已為 WSL 2) ### 準備 目標的作業系統為 Windows 11 先確認至 控制台 > 程式和功能 > 開啟或關閉 Windows 功能

勾選 "Windows 子系統 Linux 版" 以及 "虛擬機器平台",確定後並重新開機


2023/09/16

如何在 Windows 安裝及格式化新磁碟機

markdown 久違的硬體升級,終於把六年的老機給換新機,手動加了一條 2TB 的 SSD。記錄安裝及格式化新磁碟機的步驟。 ### 磁碟管理 搜尋 "建立及格式化硬碟及磁碟分割" 1. 在 磁碟管理 介面會看到 "不明 未初始化" 的磁碟,這就是準備要進行配置的磁碟

2023/05/20

[EFCore] 執行 Update-Database Migration 時遇到連線資料庫發生憑證錯誤

markdown ### 開發環境 - Visual Studio 2022 v17.6 - ASP.NET Core MVC (.NET 6) - Entity Framework Core 7.x ### 問題 在執行 Update-Database 的 Migration 指令時出現資料庫憑證錯誤的訊息,使得更新資料庫失敗。 錯誤訊息如下: ``` A connection was successfully established with the server, but then an error occurred during the login process. (provider: SSL Provider, error: 0 - 此憑證鏈結是由不受信任的授權單位發出的。) ``` 在本機端開發第一次遇到連線字串需要憑證的問題,過往是連遠端資料庫才會有憑證要求,特此記錄一下。 ### 解決方法 一種是在連線字串後加上 `Encrypt=False;` 不採用加密連線 另一種方式是主動信任 SQL Server 的憑證 `TrustServerCertificate=True;` 在本機開發階段連線不加密或是主動信任憑證是還好,在生產主機上連線就依正常加密及正確的憑證吧! ### 參考資料 - [使用 Microsoft.Data.SqlClient 連線資料庫發生憑證錯誤](https://blog.poychang.net/the-certificate-chain-was-issued-by-an-authority-that-is-not-trusted/) - [MS Docs - Release notes for Microsoft.Data.SqlClient 4.0](https://docs.microsoft.com/en-us/sql/connect/ado-net/introduction-microsoft-data-sqlclient-namespace?view=sql-server-ver15#breaking-changes-in-40?WT.mc_id=DT-MVP-5002629)

2023/03/19

[TypeScript] 解決 Webpack v4 升級到 v5 遇到 tsc 編譯時出現 Cannot find name 'Map'

### 問題 繼上編解決在 webpack v4 的安全性相依成功升級後。接下的任務是進一步將 webpack 的版本由 v4 升到 v5。 升級前環境: ```json "devDependencies": { "@types/node": "^16.0.0", "ts-loader": "^8.4.0", "typescript": "^5.0.2", "webpack": "^4.46.0", "webpack-cli": "^4.10.0" } ``` 把 webpack 及 webpack-cli 升級到 5.x,並同步升級 ts-loader 至 9.x 版本 執行 tsc 時出現 Cannot find name 'Map' 的問題
### 解決方法 除了更新 webpack, webpack-cli, ts-loader 的版本外 也要一併更新 `@type/node` 的版本 ``` npm install -D @types/node ``` 修改 `tsconfig.json` 加上 typeRoots 的位置 ``` "typeRoots": [ "node_modules/@types" ], ``` 升級後環境: ```json "devDependencies": { "@types/node": "^16.18.16", "ts-loader": "^9.4.2", "typescript": "^5.0.2", "webpack": "^5.76.2", "webpack-cli": "^5.0.1" }, ``` ### 後記 其實在這專案的底下還有一組是用 Typescript 2.x 的版本做編譯,但暫時未能同步升級,卻用不同的 Typescript 的版本,不特別指定會是以主目錄下的 `node_modules/@type` 為目標。所以兩個都直接指定各自的 typeRoots 就可以順利通過編譯。總算也把開發的相依套件版本全都升級完成。 ### 參考連結 - [Typescript compiler: Cannot find name 'Map'](https://stackoverflow.com/questions/52468096/typescript-compiler-cannot-find-name-map)