Dec 7, 2023[React] React 18 的 Suspense好久沒有寫文章了! 過去快兩年的時間,因為工作加上接案的關係,忙到生活都快無法自理,好不容易空出點時間來記錄一下新碰到的玩意兒。 如果大家對接案有興趣的話,之後我們再來聊聊:) Suspense,就是今天的主角。 在前端的日常,除了UI,花最多時間的就是串接API了。 一般來說,API都是所謂的非同步狀態。 也就是說,一定會有一個等待資料回來渲染到畫面上的空檔。 Suspense 就是設計 …React8 min readReact8 min read
Dec 16, 2021[React] use outside function for onClickThe note for common error — To achieve clear code, we always combine the same functions import { useState } from 'react' ... const [count, setCount] = useState (5) ... <div onClick = { () => setCount ( count +1 ) } /> // count +1 <div onClick = { () => setCount ( count -1…React2 min readReact2 min read
Dec 8, 2021Redux Toolkit 筆記交換資料的好幫手 — 在開始記錄之前,先稍微來了解一下,為什麼有Redux? 傳統上,在我們有需要元件資料交換的時候,在父子間通常會經過props作為傳遞溝通的橋樑。 但當傳遞的層數過多、元件無相關性,或者橫向的元件之間傳遞參數的時候,整個傳遞的流程會變得難以掌控。 於是,Redux的應用就問世了。(在VUE中,就是所謂的VUEX) Redux就是為了解決跨元件資料交換。Redux11 min readRedux11 min read
May 24, 2021[Vue] firebase 推播功能在Vue中實現推播訊息 ( Firebase cloud messaging — FCM ) 使用場景 實務上,我們有時候會需要在某個時間點通知用戶, 比如說寫了個行事曆的應用程式,我們在下午2: 55的時候, 推送通知給用戶「下午3: 00有個會議」。 這是一個相當常見的功能,寫法上也有百百種,這次我在專案上使用的是Vue + Firebase 的方法,作為紀錄 …Vue10 min readVue10 min read
May 3, 2021[Vue] prop /emit — 參數到底在傳什麼那些你可能會用到的功能或元件 — 因為前陣子專案比較趕,所以都沒有撰文。 考慮到使用Vue的情境,稍微更改了一下之前的目次以及內容。 那就讓我們來接下來還會碰到的內容: 目次 先說說我準備紀錄哪些東西,這樣之後回來看也比較找得到地方,正在閱讀的你也應該比較能夠掌握: Vue + elment ui — 實作帶有驗證功能的表單 (form + table) prop /emit — 參數到底 …Vue6 min readVue6 min read
Mar 8, 2021Vue 專案紀錄 — emit的小技巧Vue 父組件使用emit,自帶本身的參數 在使用Vue開發專案時,或多或少一定會使用到父子組件中的傳遞。 這也代表你會使用到 emit ( 子組件傳遞給父組件的方法) 在官網的說明中,已經有說明到基礎的使用方法。 這邊有個簡單的範例來說明最基礎的使用: // 父組件 <child @牛 = "papa_method" /> <-------這邊 …Vue5 min readVue5 min read
Dec 29, 2020[Vue] Vue + elment ui — 帶有驗證功能的表單 (form + table)那些你可能會用到的功能或元件 — 玩了一陣子的Angular 9,最近又回到了Vue的懷抱(? 有一些小功能剛好碰到,想說就做個紀錄,如果你本來就知道的,那就看看當複習哈,如果你剛好不知道的,那希望剛好幫助到你。 這一樣是篇除了分享兼做紀錄的文章。 有時候在爬技術文章時,常會有「啊是怎麼出現這個東西的?」的感覺。 可能是因為懶(欸,或者是因為某些部分筆者可能自己已經了解,所以為了篇幅會省略,如果你在閱讀我的文章時也有感覺到跳太多了,都歡迎留言跟 …Vuejs8 min readVuejs8 min read
Sep 29, 2020「從前端跨後端」mySQL + express 建立自己的第一支API前言 身為一個半路出家的前端工程師,日常生活大概就是串接API與即將串接API這樣。 但反正這次被交辦了建立後端API的這件事情,剛好可以也來理解一下API到底怎麼建立,免得每次都被後端工程師唬(欸)。 作為我的學習筆記,希望剛好也可以幫到你。 因為我本身是個後端超級小白(阿我就寫前端的咩,雖然也不強?),所以這篇文章也會以超級小白的角度出發,如果你已經 …Express13 min readExpress13 min read
Aug 17, 2020陣列小筆記 split, join在資料處理的時候,我們得對接收到的資料做整理,以方便我們接下來的其他用途或者顯示在畫面上。 針對資料處理,其實有多種方法,這篇主要是記錄在使用split, join, reverse的用法。 Split 先來看看MDN上的官方定義: str.split([separator[, limit]]) 我知道你懶得理解,所以我用更直白的方式說明: 1. split 是針對 “ String “ 的用法 所以如果你在上面的範例中, …Split5 min readSplit5 min read
Aug 3, 2020Angular + Google analytic 用法在Angular專案中,因為有使用到Google Analytics (GA)的需求。 嘗試了許多的方法,但最後才成功串進需求,這篇文章主要是自己記錄一下,當然如果剛好對你有幫助,記得給幫這篇文章拍個手 :) 第一步,申請你的Google analytic U-ID 首先登入到Google analytic 網站。 進入到主畫面後,應該會看到差不多的畫面。Angular4 min readAngular4 min read