歡迎來到軟體技術部落格，這裡是 React、JavaScript 及技術技能的知識文章頁面。無論是在尋找關於monorepo 的技術、zustand 的狀態管理技巧，還是希望加強對前端開發的理解，這裡都有豐富的資源。每篇文章都精心撰寫，旨在提供清晰、易於理解的內容，幫助大家快速找到所需資訊。從基本概念到進階技巧，無論是初學或是進階，這裡都有適合大家的內容。如果對於圖文式內容有興趣，也可以參考我們 Instagram。
負載平衡器解說 – 系統設計 07
負載平衡器（Load Balancer）是什麼？負載平衡器主要是將所有用戶端的請求，根據當前伺服器負載的情況，進行分配到對應的伺服器。這樣的好處是避免伺服器過載或是崩潰。不過這邊也可以思考一下，如果當前系統的流量不高，大約只有每秒幾千個請求，則可能不太需要負載平衡器，畢竟一個系統越複雜，則需要考慮的事情越多。
從 Zeabur 來講解 IaaS & PaaS & SaaS 是什麼？雲端服務模型介紹！
Zeabur 是什麼？ Zeabur 是專為現代開發者設計的 PaaS，無論你使用什麼程式語言或開發框架，只需要幾分鐘的一鍵部署，無痛把前後端、資料庫、物件儲存等服務一站式整合到 Zeabur。
DNS 是什麼？網域名稱系統介紹 – 系統設計 06
什麼是 DNS？ 網域名稱系統 (DNS) 會將可以閱讀的網域名稱對應到機器可讀的 IP 位址，例如：google.com 對應的IP為142.250.191.78 。當使用者在瀏覽器中輸入網域名稱時，瀏覽器必須透過 DNS 將網域名稱轉換為 IP 位址。一旦獲得所需的 IP 位址，使用者的請求就會轉送到目標伺服器。
系統設計元件介紹 Building Block – 系統設計 05
系統元件是系統設計的基本模組塊，它們可以被組合起來，用來建構出複雜的軟體系統。這邊也來複習一下系統設計基本概念，系統設計是軟體工程中的一個重要環節，它涉及到軟體系統的整體架構和設計。一個好的系統設計可以使軟體系統更加可靠、可擴展和易於維護。
當然如果要使用這些元件去設計系統，勢必需先了解到底有哪些設計元件？每個設計元件代表的意義又是什麼？這一篇文章會簡介每一個系統元件，後面的篇章則是會詳細講解每一個元件的細節以及應用。
Back-of-the-envelope 封底計算 – 系統設計 04
Back-of-the-envelope 又稱為封底計算，是用簡單估算來計算複雜問題的近似值的方法。
這邊也複習一下，分散式系統由透過網路連接的運算節點組成。這些節點可以是各種類型的伺服器，例如網頁伺服器、應用程式伺服器和儲存伺服器。
在設計分散式系統時，了解每個節點可以處理的請求數量非常重要。同時我們也可以確定所需的節點數量以及流量，因此我們會使用 Back-of-the-envelope 來去計算我們的粗估值，最終來設計我們所需的系統。
軟體設計非功能性特性 – 系統設計 03
在現代資訊科技中，系統的可用性（Availability）、可靠性（Reliability）、可擴展性（Scalability）、可維護性（Maintainability）以及容錯性（Fault Tolerance）是非常重要的非功能性特性，這些特性不僅影響了軟體系統的性能、效率，也會直接影響使用者體驗。這一篇文章也會針對上述五個特性去做深入講解。
抽象在系統設計中的應用 – 系統設計 02
什麼是抽象（abstract）？ 抽象的概念，可以幫助我們在系統設計時，隱藏一些無關緊要的細節，讓我們能夠專注於整體架構。脫離細節是一件很重要的事情，因為抽象可以隱藏了系統設計內部的複雜性，從而讓我們更專注於，系統設計的結果。
React Hook useState – React 白話文運動 11
useState 是什麼？useState 是 React 中的一個 Hook，用於在函式元件中添加狀態，透過 useState，我們可以在函式元件中定義和管理狀態資料。useState 返回一個包含兩個值的陣列，其中包括：當前的狀態：在元件首次渲染時，它的值將等同於我們傳遞給 useState 的初始值。
現代系統設計介紹 – 系統設計 01
系統設計是一個定義各種系統元件、API、資料模型以及整合系統的過程，用來完成一定功能要求的大規模系統。以設計一個像Youtube這樣的視頻播放平台為例，我們不僅需要考慮如何高效地儲存和傳輸大量視頻數據，還要考慮如何支持高並發（High Concurrency）的使用者需求，以及如何保證系統的穩定性和可擴展性。
Web Beacon 網路信標是什麼？除了 Cookie 以外，你需要了解的工具
網絡信標是 20 世紀末，網路興起的產物，出現於 1990 年代末。隨著越來越多的人開始使用網際網路，企業需要一種機制來收集、理解並應用大規模的使用者數據。Web Beacons 可以與 Cookie 一起工作，深入了解用戶行為，追蹤多個網站。
React 生命週期 – React 白話文運動 10
React 生命週期 – 前一篇則針對 React 語法進一步做講解， React JSX – React 白話文運動 06 學會了如何建立一個 React 元件，並且學會了元件之間有父子元件的關係。這一篇則會針對元件，講解元件的生命週期，包含：生命週期三個階段、類別物件的生命週期、函式物件的生命週期。
Dcard 12 週年慶 驚喜原產地
今年 Dcard 邀請所有畢業夥伴參加 Dcard 12 週年慶 – 驚喜原產地的活動。想藉由Dcard這個平台來與大家分享這次的活動，包含辦公室、活動照片、食物… 等等。
React Props – React 白話文運動 09
React Props – React 白話文運動。這一篇則會針對 React 語法進一步做講解， 前幾篇也學會了如何建立一個 React 元件，並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念，包含了：React 元件宣告、React Props。
建立React專案 – React 白話文運動 08
建立React專案-React白話文運動：前一篇文章介紹了三個名詞，分別是：Babel 是什麼？Webpack 是什麼？Npm 是什麼？這一篇則是會手把手建立 React 專案，包含：建置環境、建立 React 專案、啟動專案、如何使用 React 擴充套件。這邊也包含：官方 CRA 建置環境以及自建環境。
Babel & Webpack & NPM – React 白話文運動 07
這一篇會針對三個名詞做一些解釋，這些名詞是建立 React 專案，需要會的工具，包含了：Babel 是什麼？Webpack 是什麼？Npm 是什麼？當然主要介紹的是使用這些工具的概念，但是還是有其他工具可以做選擇，例如：Npm 之於 Yarn。
React JSX – React 白話文運動 06
React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發，使開發人員能夠創建可重覆使用的元件來完成前端頁面。JSX 也是目前我們比較常看到的 React 寫法 ，因此接下來會介紹，JSX 是什麼？JSX 語法以及使用 JSX 建構 React 元件。
React 運作原理 – React 白話文運動 05
React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta（前身為 Facebook）開發，使開發人員能夠創建可重覆使用的元件來完成前端頁面。
不過這邊要注意，嚴格說起來，React 並不是一個框架。這是因為它只負責呈現 UI 的元件。不過，React 為 Angular 和 Vue 等框架提供了另一種解決方式，使我們可以與它一起完成覆雜的前端頁面功能。
2023 Yahoo! Software Engineer 軟體工程師面試心得
Yahoo! 軟體工程師面試，偏向前端的軟體工程師，除了前端開發以外，也需要接觸後端開發以及專案管理。當時我從 LinkedIn 看到該職缺資訊時，請朋友內推的，也透過我朋友大致上了解這個職位是跨國團隊，日常開會也需要使用英文，並且可能有時差。
107成大電機｜成大機械｜政大應數轉學考心得
這篇文章其實是 2018 年寫的，現在2023年，將心得文章搬遷至自己的部落格，也成功從成大電機畢業了。感謝當時年輕的我咬牙去面對轉學考，認真說起來，轉學考真的是目前人生中，最艱難的一段時刻。最後希望這篇文章對任何在準備轉學考的人有幫助！
JavaScript 高階函式 – React 白話文運動 04
這一篇會介紹非常重要的 JavaScript 函式概念 – 高階函式（Higher-order function），高階函數是將一個或多個函數作為參數，或將一個函數作為結果返回的函數。在本文中，我們將深入探討什麽是高階函數、使用高階函數的好處以及如何在實際應用中使用高階函數，函式導向是什麼？純函式、高階函式、柯理化。
JavaScript Async & Await – React 白話文運動 03
歡迎來到 React 白話文運動系列的第三篇，今天我們將深入探討 JavaScript 中的非同步操作，並介紹兩個重要的關鍵字：Async 與 Await。在這篇文章中，我們將透過實例演示非同步操作的概念，以及如何使用 Promise、Fetch、Async 和 Await 來更有效地處理非同步程式碼。
JavaScript ES6 Object – React 白話文運動 02
前一篇 JavaScript ES6 介紹了，let、const、var 差異、樣板字面值、箭頭函式。這一篇文章則會介紹 JavaScript ES6 其他新穎的語法，例如：物件解構、物件語法強化、陣列解構、延展運算子，希望透過以上的內容，可以幫助大家更容易學習 React 前端框架。
JavaScript ES6 – React 白話文運動 01
在進入到 React 前端框架之前，來幫讀者複習有關 JavaScript 的知識。此篇著重，JavaScript 的歷史、let ＆ const ＆ var 差異、樣板字面值（ Template Literals ）、箭頭函式（ Arrow Function ） JavaScript ES6 一個非常重要的前置知識。
Zustand 是什麼？ React 前端狀態管理
無論是使用 Redux 或是 Context 來去處理狀態管理，相對於 Zustand 都比較複雜，對於之後再加入此專案的工程師來說，勢必又是需要花時間去理解的。 Zustand 最主要的目標就是讓前端狀態管理，相對簡潔易懂，也讓 Zustand 成為一些公司的選擇。
為何大公司都使用Nx ? Monorepo工具 5 分鐘快速建置
Nx 與知名程式編輯器 VS Code 有著相同的設計哲學，在VSCode 之中，即便不下載任何擴充，也可以有相當好的產出。
Nx也是相同的，以Nx核心來說，擁有著簡潔、不模糊、明瞭的特性。且以Nx 外掛套件（plugin）來說，可以根據不同的專案去做不同的選擇。
你真的懂Monorepo？ 5 分鐘帶你認識前端大型架構
Monorepo是一個將大量程式碼集中管理的架構，與傳統的分離式專案有所不同。它的核心思想是將所有前端相關的程式碼放在同一個代碼庫（repository）中進行管理。這種架構的優勢在於可以增加程式碼的可重用性，提高代碼的透明度，確保所有套件使用相同的版本，以及統一程式碼風格。
繁體中文 
English 
简体中文 
한국어 
日本語 
Español