笑笑的程式人生

放置工程師筆記的場所，隨時記錄自己的開發過程。以自己能理解的方式紀錄步驟，筆記內容隨時歡迎討論～ 出沒地：GitHub・iThome・Instagram・Facebook 文章目錄總表工程概念好用的 CMS 具備哪些要素？ Hexo【Hexo】建置與部署 【Hexo】自動化部署 【Hexo】套用樣式 【Hexo】技巧筆記 JavaScript【JS】雙問號 ?? 運算子 【JS】webpack 筆記 Jest【Jest】第一次的單元測試（含常用 matchers） React【React】從無到有，用 webpack5 展開的 5 分鐘 React 之旅 其他Node.js 熱血直播班

目錄當初為什麼報名這堂課？第一週~第八週的學習過程最大的收獲是？最喜歡直播班的哪些活動？如果時光能倒流，會希望自己再次注意哪些細節？身為學長姐，分享些想入坑的新同學一些勉勵的話 當初為什麼報名這堂課？作為前端工程師，JavaScript 自然是每天都得接觸的程式語言，npm 更是必須要打交道的工具。然而，在這些背後默默運作的 Node.js，卻是知道其存在，卻一直不知其所以然。深覺 Node.js 對前端工程師來說是一個逃避不了的題目，於是趁著這次直播班開課，就下定決心一窺 Node.js 的真面目啦。 第一週~第八週的學習過程在正式課程開始前，包含分組、預習作業、課程前的知識點等等，光是暖身的時期，就能感受到這個直播班是「來真的」。 而開課後每周五的直播課，因為每週都有當週進度，遇到時間衝突當天無法上課的話，周末也有很大的補課壓力。整整八周的課程與知識量，再加上每周三的助教直播，知識量滿滿滿。 最後事實證明，每個禮拜乖乖跟上課程進度是對的。在這八周當中，雖然課程影片、個人作業、小組作業讓工作外的休閒時間爆滿，但每週按時把課上完、作業交出去，掌控感與成就感和辛苦程度成正比，我想 ...

對 Unit Test 一直是久聞其名而不見其人，最近剛好有機會碰到，趕緊來生筆記做個紀錄，本文主要內容參考 Jest 官方教學，並以自己便於理解的方式寫成筆記。 目錄環境建置使用方式Jest 運作解析MatchersExceptions 參考資料 環境建置首先在專案內安裝 Jest（官方預設使用 yarn） 12345// yarnyarn add --dev jest// npmnpm install --save-dev jest 安裝完畢後，package.json 內就會新增 jest 與版本紀錄，而 script 裡面也會多一個執行 jest 的指令 test。 如果沒有的話，再自行手動新增如下： 1234567{ "scripts": { "test": "jest", // 執行測試 "test": "jest --coverage", // 執行測試 + 產出報告 ... }} 加上 --coverage 會再 ...

由於目前任職的公司就是在做 CMS 系統，對於 CMS 多少算是有自己的一番心得，以下整理了一下自己的想法，替目前為止學到的觀念作個總結。 在本篇文章內容中，首先會說明貫串整個系統的通用概念，並依序說明「功能架構」、「資料處理」、「外掛支援」等面向，自己認為有哪些優化方式，並在最後統一說明所有內容在「介面呈現」上如何處理為佳。 本文純為個人工作經驗的淺見，還請不吝批評指教。 目錄通用概念簡單直觀的操作邏輯可客製化的靈活度 CMS 各面向分析功能架構資料處理外掛支援 / 外部 API 串接畫面呈現 參考資料 通用概念首先來說說通用概念的部分，個人認為這部分的重要性，在於這些思考貫穿整個系統，在講述後面的架構時會隨時提到，所以放在最前面提及。 簡單直觀的操作邏輯 首先來說說直觀操作，這部分其實不只 CMS，算是所有網站的通用觀念。 有時候， CMS 會被預設是要提供給受過訓練，已經具備知識技術的人使用。比起一般大眾造訪的網站，CMS 的內容和操作確實更複雜，使用者需要更多學習時間，才能理解如何與系統互動。但也正因為如此，某種方面來說，CMS 甚至必須比一般網站更追求直觀方便，才不會在操 ...

版本資訊 webpack：^5.9.0 webpack-clil：^4.2.0 webpack-dev-server：^3.11.0 module.exports 架構紀錄 webpack.config.js 內的module.exports 相關設定 entry：打包檔案執行的進入點，在 SPA 中通常是 index.html 或 index.js main output：打包編譯的輸出資訊 filename：編譯完的檔名 path：編譯完放置的位置 resolve alias：別名路徑。將特定路徑重新命名 stream plugins：陣列，放入 webpack 使用的套件與設定其參數。請見 webpack 套件 module：載入官方提供的API，定義如何編譯檔案模組 rules：模組陣列，有順序性，從上到下依序編譯檔案 test：指定編譯檔案的副檔名，使用正規表示式 exclude：指定不進行編譯的路徑 use：指定使用哪種套件來編譯此種類型檔案 loader：指定進行編譯之套件 options presets devServer：運行 ...

因為本機跑 CRA 執行太過龜速，結果一腳踏入了webpack坑，發現這坑實在太深了，只能一步步筆記下來，不然改天就忘了自己到底做過什麼… 目錄前置說明準備 webpack 環境初始化 npm 專案安裝 webpack 相關套件新增 config 檔 建立 React 專案安裝 React新增基本網頁 執行專案加入指令運行網頁 參考資料 前置說明文章內容包含 如何用 webpack5 架構出 react 開發環境 不包含 如何使用 React React 相關語法說明 環境 Visual Stusio Code v1.51.1 Node.js v12.16.2 npm v6.14.4 （本文建議同時搭配《webpack 筆記》服用） 準備 webpack 環境初始化 npm 專案用 Visual Stusio Code 開啟一個空的新專案資料夾，terminal 執行 npm init 產出 package.json 檔案 使用 npm init -y 可以跳過設定，直接使用預設值 安裝 webpack 相關套件 webpack 相關 webpack webpack-c ...

目錄存檔自動刷新次標 標題次標 參考資料 存檔自動刷新安裝 hexo 專屬的 browsersync進行開發時，每次存檔即自動重整網頁 1npm install hexo-browsersync --save 安裝後要記得重啟本地 serve 1hexo server --draft --open draft 為顯示草稿open 為開啟預設瀏覽器 站內文章連結使用 post_link在 markdown 文件中使用 Hexo 的 post_link 參數{% post_link slug 文件名稱 顯示文字 %}比方說要連結的檔案名稱為 Hexo-Start.md要顯示的名稱是 Hexo建置教學使用以下寫法即可生成站內連結{% post_link slug Hexo-Start Hexo建置教學 %} 要留意的是，由於參數是由半形空格分開因此檔名中不得有空格建議用-等連接符號隔開 另外，如果沒有打上第二次顯示文字的參數連結文字會自動抓取文章的 title 使用相對路徑（不建議）由於專案建置後文章的目錄架構是./年/月/日/文件名稱所以使用 ...

?? 運算子全名 Nullish Coalescing Operator是 null 與 undefined 專用運算子 作用當前項的值為 null 或 undefined 時帶入後項的預設值 使用方法：Value ?? DefaultValue; 使用實例：123456789101112let number;console.log(number ?? 10);// 10number = null;console.log(number ?? 20);// 20number = 10;console.log(number ?? 20);// 10 參考資料Nullish coalescing operator (??)JavaScript 之旅 (25)：Nullish Coalescing Operator ( ?? 運算子)

目錄Hexo 套用樣式下載並套用樣式Hexo 樣式設定方式 使用 Submodule 管理樣式使用方法Submodule 持續部署設定 (補充) Butterfly 參數參考資料 Hexo 套用樣式以 Butterfly 為例 下載並套用樣式 如果要使用 submodule 引進樣式專案，以下程式碼先不要執行 將 GitHub 上的樣式專案複製至 themes/butterfly 路徑 1git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly 安裝 butterfly 必要插件 hexo-renderer-pug 與 hexo-renderer-stylus 123npm install hexo-renderer-pug hexo-renderer-stylus --save// 重啟專案 Ctrl+Chexo s 將根目錄的 _config.ymltheme 屬性改成 butterfly 12# Extensionstheme: butterfly 之 ...

目錄使用 GitHub Action 持續部署準備部署用公私鑰建立 Action 檔修改部署模式完成持續部署 使用 Travis CI 部署Travis CI是什麼？使用方法 參考資料 使用 GitHub Action 持續部署 請注意，使用此方法 package.json 內一定要包含 hexo-deployer-git 這個套件 準備部署用公私鑰利用 git 指令生成公私鑰ssh-keygen -f actions-deploy-key執行完後，應該會在 Terminal 所執行的資料夾下產生以下兩個檔案 actions-deploy-key actions-deploy-key.pub 其中 actions-deploy-key 是私鑰要新增到放置 Hexo 專案的儲存庫actions-deploy-key.pub 是公鑰新增到用來部署網站的 xxxxx.github.io 這個儲存庫 設定部署私鑰打開 Hexo 專案的 GitHub 頁面Settings -> Secrets -> 點選 New repository secret 按鈕 私鑰的 Name ...