Sign in Subscribe

寫程式

A collection of 80 posts
ReactDOMServer 搭配 Express 和 Esbuild 實作 Server Side Rendering (SSR)
寫程式

ReactDOMServer 搭配 Express 和 Esbuild 實作 Server Side Rendering (SSR)

在這篇文章中，我介紹了服務器端渲染（SSR）的基本概念及其與客戶端渲染（CSR）的比較。我詳細說明了SSR在提高頁面載入速度、改善SEO和用戶體驗方面的優勢。此外，我還探討了如何在Express環境中設置SSR，包括如何使用ReactDOMServer將React組件渲染成字符串，並將其嵌入HTML中返回給瀏覽器。
4 min read
部署 Express 專案到 AWS EC2，並設定 Nginx 跟取得 SSL 憑證
寫程式

部署 Express 專案到 AWS EC2，並設定 Nginx 跟取得 SSL 憑證

在這篇文章中，我詳細介紹了AWS的基礎知識，包括金鑰對、私鑰檔案格式、安全組的功能及其入站和出站規則的區別。我探討了RSA和ED25519金鑰類型的差異，解釋了.pem和.ppk私鑰檔案格式的不同，並說明了AWS安全組如何作為虛擬防火牆保護AWS資源。此外，我還講述了Amazon Machine Image和不同AWS實例類型的重要性，這些知識對於在AWS環境中有效管理和部署資源至關重要。
14 min read
Next.js 13 升級功能：Turbopack、 file-based routing，React Server Components
寫程式

Next.js 13 升級功能：Turbopack、 file-based routing，React Server Components

在這篇文章中，我詳細探討了 Next.js 13 的三個重大升級：使用 Turbopack 的打包工具、基於文件的路由系統以及無痛的 React Server Components。我解釋了 Turbopack 如何提供比先前工具更快的打包速度，以及新的路由系統如何允許更靈活的文件組織。此外，我還介紹了如何更輕鬆地在 Next.js 中使用 React Server Components，這大大簡化了開發過程並提高了效率。
5 min read
六個 React 常見可優化的用法
寫程式

六個 React 常見可優化的用法

在這篇文章中，我探討了六個常見的 React 優化技巧，幫助開發者避免常犯錯誤並提升應用性能。例如，當不需要即時取得輸入值時，使用 useRef 代替 useState 可以避免不必要的渲染；理解 setState 的異步特性和使用上一狀態的重要性；以及正確使用 useMemo 來避免因引用類型更新導致的額外渲染。這些技巧不僅提高了代碼的效率，也加深了對 React 內部工作機制的理解。
4 min read
快速在 mac 安裝 mongoDB
寫程式

快速在 mac 安裝 mongoDB

在這篇文章中，我分享了如何在 Mac OS 上安裝 MongoDB 的詳細步驟。首先，從 MongoDB 官方網站下載適合的版本並將其解壓至 /usr/local 目錄。接著，創建數據存放和日誌記錄的資料夾。此外，我還介紹了如何設定快速啟動的配置文件和環境變數，以便在任何地方使用終端機輕鬆啟動 MongoDB。最後，提供了必要的安全設置，確保從外部下載的檔案能夠在 Mac 上順利運行。這些步驟旨在幫助用戶快速且正確地在自己的 Mac 上配置 MongoDB 環境。
2 min read
ES6: 用 Promise 處理非同步問題
寫程式

ES6: 用 Promise 處理非同步問題

透過 Promise 處理非同步操作，可確保事件完成後再執行。我們會在 Promise 建構函式中使用 resolve 或 reject 來控制執行流程。當執行非同步事件時，Promise 會維持 pending 狀態，直到事件完成並呼叫 resolve 成為 fulfilled 或因錯誤而呼叫 reject 成為 rejected。使用 then、catch、finally 來處理 Promise 的結果，以確保非同步操作的正確性和時序。
5 min read
ES7: 用 Async/Await 處理非同步問題
寫程式

ES7: 用 Async/Await 處理非同步問題

在這篇文章中，我們探討了如何使用 ES7 的 async/await 來處理非同步問題。透過 async 聲明異步函式和 await 暫停異步函式的執行，可以使非同步操作以近似同步的方式進行，這不僅提升了程式的可讀性，也使錯誤處理變得更加直觀。此外，示例中展示了如何利用 try...catch 處理異步操作中可能出現的錯誤，保證異步邏輯的完整性和穩健性。通过学习 async/await，開發者可以更有效地管理和維護異步程序。
2 min read
處理非同步問題的三種方式
寫程式

處理非同步問題的三種方式

在這篇文章中，我探討了三種處理非同步問題的方式：Callback、Promise 以及 Async/Await。透過詳細的範例和說明，我解釋了這些技術如何幫助開發者有效管理非同步操作，確保應用程序的流暢執行。每種技術都有其適用場景，從 Callback 的基礎應用到 Promise 的鏈式操作，再到 Async/Await 的直觀語法，這些方法都是現代 JavaScript 開發中不可或缺的技能。
1 min read
JavaScript: Node.js 是其執行環境
寫程式

JavaScript: Node.js 是其執行環境

V8 是 Google 開發的開源 JavaScript 引擎，用於編譯 JavaScript 使其能夠在 Chrome 和 Node.js 中執行。作為一個直譯語言，JavaScript 在執行時需要一個執行環境，而 Node.js 提供了這樣的環境，使得 JavaScript 能夠脫離瀏覽器運行。為了兼顧直譯語言的靈活與編譯語言的效能，V8 採用了即時編譯（JIT）的技術，這種技術在執行 JavaScript 時，能夠即時將程式碼編譯成機器碼，大大提高了執行效率。
1 min read
JavaScript 中 Math 函式 Method 整理
寫程式

JavaScript 中 Math 函式 Method 整理

我這篇文章整理了 JavaScript 中 Math 函式庫的常用方法，包括取絕對值的 Math.abs(x)、無條件進位的 Math.ceil(x)、無條件捨去的 Math.floor(x)、四捨五入的 Math.round(x)，以及去除小數點的 Math.trunc(x)。還有生成隨機數的 Math.random()、找最大最小值的 Math.max(...array) 和 Math.min(...array)，判斷數值型態的 Math.sign(x)，以及計算次方的 Math.pow(base, exponent)。這些方法幫助我在處理數學計算時更加便捷。
2 min read
分支限界法 （Branch-and-Bound）
寫程式

分支限界法 （Branch-and-Bound）

我的理解是，分支限界法 （Branch and Bound）有點貪婪演算法（Greedy Algorithm）和回溯法（Backtracking）的精神。(可見 回溯法（Backtracking）和 貪婪演算法（Greedy Algorithm）文章)。在每次做出選擇當下選擇最優解，並且將找到的最短路徑作為新的約束條件，若在遍歷過程中不符合此約束條件，就退回一步甚至是上幾步的計算重新選擇。
1 min read