前端三分鐘

一起用三分鐘分享技術與知識

前後端分離或在一起 (CSR 與 SSR)

從把妹角度理解前後端如何和平相處

前後端分離或是在一起間接影響網頁渲染的方式,常見的渲染形式會有用戶端渲染 (CSR) 和伺服器端渲染 (SSR) 兩種。 這就好像男女朋友是否同居一樣,會大大影響兩人的日常生活型態,分開時兩者的自由度都較高,在一起同居時總會需要考慮彼此狀態。 前後端要分離或是在一起? 渲染的方式該怎麼決定? 小編覺得也各自有各自的優缺點,接下來就來開箱 CSR 跟 SSR 吧。 Client Side Re......
me
林彥成
2022-10-02 | 4 min.

前任物品斷捨離 X 專案資料夾架構與收納

從把妹角度理解前後端如何和平相處

專案資料夾架構今天談談專案資料夾的結構,在還沒開始寫任何程式前,可以思考的是檔案要怎麼收納。 不知道各位情場高手都怎麼收納前男友或前女友們的禮物呢? 是按照物品種類來分類? 還是依照對象來分類? 或是直接丟掉? 隨著數量上升後管理的難度也會上升,以小編這幾年看過不少專案的經驗下來,覺得程式碼也跟收納一樣分成兩種流派 按照屬性分類 按照功能分類 接下來就讓我們看看兩種收納的差別吧! 屬性分......
me
林彥成
2022-09-30 | 5 min.

Git 時光機 X 專案協作與開發指南

從把妹角度理解前後端如何和平相處

Git 版本控制Git 本身是一個分散式 (一個遠端和很多本地端) 的版本控制工具,會把每次提交的內容 (commit) 用快照透過校驗碼標示並儲存起來,校驗碼概念上可以當成車廂號碼,告訴可以查看車廂中的檔案及狀態。 實際比較像資料結構中的 Linked List 透過改變指標回到某個狀態也可以自由的切割和移動節點。 本日結果 -> 昨日結果 -> 前日結果 紀錄每個提交的項目主......
me
林彥成
2022-09-29 | 6 min.

語意化版本透露什麼訊息

從把妹角度理解前後端如何和平相處

當我們使用 JavaScript 開發時,常常會需要使用 npm 進行 node_modules 的安裝,相關的使用說明可以參考前一篇寫的 NPM 常用指令教學。 在時間管理大師的世界裡,記住曾經和每個對象的回憶跟說過的話是很重要的,隨著對象越多就越有可能在某天踢到鐵板?! 如果對象與對象之間的相似性和重疊性越高,就可能面臨不敢改變的風險,譬如工作譬如興趣譬如作息譬如說過的情話,隨著時光飛逝......
me
林彥成
2022-09-28 | 3 min.



npm 入門到進階X常用指令與版本規則教學

從把妹角度理解前後端如何和平相處

npm 介紹什麼是 npm? npm 是 Node Package Manager 的縮寫,是 Node.js 預設的 node 套件管理平台,npm 本機端的相關工具在安裝 node.js 時也會一起安裝,另一套 Package Manager 本機端工具則是 Facebook 推出的 Yarn。 套件做到的事就是別人已經研究過的東西我們可以不需要再研究一次,就像增加魅力的日常穿搭或是實用......
me
林彥成
2022-09-27 | 4 min.

定義屬於你的風格 X VS Code Extensions X ESLint X Prettier

從把妹角度理解前後端如何和平相處

VS Code ExtensionsVSCode 的市集提供了相當多的 Extensions 能增進工程師的開發效能,Extensions 就像把妹神器,會幫你產出撩妹金句、決定今日穿搭 OOTD、推薦節日可以吃的餐廳或可以送的禮物。 以程式開發來說,各種語言的 Extension Pack,能快速協助我們進行相關語言的開發 React Extension Pack Node.js Ext......
me
林彥成
2022-09-26 | 3 min.

用 HTTP Cookies 記住你的曾經

從把妹角度理解前後端如何和平相處

為什麼需要 Cookie在前兩篇文章小編介紹了非同步 AJAX和網頁即時通訊技術,可以發現前後端 API 的溝通只關注在 “傳入” 和 “傳出” 或 “事件”,過程中 HTTP 的溝通並沒有包含狀態。 所以若重新整理或再次開啟相關頁面需回到上一次的狀態時,Cookie 提供狀態的存放空間來恢復前一次瀏覽。 瀏覽器雖然有提供 localStorage、sessionStorage、Indexe......
me
林彥成
2022-09-24 | 3 min.

網頁即時通訊實作 X Long-Polling, Server Sent Events, WebSockets

從把妹角度理解前後端如何和平相處

在另外一篇文章小編介紹了怎麼透過非同步 AJAX 的方式跟伺服器進行溝通,那需要即時的同步溝通怎麼辦? 這篇文章接著會介紹可以做到網頁即時通訊服務的技術: Long-Polling: 長時間輪詢 Server Sent Events: 伺服器傳送事件 WebSocket: 全雙工通訊 Forever Frame: IE only,嵌入一個 IFrame,連向 SignalR 提供的內容 ......
me
林彥成
2022-09-23 | 4 min.