iT邦幫忙

frontend相關文章
共有 330 則文章

技術 我從 Angular 中分離出來依賴註入:`static-injector`

Angular 中的依賴註入確實非常好用,可以使服務之間的依賴關系變得更加靈活和可復用 但是只能在 Angular 中的使用限製了他的發揮,需要讓他在所有 n...

鐵人賽 自我挑戰組 DAY 30

技術 [Day 30] 網路常識 - (15) HTTPS - 我是誰? 用 CA 憑證來表明自己

前言 經過上一篇的解說,我們知道,就算利用的非對稱加密這種聰明的方法,仍舊還是不夠,所以,我們需要一種更安全的方式,來保證我們的傳輸是安全的,也就是現在 HTT...

鐵人賽 自我挑戰組 DAY 28

技術 [Day28] 使用者頁面和更新使用者資料開發

大綱 使用者頁面開發 更新使用者資料 1. 使用者頁面開發 Wireframe 建立檔案 一樣先在pages資料夾底下建立Profile.js在這個頁面...

鐵人賽 自我挑戰組 DAY 26

技術 [Day26]發布文章頁面開發和React Quill使用

大綱 Wireframe Quill.js介紹 發布文章頁面開發 1. Wireframe 2. Quill.js介紹 Quill 是一個開源且極具彈性...

鐵人賽 自我挑戰組 DAY 26

技術 [Day 26] 網路常識 - (12) HTTP 的發展史 - HTTP/2.0: 改善應用層的效能 (待補)

HTTP/2 主要是要解決 HTTP 1.1 什麼問題? HTTP 1.X 文本傳輸造成解析緩慢 HTTP 1.X 的效能問題 HTTP 1.0 在一個 TCP...

鐵人賽 自我挑戰組 DAY 25

技術 [Day25] 文章列表頁和標籤頁開發

今天這兩個頁面比較單純的只是呼叫API去取得當前的資料,並顯示於頁面上。 大綱 文章列表頁開發 標籤頁開發 路由設定 1.文章列表頁開發 Wireframe...

鐵人賽 自我挑戰組 DAY 25

技術 [Day 25] 網路常識 - (11) HTTP 的發展史 - 簡單易用的 HTTP 0.9 ~ 1.1

HTTP 發展史簡介 今天又是新的網路常識主題: HTTP,我會就我所知道的來介紹 HTTP 的發展史,主要介紹 HTTP 0.9 ~ HTTP 3.0 的時空...

鐵人賽 自我挑戰組 DAY 24

技術 [Day24] 框架頁面和首頁切版

大綱 建立Layout頁面 首頁切版 前言 我們昨天開發出了導覽列,但我們接下來的頁面都會需要導覽列,最直覺的做法就是在每個Component裡面放進去He...

鐵人賽 自我挑戰組 DAY 24

技術 [Day 24] 網路常識 - (10) TCP connection 沒有你想像的簡單! 細談大量 TCP 連結的效能問題和資安問題

在建立 TCP connection 時,實際情況不是發出一個 request,server 就會馬上處理,可能同時還有許多 user 想建立 TCP conn...

鐵人賽 自我挑戰組 DAY 23

技術 [Day23] 導覽列開發

先前我們已經將登入和註冊頁開發完,今天要來進行導覽列的開發。 大綱 Wireframe 導覽列開發 未登入的導覽列 已登入的導覽列 使用者功能列 1...

鐵人賽 自我挑戰組 DAY 23

技術 [Day 23] 網路常識 - (9) 為什麼要知道 TCP 四次握手終止?四次握手過程為何?

為什麼比建立連結時多了一次 handshake ? 多了一次 handshake 的主要差別在 Server 發送 segment 時,把 FIN segme...

鐵人賽 自我挑戰組 DAY 22

技術 [Day 22] 網路常識 - (8) 為什麼要知道 TCP 三次握手?三次握手過程為何?

為什麼知道 TCP handshake 很重要? 前端面試必考 知道 TCP handshake 過程很複雜,每次建立所要花的時間和代價都很大,可以的話盡量減...

鐵人賽 自我挑戰組 DAY 20

技術 [Day20]登入頁開發和CORS處理

大綱 Wireframe 登入頁開發 CORS處理 1. Wireframe 以下是登入和註冊頁面的wireframe,樣式細節可依個人喜好調整 登入頁...

鐵人賽 自我挑戰組 DAY 17

技術 [Day17] React專案初始化

昨天快速介紹過react,今天直接進入實作 大綱 建立專案並安裝React 安裝開發用到的套件 1.建立專案並安裝React 在要新增專案的地方輸入以下指令...

鐵人賽 自我挑戰組 DAY 17

技術 [Day 17] 網路常識 - (3) 什麼是 DNS? 跟前端有什麼關係? - DNS resolver

今天一樣繼續介紹 DNS,我將介紹: DNS resolver 的運作流程 如何優化 DNS 請求 前端部署 & DNS   DNS resolve...

鐵人賽 自我挑戰組 DAY 16

技術 [Day 16] 網路常識 - (2) 什麼是 DNS? 跟前端有什麼關係? - 網路世界 & 本地 DNS cache

今天會延續 DNS 的部分,正式來解釋 DNS 如何運作,和如何優化   DNS 原理解釋 Internet 與 IP address 在解釋 DNS 前,讓我...

鐵人賽 自我挑戰組 DAY 15

技術 [Day 15] 網路常識 - (1) 什麼是 DNS? 跟前端有什麼關係? - 為什麼要知道 DNS & request 效能監控

前言 今天要來進入新的章節 - 網路常識 當在往成為更好的前端的路上,通常都會看到一些文章,講述我們需要的一些網路常識,包括: DNS HTTP / HTTP...

鐵人賽 Modern Web DAY 30

技術 前端開發環境 + React + TS

今天過後,相信小夥伴們應該對 TypeScript 有多一點點的基本認識,至於剩下的就是更高級和複雜的組合和運用,如果有興趣可以來玩玩 Type Challe...

鐵人賽 Modern Web DAY 25

技術 型別縮小 ( Narrowing )

Type Narrowing 是一種概念,指在程式碼執行過程中,根據特定條件,將變數的型別從一個較廣泛的型別縮小為較特定的型別,以提供更精確的型別資訊,這種功能...

鐵人賽 Modern Web DAY 24

技術 模組 & 命名空間 ( Modules & Namespaces )

相信使用 ES6 的小夥伴們對模組都不陌生,現代前端框架也都使用模組在運作。而模組和命名空間是兩種組織和封裝程式碼的方式,雖然它們都有類似的目標,但它們在某些方...

鐵人賽 Modern Web DAY 23

技術 類別封裝 ( Class Encapsulation )

類別封裝是一種將類別的內部細節隱藏起來,確保類別的屬性和方法在外部程式碼中不被隨意訪問,提高程式碼的可維護性和可讀性,同時提供了一定程度的安全性。 存取修飾符...

鐵人賽 Modern Web DAY 22

技術 類別 ( Classes )

在 React v16.8 之前,React 需要使用 Class 來撰寫,這也讓很多人怯步,但從 React v16.8 推出了 React Hooks 後...

鐵人賽 Modern Web DAY 20

技術 非同步處理 Ⅱ (Async / Await)

Async / Await 是 ECMAScript 8 ( ES2017 ) 引入的一個功能,它是建立在 Promise 之上的語法糖,允許我們使用 asyn...

鐵人賽 Modern Web DAY 19

技術 非同步處理 Ⅰ (Promise)

在說明 Promise 前,首先我們要知道為什麼需要有 Promise。我們知道 setTimeout() 是屬於非同步的一種,如果我們需要第一個執行完成後才執...

鐵人賽 Modern Web DAY 18

技術 null VS. undefined

null 和 undefined 代表著缺少值或未定義的狀態。儘管它們在 JavaScript 中也存在,但在 TypeScript 中,可以使用靜態型別檢查來...

鐵人賽 Modern Web DAY 17

技術 void VS. never

在上一個章節中,我們知道如果函式沒有返回值的話,可以使用 void 型別,今天我們來比較 void 和 never 的不同的情境和用途,雖然它們看起來相似,但它...

鐵人賽 Modern Web DAY 1

技術 Day 1 前言 微前端 Micro Frontend 前世今生

Micro Services 是2014年大神Martin Fowler和James Lewis提出的概念在現今雲端化 容器化的web世界 已是家餘戶曉的主流架...

鐵人賽 Modern Web DAY 16

技術 函式與 This 指向 (Function & This)

在前面幾個章節中,應該或多或少都有看到函式在 TypeScript 中的寫法,它比 JavaScript 多了參數和返回值的型別設定,我們看一下函式基本的宣告方...

鐵人賽 Modern Web DAY 15

技術 JSON to TS (Vscode 套件)

在前面的章節我們介紹了使用 interface 來聲明物件的結構和形狀,但如果我們是要接收從 api 上取得回來的資料 (我們使用 TDX 的觀光資訊 隨便其中...