一個工程師的筆記天地

工欲善其事，必先利其器。 這句不知道已經幾百年的諺語一直到現在還是很受用，我們學習程式的人也適用於這個觀念。 開始學習 Vue 之前，有幾樣工具是電腦中一定要準備好的。 # Visual Studio Code Visual Studio Code 我認識寫前端程式的人，清一色都是用這個 IDE，甚至此刻你在讀的這篇文章也是在 VSCode 寫出來的，所以我也推薦剛入門的新手，透過這個 IDE 來學習程式。 Visual Studio Code 安裝方式基本上依照網站上的指示下載安裝即可。 如果是 Windows 的使用者，建議安裝到這步時，把「其他」的四個選項全部打勾。 #...

# 前言 這個篇章來帶大家認識版控的概念，以及常見的版控類別。 在開始之前，避免新手後續的閱讀困惑，先來介紹幾個之後會看到的名詞： 地端 / 本機 / 本地 (local)：位於當前位置或靠近使用者的 設備 或 系統。 白話來說，就是你看得到的裝置，包含眼前的主機、筆電、手機，都可以稱為地端。 遠端 / 雲端 (remote)：不在使用者眼前的 設備 或 系統，也就是你看不到的裝置，包含隔壁辦公室的主機，或是遠在 Google 機房的「雲端硬碟」之類。 而通常遠端 / 雲端的資料，會需要透過「網路」才能從地端 (你眼前這台裝置) 存取。 儲存庫 (repository)：一個用來存放...

# 前端御三家，請選擇 前端框架，一個在「大前端時代」出現的產物，當 jQuery 已經沒辦法輕易應付萬紫千紅的需求時，框架開始崛起。 近期開始接觸網頁程式的人，無論你的指導老師是誰，他們在教完你 HTML、CSS、JavaScript/jQuery 之後，大概會像大 X 博士一樣，把三隻神奇寶貝擺出來要「訓練家」選一隻。 此時的你可能還在「蹲馬步」，根本還無心選擇任何一隻神奇寶貝。 偏偏指導老師 (大 X 博士) 卻說，如果不選一隻神奇寶貝，就無法步上神奇寶貝大師的旅途。 # 筆者接觸程式心路歷程 筆者差不多就是在這個時空背景下由大學教授引領，踏入網頁這條不歸路。 從後端的 C# 、...

# 前言 Git，一個想成為工程師，好像一定要會的東西。 程式領域淺藏著許多「沒人教」，但在業界會被當成「理所當然」、「不用教就應該會」的技能，Git 就是其中一項，但這些技術對外行人來說，各個都不是容易跨過的門檻。 此時的新人可能還在跟程式拚得水深火熱，光是要搞懂那些「亂碼」，就已經弄得自己一個頭兩個大。 現在又殺出一個名叫 Git 的程咬金，擺明告訴新人如果不學會他，面試大概會第一個被刷掉。 認識 Git、使用 Git，成了就職前的一大挑戰。 # 初識 Git 筆者有幸在求學時期認識這門學問，但當時的我並沒有完全學會。 對於 Git 的操作，只知道怎麼使用 git add 、 git...

一直覺得 JavaScript Closures (閉包) 屬於不好懂的 JS 觀念之一，但他跟物件導向這門學問很像，不懂的時候覺得很難，懂得時候會覺得很有趣 初次接觸 Closures，完全沒辦法理解這個名字本身的涵義，事實上當時也有很多人紀錄相關的文章，但即便我重複看了好幾次，依然有種似懂非懂的感受 最近再次認識 JavaScript 的時候，又看到 Closures 的環節，感覺現在終於有能力可以用自己的話語把這個觀念記錄下來，決定寫下這篇文章 # 學習閉包所需要知道的三個觀念 當不懂程式觀念的時候，第一件是絕對是去看 MDN 根據 MDN...

在 JavaScript 陣列中，有兩個東西是我常常知道他們的存在，知道他們的用途，但每次都必須查 MDN 才能確認到底怎麼用 一個是 slice ， 另一個是 splice 這篇來紀錄一下這兩個陣列方法，看能不能加深一下自己的印象，未來用到的時候不用再去查 MDN # Array.prototype.slice() 定義： slice() 方法會回傳一個新陣列物件，為原陣列選擇之 begin 至 end（不含 end）部分的淺拷貝（shallow copy）。而原本的陣列將不會被修改。 slice...

發現 Vue 官網 與 vite 官網 所記錄的開發起手式不太一樣，紀錄一下以不同指令進行 vue 的起手差異。 由於目前為止 (2023.7) Vue 推薦開發配套會是 Vue3 script setup 語法 、 vite 與 pinia 作為主流，未來的文章將會以這幾種配套做為主。 另外，因為筆者習慣使用 npm 來設定套件，內容也多會以 npm 為主，如果習慣其他套件管理工具，例如 yarn 、 pnpm ，也是可以替換使用的！ # npm init vue@latest $ npm init [email protected] - The Progressive JavaScript...

三刷了鈴芽之旅，甚至還安排好了第四刷，總該寫寫心得吧！！ # 契子 初次接觸新海誠的電影，大概就是你的名字，再來就是天氣之子 對於電影風格最有感的，大概就是每一個畫面，都值得拿來當手機、電腦桌布吧 事實上，早在鈴芽之旅台灣上映之前，就在 YouTube 看到了主題曲的歌 不得不說，主題曲的旋律實在令人著迷，即便單曲循環撥放也不會膩的那種 這時的我還不知道鈴芽之旅是怎樣的故事，會是那種為了某件事情而踏上旅程的情節嗎？ 不久之後，Line 傳來訊息，「鈴芽之旅 有人要一起去看的嗎？」 就這樣，我也一起踏入鈴芽的旅程。 # 首刷 記得首刷那天，電影 7:20 開演，跟阿魁約 6:30...

接了前人的 code，整包程式幾乎所有功能只要能用套件就用套件，其中發現一個套件叫 dayjs，用起來還不錯，來記錄一下常用功能 # Dayjs 介紹 Dayjs 是一個輕量的 JavaScript 時間日期處理的函數庫，具有以下特點 輕量 程式碼只有 2kb 大小，並且沒有任何依賴，可以直接在瀏覽器中使用，也可以在 Node.js 中使用 易上手 實際使用的感覺比原生的 Date 物件更簡單，並且提供了一些常用的功能，例如：格式化時間、計算時間差、時間比較等等 相依性低 Dayjs 只依賴於 ES5 的函數庫，因此可以在任何環境中使用，包括...

Vite proxy 、 axios 攔截器 等議題，很容易在網路上查到資料 但自己實際在使用的時候，總會有一些細節沒注意到 這篇記錄實際使用了 vite proxy 、 整合 axios 攔截器 以及設定攔截器功能的內容 # 大綱 Vite 設定 proxy 方法 axios 攔截器如何設定 URL 實際使用 axios 的 API # Vite 設定 proxy 方法 在 Vite 中，我們可以通過在 vite.config.js 文件中設定一下，就可以做好應用程式的 proxy，讓 Vite 透過 proxy 呼叫 API Vite 預設已經有個 defineConfig...