軟體技術部落格

歡迎來到軟體技術部落格,這裡是 React、JavaScript 及技術技能的知識文章頁面。無論是在尋找關於monorepo 的技術、zustand 的狀態管理技巧,還是希望加強對前端開發的理解,這裡都有豐富的資源。每篇文章都精心撰寫,旨在提供清晰、易於理解的內容,幫助大家快速找到所需資訊。從基本概念到進階技巧,無論是初學或是進階,這裡都有適合大家的內容。如果對於圖文式內容有興趣,也可以參考我們 Instagram

system-design-系統設計12-CDN-基礎概念與設計-how-cdn-work-hogantech
技術文章
Hogan

CDN 基礎概念與設計 – 系統設計 12

CDN 是一組根據地理位置去做置放的代理伺服器(Proxy Server)。其中,代理伺服器是客戶端和伺服器之間的中間伺服器,代理伺服器也會放置在網路邊緣(Network Edge)。也因為網路邊緣靠近最終用戶,代理伺服器的放置有助於透過減少延遲和節省頻寬來快速將對應的資料傳送給使用者。CDN 除了作為簡單的代理伺服器之外還,也可以透過一些設定以及操作讓他們變得更有效率。

閱讀更多 »
0710 Anthropic
科技新創專欄
Roxanne

Anthropic:GPT-4 最強大對手 Claude 3.5 的背後推手,如何打造更「合規」的 AI 大型語言模型?

隨著科技業資金大量流入 AI 領域,透過了解各種 AI 新創公司的募資狀況、背後理念,也能對未來人工智慧趨勢有更明確的認知。
就生成式 AI 與大型語言模型的新創為例,可不只有 OpenAI 一支獨秀,從背後開始有科技巨頭 Amazon, Google 巨額投資撐腰,Anthropic 無疑成為暨 OpenAI 後今年最受矚目的獨角獸。

Anthropic 到底是一間怎樣的公司?為何創辦人要與 OpenAI 分家?兩間公司的戰略地位有什麼不同?

今天就來跟大家分享 Anthropic 的故事!

閱讀更多 »
zapier 5
科技新創專欄
Roxanne

Zapier : 50 億估值的自動化之王,如何在 3 年內獲得超過 60 萬用戶?

在這個人人手邊不缺強大工具的時代,各種AI、生產力工具正在爭先恐後幫助我們節省更多時間。但每種工具的使用場景、優點都不同,要將這些不同屬性的軟體整合到工作流中往往要耗費很多時間。Zapier 的出現就是為了解決這個隨著工具分工越來越細、種類越來越多必然會產生的問題。

閱讀更多 »
ScaleAI
科技新創專欄
Roxanne

解密 Scale AI:人工智慧背後的「工人」智慧?資料標記獨角獸 8 年達 73 億美元估值背後的秘辛

19 歲時就輟學成立 Scale AI,Alexandr 説,Scale AI 提供資料標記服務,就像在這股生成式 AI 淘金熱中賣鏟子(這個描述有沒有似曾相識呢😆)。

在許多 AI 新創公司還沒有賺到一毛錢時,Scale AI 去年營收已達 2.5 億美元,估值達到73億美元,客戶從 OpenAI , Tesla 到美國空軍、陸軍、中央情報局等多個領域。

那麼資料標記究竟是什麼?為何可以那麼賺錢?Scale AI 是如何在競爭激烈的 AI 領域找到自己的利基 (niche)市場,順利長成獨角獸呢?

今天就來跟大家分享 Scale AI 的故事!

閱讀更多 »
system-design-系統設計11-鍵值資料儲存-key-value-store-introductoin-to-database-fundamentals-hogantech
技術文章
Hogan

Key-Value Store 鍵值資料儲存解說 – 系統設計 11

鍵值資料儲存(Key-Value Store)是一種分散式雜湊表(Distributed Hash Table),其中DHT是一種去中心化儲存方式,提供類似雜湊表的查找、儲存。雜湊表(Hash Table) 也是一個 Abstract Data Type (ADT),它的優點是通常可以用比較快的時間完成 Search operation 的動作。

閱讀更多 »
naughtyghost-頑皮鬼-隱形筆電支架
心得
Roxanne

頑皮鬼 Life 隱形筆電支架:工程師肩頸痠痛的救星

身為軟體工程師和研究生,工作、處理報告基本上完全離不開電腦。如果需要轉換工作地點,如在家或辦公室、客戶端等,這樣頻繁移動最大的困擾就是:希望隨時隨地、出門在外都能擁有一個舒適的工作環境!
在家或許可以設計一個舒適的工作空間來使用筆電,但如果在外工作、打報告真的必須仰賴筆電架的幫忙。
但市面上的筆電支架通常都蠻笨重、體積大,為了不想增加重量,多數時間寧可選擇只帶筆電出門。結果就是長時間低頭工作,肩頸酸痛,效率大打折扣。

閱讀更多 »
system-design-系統設計10-資料複製-data-partitioning-introductoin-to-database-fundamentals-hogantech
技術文章
Hogan

Data Partitioning 資料分區是什麼? – 系統設計 10

資料分區 (Data Partitioning) 是將資料庫中的資料分割成更小、更易於管理的子區塊的過程。這些子區塊稱為分區 (Partition)。資料分割可以根據多種因素進行,例如:時間、客戶 ID 或產品類別。為何要進行資料分區呢?對於任何不對擴增的系統,資料量也會持續增長,並且針對資料庫的讀寫流量也會越來越大。

閱讀更多 »
system-design-系統設計09-資料複製-data-replication-introductoin-to-database-fundamentals-hogantech-hoganblab
技術文章
Hogan

Data Replication 如何優化資料庫?- 系統設計 09

資料複製(Data Replication)是一種有效解決瓶頸的方法,可以通過在多個節點上複製資料來提高資料庫的效能、可擴展性和可用性。本文將介紹資料複製的三種主要模型:主從複製(Single-leader replication)、多領導者複製(Multi-leader replication)和點對點複製(Leaderless replication),並分析它們的優缺點。

閱讀更多 »
NVIDIA-STORY
心得
Roxanne

解密輝達 NVIDIA: 6個重點帶你搞懂 AI 之王股價翻漲 240% 的秘密 (上)

在被喻為「生成式 AI 元年」的2023,科技巨頭相繼推出 AI 武器,如 Microsoft Copilot, Bing, AWS BedRock…,連 Elon Musk 都宣布為打造 Tesla 電動車的超級大腦:Dojo 超級電腦,AI 為科技巨頭開啟了新局。
而正所謂在戰爭期間,最賺錢的是軍火商;在淘金熱時,最賺錢的是賣鏟子的人,
現階段的 NVIDIA 輝達就是這樣的存在。

閱讀更多 »
system-design-系統設計08-資料庫基礎介紹-introductoin-to-database-fundamentals-hogantech-hoganblab
技術文章
Hogan

資料庫基礎介紹 – 系統設計 08

什麼是資料庫?資料庫是結構化資訊或資料的有組織的集合,通常以電子方式儲存在電腦系統中。 資料庫通常由資料庫管理系統(DBMS)控制。資料和 DBMS 以及與其關聯的應用程式一起被稱為資料庫系統,通常簡稱為資料庫。
當今運行的最常見資料庫類型中的資料通常以一系列表中的行和列進行建模,以提高處理和資料查詢的效率。 然後可以輕鬆存取、管理、修改、更新、控制和組織資料。 大多數資料庫使用結構化查詢語言(SQL)來寫入和查詢資料。

閱讀更多 »
appier 0
心得
Roxanne

台灣第一隻 AI 獨角獸: 市值 13.8 億美元的 Appier 沛星到底在做什麼?

你知道台灣第一隻新創獨角獸是誰嗎?(獨角獸定義:公司成立不到 10 年,但估值達 10 億美元以上,且還未在股票市場上市的科技公司)
從 2012 年 6 月創立到 2021 年上市,Appier 沛星互動科技只用了 8 年 9 個月,成為了台灣首家被紅杉資本投資的AI獨角獸公司。與科技巨頭 Google 6年、Facebook 8年、Uber 10年相比,Appier 在極短的時間便達成上市成就。

閱讀更多 »
notion startup insight
心得
Roxanne

解密 Notion 創業故事: 一個 No code 的小創意,如何顛覆全球600億生產力市場?

身為規劃狂 J 人,用過各種生產力軟體,如 Evernote, Obsidian 等,但最後還是回歸 Notion 的懷抱,畢竟 Notion 的操作真的最直觀、介面最美觀。把生活搬上 Notion 後,因為可以根據自己的習慣全然客製化,真的有長出第二個大腦的感受。

使用的過程我也不禁好奇,Notion 這個「生活黑客」的點子到底是什麼被想出來的?Notion 這間公司背後有什麼有趣的創業故事?

於是我深入了解創辦人的背景、Notion 獨特的競爭優勢,今天就來分享這間傳奇公司的創辦故事、產品特色、和 Notion 如何在生產力市場站穩腳跟吧!

閱讀更多 »
system-design-系統設計07-系統設計元件-what-is-load-balancer-hogantech-hoganblab
技術文章
Hogan

負載平衡器解說 – 系統設計 07

負載平衡器(Load Balancer)是什麼?負載平衡器主要是將所有用戶端的請求,根據當前伺服器負載的情況,進行分配到對應的伺服器。這樣的好處是避免伺服器過載或是崩潰。不過這邊也可以思考一下,如果當前系統的流量不高,大約只有每秒幾千個請求,則可能不太需要負載平衡器,畢竟一個系統越複雜,則需要考慮的事情越多。

閱讀更多 »
system-design-系統設計06-系統設計元件-what-is-dns-hogantech-hoganblab
技術文章
Hogan

DNS 是什麼?網域名稱系統介紹 – 系統設計 06

什麼是 DNS? 網域名稱系統 (DNS) 會將可以閱讀的網域名稱對應到機器可讀的 IP 位址,例如:google.com 對應的IP為142.250.191.78 。當使用者在瀏覽器中輸入網域名稱時,瀏覽器必須透過 DNS 將網域名稱轉換為 IP 位址。一旦獲得所需的 IP 位址,使用者的請求就會轉送到目標伺服器。

閱讀更多 »
system-design-系統設計05-系統設計元件-building-block-hogantech
技術文章
Hogan

系統設計元件介紹 Building Block – 系統設計 05

系統元件是系統設計的基本模組塊,它們可以被組合起來,用來建構出複雜的軟體系統。這邊也來複習一下系統設計基本概念,系統設計是軟體工程中的一個重要環節,它涉及到軟體系統的整體架構和設計。一個好的系統設計可以使軟體系統更加可靠、可擴展和易於維護。

當然如果要使用這些元件去設計系統,勢必需先了解到底有哪些設計元件?每個設計元件代表的意義又是什麼?這一篇文章會簡介每一個系統元件,後面的篇章則是會詳細講解每一個元件的細節以及應用。

閱讀更多 »
system-design-系統設計04-封底計算-back-of-the-envelope-hogantech-hoganblab
技術文章
Hogan

Back-of-the-envelope 封底計算 – 系統設計 04

Back-of-the-envelope 又稱為封底計算,是用簡單估算來計算複雜問題的近似值的方法。

這邊也複習一下,分散式系統由透過網路連接的運算節點組成。這些節點可以是各種類型的伺服器,例如網頁伺服器、應用程式伺服器和儲存伺服器。

在設計分散式系統時,了解每個節點可以處理的請求數量非常重要。同時我們也可以確定所需的節點數量以及流量,因此我們會使用 Back-of-the-envelope 來去計算我們的粗估值,最終來設計我們所需的系統。

閱讀更多 »
system-design-系統設計03-軟體設計非功能性特性-hogantech-hoganblab
技術文章
Hogan

軟體設計非功能性特性 – 系統設計 03

在現代資訊科技中,系統的可用性(Availability)、可靠性(Reliability)、可擴展性(Scalability)、可維護性(Maintainability)以及容錯性(Fault Tolerance)是非常重要的非功能性特性,這些特性不僅影響了軟體系統的性能、效率,也會直接影響使用者體驗。這一篇文章也會針對上述五個特性去做深入講解。

閱讀更多 »
system-design-系統設計-抽象在系統設計中的應用-hogantech-hoganblab
技術文章
Hogan

抽象在系統設計中的應用 – 系統設計 02

什麼是抽象(abstract)? 抽象的概念,可以幫助我們在系統設計時,隱藏一些無關緊要的細節,讓我們能夠專注於整體架構。脫離細節是一件很重要的事情,因為抽象可以隱藏了系統設計內部的複雜性,從而讓我們更專注於,系統設計的結果。

閱讀更多 »
React11-React-Hook-useState
Javascript
Hogan

React Hook useState – React 白話文運動 11

useState 是什麼?useState 是 React 中的一個 Hook,用於在函式元件中添加狀態,透過 useState,我們可以在函式元件中定義和管理狀態資料。useState 返回一個包含兩個值的陣列,其中包括:當前的狀態:在元件首次渲染時,它的值將等同於我們傳遞給 useState 的初始值。

閱讀更多 »
system-design-系統設計-系統設計介紹-hogantech-hoganblab
技術文章
Hogan

現代系統設計介紹 – 系統設計 01

系統設計是一個定義各種系統元件、API、資料模型以及整合系統的過程,用來完成一定功能要求的大規模系統。以設計一個像Youtube這樣的視頻播放平台為例,我們不僅需要考慮如何高效地儲存和傳輸大量視頻數據,還要考慮如何支持高並發(High Concurrency)的使用者需求,以及如何保證系統的穩定性和可擴展性。

閱讀更多 »
React10-React-Life-Cycle
React 白話文運動
Hogan

React 生命週期 – React 白話文運動 10

React 生命週期 – 前一篇則針對 React 語法進一步做講解, React JSX – React 白話文運動 06 學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這一篇則會針對元件,講解元件的生命週期,包含:生命週期三個階段、類別物件的生命週期、函式物件的生命週期。

閱讀更多 »
logo00-Dcard-hogantech
心得
Hogan

Dcard 12 週年慶 驚喜原產地

今年 Dcard 邀請所有畢業夥伴參加 Dcard 12 週年慶 – 驚喜原產地的活動。想藉由Dcard這個平台來與大家分享這次的活動,包含辦公室、活動照片、食物… 等等。

閱讀更多 »
React Props - React 白話文運動 09
React 白話文運動
Hogan

React Props – React 白話文運動 09

React Props – React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。

閱讀更多 »
React08-建立React專案
React 白話文運動
Hogan

建立React專案 – React 白話文運動 08

建立React專案-React白話文運動:前一篇文章介紹了三個名詞,分別是:Babel 是什麼?Webpack 是什麼?Npm 是什麼?這一篇則是會手把手建立 React 專案,包含:建置環境、建立 React 專案、啟動專案、如何使用 React 擴充套件。這邊也包含:官方 CRA 建置環境以及自建環境。

閱讀更多 »
Babel & Webpack & NPM – React 白話文運動 07
React 白話文運動
Hogan

Babel & Webpack & NPM – React 白話文運動 07

這一篇會針對三個名詞做一些解釋,這些名詞是建立 React 專案,需要會的工具,包含了:Babel 是什麼?Webpack 是什麼?Npm 是什麼?當然主要介紹的是使用這些工具的概念,但是還是有其他工具可以做選擇,例如:Npm 之於 Yarn。

閱讀更多 »
React06-React-JSX
React 白話文運動
Hogan

React JSX – React 白話文運動 06

React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發,使開發人員能夠創建可重覆使用的元件來完成前端頁面。JSX 也是目前我們比較常看到的 React 寫法 ,因此接下來會介紹,JSX 是什麼?JSX 語法以及使用 JSX 建構 React 元件。

閱讀更多 »
React 運作原理
React 白話文運動
Hogan

React 運作原理 – React 白話文運動 05

React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta(前身為 Facebook)開發,使開發人員能夠創建可重覆使用的元件來完成前端頁面。

不過這邊要注意,嚴格說起來,React 並不是一個框架。這是因為它只負責呈現 UI 的元件。不過,React 為 Angular 和 Vue 等框架提供了另一種解決方式,使我們可以與它一起完成覆雜的前端頁面功能。

閱讀更多 »
2023 Yahoo! Software Engineer 軟體工程師面試心得
心得
Hogan

2023 Yahoo! Software Engineer 軟體工程師面試心得

Yahoo! 軟體工程師面試,偏向前端的軟體工程師,除了前端開發以外,也需要接觸後端開發以及專案管理。當時我從 LinkedIn 看到該職缺資訊時,請朋友內推的,也透過我朋友大致上了解這個職位是跨國團隊,日常開會也需要使用英文,並且可能有時差。

閱讀更多 »
成大電機轉學考
心得
Hogan

107成大電機|成大機械|政大應數轉學考心得

這篇文章其實是 2018 年寫的,現在2023年,將心得文章搬遷至自己的部落格,也成功從成大電機畢業了。感謝當時年輕的我咬牙去面對轉學考,認真說起來,轉學考真的是目前人生中,最艱難的一段時刻。最後希望這篇文章對任何在準備轉學考的人有幫助!

閱讀更多 »
Javascript 高階函式 -HigherOrderFunction
Javascript
Hogan

JavaScript 高階函式 – React 白話文運動 04

這一篇會介紹非常重要的 JavaScript 函式概念 – 高階函式(Higher-order function),高階函數是將一個或多個函數作為參數,或將一個函數作為結果返回的函數。在本文中,我們將深入探討什麽是高階函數、使用高階函數的好處以及如何在實際應用中使用高階函數,函式導向是什麼?純函式、高階函式、柯理化。

閱讀更多 »
React03-Javascript-Async-Await
Javascript
Hogan

JavaScript Async & Await – React 白話文運動 03

歡迎來到 React 白話文運動系列的第三篇,今天我們將深入探討 JavaScript 中的非同步操作,並介紹兩個重要的關鍵字:Async 與 Await。在這篇文章中,我們將透過實例演示非同步操作的概念,以及如何使用 Promise、Fetch、Async 和 Await 來更有效地處理非同步程式碼。

閱讀更多 »
react-vernacular-campaign-02 JavaScript ES6 Object
Javascript
Hogan

JavaScript ES6 Object – React 白話文運動 02

前一篇 JavaScript ES6 介紹了,let、const、var 差異、樣板字面值、箭頭函式。這一篇文章則會介紹 JavaScript ES6 其他新穎的語法,例如:物件解構、物件語法強化、陣列解構、延展運算子,希望透過以上的內容,可以幫助大家更容易學習 React 前端框架。

閱讀更多 »
react-vernacular-campaign-01 JavaScript ES6
Javascript
Hogan

JavaScript ES6 – React 白話文運動 01

在進入到 React 前端框架之前,來幫讀者複習有關 JavaScript 的知識。此篇著重,JavaScript 的歷史、let & const & var 差異、樣板字面值( Template Literals )、箭頭函式( Arrow Function ) JavaScript ES6 一個非常重要的前置知識。

閱讀更多 »
zustand
技術文章
Hogan

Zustand 是什麼? React 前端狀態管理

無論是使用 Redux 或是 Context 來去處理狀態管理,相對於 Zustand 都比較複雜,對於之後再加入此專案的工程師來說,勢必又是需要花時間去理解的。 Zustand 最主要的目標就是讓前端狀態管理,相對簡潔易懂,也讓 Zustand 成為一些公司的選擇。

閱讀更多 »
nx-monorepo
技術文章
Hogan

為何大公司都使用Nx ? Monorepo工具 5 分鐘快速建置

Nx 與知名程式編輯器 VS Code 有著相同的設計哲學,在VSCode 之中,即便不下載任何擴充,也可以有相當好的產出。
Nx也是相同的,以Nx核心來說,擁有著簡潔、不模糊、明瞭的特性。且以Nx 外掛套件(plugin)來說,可以根據不同的專案去做不同的選擇。

閱讀更多 »
monorepo
技術文章
Hogan

你真的懂Monorepo? 5 分鐘帶你認識前端大型架構

Monorepo是一個將大量程式碼集中管理的架構,與傳統的分離式專案有所不同。它的核心思想是將所有前端相關的程式碼放在同一個代碼庫(repository)中進行管理。這種架構的優勢在於可以增加程式碼的可重用性,提高代碼的透明度,確保所有套件使用相同的版本,以及統一程式碼風格。

閱讀更多 »
zh_TW繁體中文