歡迎來到軟體技術部落格,這裡是 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)中進行管理。這種架構的優勢在於可以增加程式碼的可重用性,提高代碼的透明度,確保所有套件使用相同的版本,以及統一程式碼風格。