系列文章
[day1]準備開賽囉
今年又來參予此項賽事，不過還是淺淺的介紹，雖然去年也是學前端的，不過掌握基礎的前端三大架構後，就可以去結合各種後端來渲染了，所以如果你只是要單純搭配後端去寫前端...
[day2]雙向通訊websocket介紹
首先介紹的是WebSocket WebSocket 是一種在單個 TCP 連接上進行全雙工（雙向）通訊的協議。它由 IETF（Internet Engineer...
[day3]WebSocket建立
昨天了解了Websocket是甚麼，那今天我們就來實際操作websocket吧 WebSocket流程 Websocket的流程給他劃成四個階段 建立Webs...
[day5]觀察WebSocket運作流程
這篇繼續延用之前的server.js設定 今天主要就是觀察Websocket的觸發過程 前端介面 首先先建立index.html <!DOCTYPE ht...
[day4]WebSocket持續連接
今天來簡單觀察下Websocket的連接與一般的http式的差別(採用fetch方式) 如何觀察 既然要觀察還是說一下觀察方式好了，簡單一點就是打開網站後開啟【...
[day6]WebSocket心跳機制
心跳機制 首先我們要先了解到，關閉瀏覽器正常會終止所有活躍的 WebSocket 連接並向伺服器發送關閉信號。然而，在某些情況下（如網絡中斷、客戶端崩潰、網絡不...
[day7]前端框架React SPA?介紹
React是一個基於javascript的函式庫 核心特性 想較于傳統基於DOM開發的優勢 1.組件化架構：讓開發者可以將應用程式劃分為小型、獨立、可重用的...
[day8]React要用VITE?CRA?NEXT.JS?
上篇講了React的特徵，那麼接下來我們就要選擇環境了 貼一下去年調查的前端語言使用率雖然應該貼在上一篇才對(在查打包工具時順手查到的) CRA 腳手架工具 C...
[day9]React建立環境CRA 對比Vite
我們終於要來建React了 上篇說了有各種環境，而要怎麼啟動呢?直接查官網就會告訴你相關指令 然後突然想到在用個Vite吧，然後可以試者run兩個空殼，可以回顧...
[day11]React基礎教學(1)列表與條件渲染
基本規則 1. 返回單一根元素 React 要求每個組件必須返回一個單一的根元素，這意味著如果你想要返回多個元素，必須用一個父元素（如 <div>）...