yijay

(前情提要) 乾，在公司被唸說看不懂 ? 這寫法，我反問對方這要怎麼查，他說他不知道，且說不重要... 唉.. 最後我另外花時間找，並記錄下來好了... (正式來) 有時 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&quo

 這.. 建立一次後.. 就是一直 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) Ma

 系統版本：Windows 10 x64 下載版本：3.9.1 下載位址： https://www.python.org/downloads/ Python 下載&安裝 直接點選 Download Python 3.9.1 就可以，網站會自動判定我們電腦系統版本 Add Python to PATH 要勾! 再點選 Install Now 安裝完成後，點選 Disable path length limit Windows 預設無法執行超過 260 字元，點選後將可擴充至 32000 字元 點選 Close 完成安裝 打開命令提示字元，輸入 python，確認版本為安裝之版本即完成測試

 系統版本：Windows 10 64bit 下載日期：2021/2/10 下載位址： https://code.visualstudio.com/Download 一、Visual Studio Code 下載 依照我的系統版本，選擇 System Installer 64bit User Installer ：只給你現在的帳戶安裝使用，其他帳戶無法使用 System Installer ：全部帳戶都可使用，通常是 Admin 權限的就選此下載 二、Visual Studio Code 安裝 我同意 → 下一步 下一步 下一步 下一步 1. 將「以 Code 開啟」動作加入 Windows 檔案總管檔案的操作功能表中 2. 將「以 Code 開啟」動作加入 Windows 檔案總管目錄的操作功能表中 3. 針對支援的檔案類型將 Code 註冊為編輯器 1.、2.，可以讓滑鼠右鍵快速開啟專案，如下圖 很多人會勾選，但我選擇不勾，因為我不想讓右鍵又多一個東西，反正只要打開 VSCode 程式再開專案就好，花不到幾秒 3.的話如果想要所有支援副檔名(.cpp、.py等)都用 VSCode 開啟的話就勾，但如果你有的會想用其他編輯器(Sublime、Notepad等)開的話，建議就不要勾 安裝 完成，即啟動 恭喜安裝完成~