Sign in Subscribe

軟體工程師

A collection of 84 posts
AI 研究日誌 2
AI 工具

AI 研究日誌 2

在這篇文章中，我介紹了三個不同的AI應用：首先是「Speak」，一款使用OpenAI最新模型的英文學習app，它模擬真人對話，提供逐步遊戲化學習。接著是「ChatGPT for YouTube」，這是一款可以在YouTube旁生成總結的插件，非常適合追蹤最新技術演講的重點。最後，我探索了「Tome」，一個能夠自動擴充產生簡報內容的線上工具，儘管初期使用上有些挑戰，但它顯著提高了我的工作效率。
7 min read
AI 研究日誌 1
AI 工具

AI 研究日誌 1

在這篇文章中，我探索了三個有趣的工具，旨在提高網絡效率和創造力。首先是「ReaderGPT」，一款基於GPT-3的瀏覽器插件，儘管速度稍慢，但能有效整理各種語言的網頁重點。接著是「Bing Image Creator」，這是一款基於DALL-E模型的圖片生成工具，它免費且操作簡單，適合快速創建圖片。最後，我試用了「Clipdrop」，這個工具提供了多種圖像處理功能，包括去背景和調整光源，非常適合專業圖像處理需求。
2 min read
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
[LeetCode 核心演算法] Sliding Window 是什麼？最精簡解題技巧與常見題目
寫程式

[LeetCode 核心演算法] Sliding Window 是什麼？最精簡解題技巧與常見題目

在這篇文章中，我介紹了滑動視窗（Sliding Window）這一常用於解決字串和陣列問題的演算法技巧。滑動視窗（Sliding Window）通過靈活調整子序列的起始和結束位置，以達到在線性時間內找到符合特定條件的最長或最短子序列的目的。此方法特別適合處理需要連續資料存取的情景，如數組、鏈表或字符串等。
2 min read
[LeetCode 核心演算法]Two Pointer: 低空間複雜度，最精簡解題技巧與常見題目
寫程式

[LeetCode 核心演算法]Two Pointer: 低空間複雜度，最精簡解題技巧與常見題目

在這篇文章中，我探討了 Two Pointer 技巧，這是一種用於處理陣列、字符串或連結列表等線性數據結構的算法。通過兩種類型的指針——左右指標和快慢指標，我們可以有效解決諸如合併排序、尋找和判斷回文等問題。這種方法不僅提高了效率，還減少了額外的空間使用，使空間複雜度降低至接近 O(1)。
2 min read
網頁在 Client-Server 架構下的設計的解題技巧
寫程式

網頁在 Client-Server 架構下的設計的解題技巧

在這篇文章中，我探討了網頁在 Client-Server 架構下的設計，著重於三種主要的服務器：Web Server、Application Server 和 Database Server。這些服務器如何交互運作，不僅支援靜態和動態內容的輸出，還處理來自前端的請求並進行數據存取。通过這些基本概念的介紹，希望能幫助大家更好地理解現代網頁應用的後端架構。
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