yijay

不得不說，這病對我來說很痛苦，搞得身心靈都受創，原本約好的活動全部一概取消 囧orz... 傳染力 這邊不是什麼專業分析，只是想統計一下，一間辦公室，消失(發病)人數漸漸上升的情況 第一天：1人 第二天：3人 第三天：7人 第四天：12人 第五天：18人 因辦公室內約30人，後續就大概到 20 幾人就停了，不過這數字就等於說，一個空間內大概7成的人都會被傳染到，可見這傳染力道多可怕.. 發病第一天 這真的記憶猶新啊.. 中午依舊吃著舒服的午餐，但就是覺得身體哪邊小小怪，回到辦公室後，MD 有夠冷，穿再多還是冷，然後關節開始莫名覺得痠，以為只是錯覺，但那天剛好要尾牙，所以我這就收到了一組快篩，不過驗出來是一條，我就還是去了 但傍晚開始，我的腰就一直很痠，痠到難以控制，我就只好外出到附近中醫看一下，但裡面的人是建議說先去看西醫比較好，所以我就離開，不過那天也晚了，就只能先買個普拿疼之類的要擋一下，隔天再去看 症狀： 1. 腰痠，痠爛 2. 肌肉、關節處痠 3. 很冷（當天2X度） 發病第二天 這天快篩終於驗出來，也開始了五天的隔離旅程（感覺會很艱辛） 因為知道要隔離，所以就先買了些菜、肉、水、寶礦力、水果，怕會餓死就先買起來 症狀： 1. 發燒（39度多） 2. 頭痛、頭昏 3. 畏寒 發病第三天 真的很不舒服，一直躺著，身體又一直忽冷忽熱，有時熱到整個冒大汗，有時又冷到心臟不舒服 而昨天買的食物，「完全」不想吃，也不想用...，變成都看 uber eat 來找飯吃 症狀： 1. 發燒（38 - 39度多） 2. 頭痛、頭昏 3. 喉嚨微痛 發病第四天 持續躺... 症狀： 1. 發燒（37 - 38度多） 2. 喉嚨痛炸，吞口水就要殺人 3. 痰很多，多到覺得會被噎死 發病第五天 持續躺... 症狀： 1. 喉嚨痛炸 2. 痰很多 3. 流鼻水、打噴嚏、鼻塞 發病第六天 這天也終於舒坦了一些，也可以出門了... 症狀： 1. 喉嚨微痛 2. 痰變少

Hi，本人為台新金的小小小小........小戶 近期收到一封信，信中標題寫著「111年現金增資發行己種交換特別股繳款書」，照片如下 我呢，當下看到以為我是台新的「特別戶」，是不是有什麼優惠好康的！！！！ 想說他們增資我可以免費拿到 10 股，雖然很少，但還是有！！！ 但怎麼看都覺得不對，一直說什麼繳款啥鬼，我還是覺得很好奇到底安怎，而且就只有到 7/13，所以我就到台北的台新銀行詢問一番 結果........ 營業員表示：「你就是買了 550 股，需要繳款」 我當下聽到就不想聽了，看來那位營業員完全不懂.... 後來有他們的經理經過，我就說我要問他 經理表示：「你先到那邊的證券專櫃等我」 我心想：「水啦，有結果了」 經理結果說：「我幫你打一下客服」 我...... 好... 我等... 結果：「無結論」 我 OOXX 最後......... 我找到一位好像專門理財的營業員詢問了一下，終於有答案啦 他就說「就是他們銀行有在做現金增資，問我要不要繳款買這些股」 後來我是覺得不合邏輯，因為 1 股要價 17.65，現在股價都已經跌到 15.XX，怎麼想邏輯都很不對 最後私下表示... 「你懂就好」 所以啊........ 我根本不是什麼特別戶 囧 orz...... 本人「不會繳款」，因為完全就是「買貴」，所以要買的人直接去股市裡面買就好，還比較划算... 

?? （nullish coalescing operator） 用法 // pseudocode，大概示意，非完整 code const items = ["abc", "", 123, 0, true, false, null, undefined]; {items.map(item => { return ( {`${item} ?? '找不到 item'`} ); })} 結果圖 情境 有一個 data 回傳值如下，且 true、false 在程式內都可能用到 data: { isTeacher: false } 如果預設值為 false，那使用 || 或是 ?? 都是沒有問題 data.isTeacher || false //output: false data.isTeacher ?? false //output: false 但如果預設值為 true，那這時候使用 ?? 才會正確，或是用 || 並配合額外處理的 code data.isTeacher || true //output: true data.isTeacher ?? true //output: false || （or operator） 用法 // pseudocode，大概示意，非完整 code const items = ["abc", "", 123, 0, true, false, null, undefined]; {items.map(item => { return ( {`${item} || '找不到 item'`} ); })} 結果圖 情境 || 就大部分情況都在使用，像回傳值為 undefined，就直接使用「 data.count || 0 」，就能得到 0 此預設值。 ...

一、CSR import { useEffect, useState } from 'react'; interface Post { userId: number, id: number, title: string, body: string, } const Home = () => { const [post, setPost] = useState<Post>(); useEffect(() => { fetch('https://jsonplaceholder.typicode.com/posts/1') .then((res) => res.json()) .then((res) => setPost(res)); }, []); return ( <div> <h1>{post?.title}</h1> <p>{post?.body}</p> </div> ) } export default Home 二、SSR import type { GetServerSideProps } from 'next' interface Post { userId: number, id: number, title: string, body: string, } interface HomeProps { post: Post, } const Home = ({ post }: HomeProps) => { return ( <div> <h1>{post.title}</h1> <p>{post.body}</p> </div> ) } export default Home export const getServerSideProps: GetServerSideProps = async () ...

概述 How to update meta-tag in react? 這問題想必前端工程師都有碰過，但這邊先告訴大家，想透過「純前端」修改... 「不可能」...!! 為什麼？ Google 搜尋引擎在爬文的時候，透過 javascript 產出來的標籤是無法爬到。 像現在有使用 react、vue、angular 等等這類的框架，這種 SPA、前後端分離的程式架構，都是透過 javascript render 出來的網頁，因此 SEO 肯定受限十足。 又有人可能會說，Google 搜尋引擎已經可以爬 javascript 產生的 tag，確實現在框架的盛行，Google 勢必還是得對這做處理，畢竟他們的網站也是有使用框架來進行。 問題 那 Google 都能爬 javascript 產生的 tag 現在還會有什麼問題呢？ 「動態產生 meta tag」 這部分並非透過前端就能「完美」達到。 怎麼說？ 透過動態產生出來的，那網址剪下貼至 FB、Line 等等之類的，都會無法顯示那些 tag，那 SEO 上勢必還是打折了。 解決 相信很多人一定都有找了很多解法，以下就列出幾個解法供參考 (X) 1. react-helmet (X) 2. react-helmet-async (X) 3. react-super-seo (O) 4. next.js (O) 5. remix (O) 6. environment variable (env) 從以上可以看出 javascript 前端方式處理得仍無法解決，必定要透過 SSR 的方式，或是環境變數來處理。

概述 update meta-tag in react 正確的動態解決 meta-tag 方式，透過 env。 沒有裝 next.js 的專案可以用這招。 嘗試過 react-helmet 無效者也請用這招。 流程 1. get data in node.js -> 2. set env to index.html -> 3. build and test -> 4. success! 1. get data in node.js 純前端者，不要看到後端就跑，這邊只是寫一點點，沒很多 建立 script.js // const fs = require('fs'); // const pathConfig = './config.json'; // const config = JSON.parse(fs.readFileSync(pathConfig)); // const title = config.title; // const description = config.description; const execSync = require('child_process').execSync; const title = 'EJ的網站標題'; const description = 'EJ的網站描述'; const favicon = 'https://firebasestorage.googleapis.com/v0/b/deploy-for-chien313jay-test.appspot.com/o/images%2Ffavicon.ico?alt=media&token=d019d820-16a3-45fd-b5e5-15b8aa355ea8'; execSync(`VITE_APP_TITLE="${title}" VITE_APP_DESCRIPTION="${description}" VITE_APP_FAVICON="${favicon}" CI=false npm run dev`); 這樣就把 env 寫至你的 ...

「想讓全世界看到我的網頁」，那就來把 react 上到 github page 吧！ 1. 透過 vite 快速安裝 react (比 webpack 快，比 CRA 瘦) 2. 安裝 gh-pages 來快速發佈至 github page 3. 修改 base path 完成發佈 1. 透過 vite 快速安裝 react 這邊會建立一個「home」資料夾，並快速安裝 react yarn create vite home --template react 如果沒裝 yarn 也可以使用 npm 來安裝 npm create vite@lateset home -- --template react 裝好 vite 接著在來把依賴套件裝起來 yarn install 那我們可以先看看資料夾內容，應該差不多，不過接著的 HMR 及運行速度才是重點 vite、react 那就來試用看看這個 vite build tool run 起來 react 的狀況吧！ yarn dev 我這邊是 0.3s 就運行起來，然後自己嘗試更改一些程式可以發現 HMR 快得驚人 ．．． http://localhost:3000/ 2. 安裝 gh-pages 來快速發佈至 github page 我們先連接至自己 github 上的 repository，並把專案推上去 git init git branch -M main git add . git commit -m 'first commit' git remote add origin https://github.com/你的帳號/你的repo.git git push -u ori...

react 使用 Google Analytics (以下簡稱GA)， 你也可以不使用套件，直接使用GA上提供的「全域網站代碼(gtag.js)」 1.安裝 GA 套件 2.初始化 GA 3.將 url 加入 GA 4.將 button 加入 GA 5.將 select 加入 GA 6.將其寫成 component 置於 src/index.js 1.安裝 GA 套件 npm i react-ga4 2.初始化 GA import ReactGA from 'react-ga4' ReactGA.initialize('G-XXXXXXXXXX') //你的GA評估ID 3.將 url 加入 GA ReactGA.send('https://www.xxx.xxx') //你要偵測的URL 理論上加完，並執行該網頁，就會在GA平台上看到如下的狀況 4.將 button 加入 GA const gaEventTrack = () => { // body 外無 hasAttribute 方法，避免錯誤 const body = document.querySelector('body'); body.addEventListener('click', (e) => { let target = e.target; // 查找元素不包含 data-ga-action，且到 BODY 後跳出 while(target.hasAttribute('data-ga-action') === false && target.tagName !== 'BODY'){ // 父元素覆寫當下元素 target = target.parentNode; } if(target.hasAttribute('data-ga-action')){ const dataGaCategory = target.getAttrib...

是說，對閉包還是不解，所以直接把簡單的例子紀錄下來... 重點是記憶延續，從例子可以看到 count 不會因重新呼叫而被重新宣告 const counter = () => { let count = 0; return () => { return count++; } }; const count1 = counter(); console.log(count1() // 0 console.log(count1() // 1 console.log(count1() // 2

(前情提要) 乾，在公司被唸說看不懂 ? 這寫法，我反問對方這要怎麼查，他說他不知道，且說不重要... 唉.. 最後我另外花時間找，並記錄下來好了... (正式來) 有時 API 傳回來的資料，連那個 key 都沒有，render 就會出問題，那這時就得判斷該物件內是否存在該屬性，這就衍生出以下三種方法 一、hasOwnProperty() 二、? (???.... 是在問號三小... 你沒看錯.. 就是?...) 三、?? 結論 (這問號想逼使誰... 一、hasOwnProperty() 此方法即可判斷物件有無屬性存在，下方程式碼即在判斷 objA, objB 是否有 'chi' 這個 key const objA = {}; const objB = { chi: 'chiValue' }; // 無印出 if (objA.hasOwnProperty('chi')){ console.log('objA.hawOwnProperty(chi): ', objA.hasOwnProperty('chi')); } // 印出 objB.hawOwnProperty(chi): true if (objB.hasOwnProperty('chi')) { console.log('objB.hawOwnProperty(chi): ', objB.hasOwnProperty('chi')); } 二、? 此為 es2020 之方法，跟 '一、' 可以達到一樣效果，但更方便 const objA = {}; const objB = { chi: 'chiValue' }; // 印出 objA?.chi: undefined console.log( 'objA?.chi: ', objA?.chi ); // 印出 objB?....

git push 前都好處理.. 煩請記住以下.. 1. git add 後，取消此命令 程式寫完拉，爽，快點上傳 git add xxx.js 乾，我忘記改那了， 復原一下 git restore --staged xxx.js 又要寫了.. 2. git commit 後，取消此命令 程式寫完拉，爽，快點上傳 git add xxx.js git commit -m "完成核彈精準定位功能" 乾，這樣我會不會被抓走啊？ 復原一下好了.. git reset HEAD^ 以上復原指令請多參考.. 在公司的專案下錯通常會被釘..

1. 安裝 sass 2. 修改副檔名 3. 引入該檔案 1. 安裝 sass 有人可能會問說，node-sass 不行嗎? 是可以，不過可能會遇到些 問題 ，且已經不支持，請改裝 sass 移至 react 專案，安裝 sass cd my-app npm i sass (or yarn add sass) 2. 修改副檔名 .css 改為 .scss 3. 引入該檔案 視自己的 .scss 檔名及路徑來修改，引入後即可使用 import "./index.scss"

忘就忘了 只能繼續記.. 1. react-router-dom 安裝 2. 路由基本使用 3. <Switch> 用此來選擇正確地點 1. react-router-dom 安裝 移動至 react 專案，在其目錄下安裝 cd my-app npm react-router-dom (or yarn add react-router-dom) 2. 路由基本使用 引入 react-router-dom、網頁 元件 import { BrowserRouter, Route } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; 把路由語法寫上基本上就能使用 <BrowserRouter> <Route path="/about/home"> <Home /> </Route> <Route path="/about"> <About /> </Route> </BrowserRouter> 如果不知道現在在操作甚麼的話.. 請點此參考... 執行結果如下，但也可以看出問題，所以必須搭配 <Switch> 3. <Switch> 用此來選擇正確地點 引入 <Switch> 元件 import { BrowserRouter, Route, Switch } from 'react-router-dom'; <Swicth> 寫上去即完成 <BrowserRouter> <Switch> <Route path="/about/home"> <Home /> </Route> <Route path="/about...

 這.. 建立一次後.. 就是一直 coding.. 是我的話.. 不會記得... 1. 下指令建專案 (基本上這樣就可以了..) 2. 刪除不需要之檔案 3. 建立基本結構 (yijay 常用之結構..) 4. 測試專案 1. 下指令建專案 要先安裝 Node (10.16↑) 環境 及 npm (5.6↑) 套件管理器 在指定的資料夾下以下指令：npx create-react-app my-app 下完即開始安裝 安裝完成 移動到該資料夾：cd my-app 執行程式：yarn start (如果僅裝 npm，那請下 npm start 來執行) 以下畫面即完成安裝 2. 刪除不需要之檔案 有些東西未來有可能還是會用到，但 yijay 還很新.. src 資料夾的東西刪了很多，保留 index.js 即可 修改 index.js，理論上執行畫面就不會報錯了 3. 建立基本結構 此結構，因人而異，因公司而異，沒有一定 (押韻!!) components：各頁面之元件 global：常數、小工具等共用之程式 pages：各頁面 styles：css 檔 4. 測試專案 在 pages/home/index.js coding 在 src/index.js 把 home 引入進來 測試成功.. 感動 :))

記錄一下.. 面試或工作、 前後端溝通 上 (一般 HTML 或 React、Node.js) 都常用到.. 我個人是比較喜歡用 axios ~ 股票 API (JSON 格式)： https://www.twse.com.tw/exchangeReport/STOCK_DAY?response=json&date=20210702&stockNo=2330 會看到這樣的資料 (json) 如果以上不能用，可以使用這位大哥的 API (text 格式)：https://script.google.com/macros/s/AKfycbw5PnzwybI_VoZaHz65TpA5DYuLkxIF-HUGjJ6jRTOje0E6bVo/exec?name=${name}&age=${age} 會看到這樣的資料 (text) 程式撈取結果大概會長這樣 fetch： 1. promise based (可改為 async/await) 2. HTML5 API let btn = document.querySelector('.btn'); btn.addEventListener('click', () => { fetch('https://www.twse.com.tw/exchangeReport/STOCK_DAY?response=json&date=20210702&stockNo=2330', { method: 'GET', }) .then((response) => { return response.json(); }) .then((result) => { console.log(result); }); }); ajax： 1. xhr based 2. 須引用 jQuery $('.btn').on('click', () => { $.ajax({ ...

 記錄一下.. 面試也常問..

電腦需先安裝 Python 及 Visual Studio Code，如尚未請參考以下文章 VS Code 安裝： https://yijay131724.blogspot.com/2021/02/windows-visual-studio-code.html Python 安裝： https://yijay131724.blogspot.com/2021/02/python-python.html 一、執行 (Running) 二、錯誤標記 (Linting) 三、除錯 (Debugging) 四、排版 (Formatting) 五、中文亂碼 六、無法輸入 (移到 Terminal) 一、執行 (Running) 開啟 Visual Studio Code，Ctrl + N 新建檔案，Ctrl + S 儲存成副檔名為 .py 的檔案 為求方便執行，安裝 Code Runner 安裝完會發現右上角多了一個「Run Code」按鈕，點下去即可執行程式 當然還有不用安裝的作法，但就是要另外設定，且此套件可用於各種語言(C、C#、Java、PHP等) 二、錯誤標記 (Linting) 看一下此畫面，有沒有覺得哪裡不一樣? 如果要這樣 coding，乾脆回到以前用記事本.. 上面就是 print 少了一個 t 卻難以發現，因此要安裝 python 套件來標記此種錯誤及除錯 搜尋 python 即可找到此套件，點選 Install 安裝 安裝完可能會出現「Linter pylint is not installed.」，此即為標記錯誤之工具，點選 Install 安裝 看到「Successfully installed」表示成功安裝 看到程式碼出現紅色波浪~~，基本的程式碼檢查已經沒問題! (沒出現者請 Ctrl + S 儲存看看) 三、除錯 (Debugging) (須安裝 python 套件，上述「二、」的部分)  點擊 F5 會進入 Debug 模式，選擇「Python 檔案」， 畫面會醒目的我們哪裡有問題 程式碼左邊可以下中斷點 (Breakpoint)，Debug 模式就會停在那之前 F10：Step over，下一步(不會進入函式) F11：Step into，下一步(會進入函式) Shift + F5：Stop，停止除錯 四、排版 (Formatting...