此筆記是基於 zerotomastery.io 推出 React 課程 Complete React Developer in 2022 所撰寫。 136. Introducing Styled-Components 本小節重點： 將 navigation.styles.scss 改為 navigation.styles.jsx 並使用在 navigation.components.jsx 中。 什麼是 styled-components？ styled-components 這個第三方套件讓我們可以將原本為 .css 或 .scss 的檔案改為元件的寫法（副檔名為 .js 或 .jsx 的檔案），透過 JS 動態產生 unique 的 class name，元件跟元件就不會發生因人為命名失誤而產生的 CSS class name 碰撞。

此筆記是基於 zerotomastery.io 推出 React 課程 Complete React Developer in 2022 所撰寫。 88. Setting Up Firebase firebase 官網新增新專案 yarn add firebase 89. Authentication Flow （Firebase 串 Google 登入驗證流程） 腳色：

此筆記是基於 zerotomastery.io 推出 React 課程 Complete React Developer in 2022 所撰寫。 注意！此章節實作 Redux 方式已過時，現官方推薦使用 Redux toolkit 來建立 Redux！Redux toolkit 在文末介紹。 149.&150. Redux vs Context Redux 與 Context 主要的不同之處有兩點： 元件取得存放在 Context 或 Redux 的資料方式不同 Context

此筆記是基於 zerotomastery.io 推出 React 課程 Complete React Developer in 2022 所撰寫。 第 2 節： React Key Concepts 本節重點： Don’t touch the DOM. Build websites like lego blocks. Unidirectional data flow ⇒ 容易 debug，源頭的 state 容易除錯 Cross platfoms:

此筆記是基於 Mosh Hamedani 推出的的 SQL 課程 Complete SQL Mastery 所撰寫。 Getting started 什麼是 SQL？ SQL（Structured Query Language，結構化查詢語言）是專門用來處理（包括查詢和修改）關係型數據庫的標準語言。 Database 數據庫或稱資料庫 A DATABASE is a collection of data stored in a format that can easily be accessed 數據庫是一個以易訪問格式存儲的數據集合

此筆記是基於 freeCodeCamp.org 推出的 CSS Grid Course 課程所撰寫。 Your First Grid ⬇️ 以下屬性是下在父層 ⬇️ grid-template-columns：定義要有幾個欄位和他們的寬度。 grid-template-rows：定義要有幾列和他們高度。 grid-template：以上兩個屬性一起寫寫法（先 rows 再 columns）

數字或數學相關內建函式 將字串轉為數字 Number() let a = '123' //string console.log(Number(a)) //number parseInt(string, [radix]) 函式會把第一個參數變成字串（相當於執行 ToString()）再回傳整數或是 NaN。如果不是 NaN，回傳值會把第一個參數參照指定的 radix 後轉換成整數， radix 為介於 2 - 36 之間的數字。

第 2 節：執行環境與詞彙環境 Syntax parsers 語法解析器 將語法解析器想像成一個程式，在你每次執行 JavaScript 時，這個中介程式會轉換你的程式碼 Execution contexts 執行環境（脈絡） 一個容器，幫助管理正在執行之程式。我們有許多的詞彙環境，程式碼的實際上所在位置，但哪個才是現在正在執行的？就是被執行環所管理。 執行環境包含了你寫的程式碼，正在執行的程式碼，但是它包含的不只你所寫的程式碼，你的程式碼正在被轉換，正在被另一個東西處理 另一個某人寫的程式（編譯器），所以它在執行你的程式碼，另外它也能夠做別的事情。

AJAX 代表 Asynchronous JavaScript And XML，即非同步 JavaScript 及 XML。簡單地說，AJAX 使用 XMLHttpRequest 物件來與伺服器進行溝通。它可以傳送並接收多種格式的資訊，包括 JSON、XML、HTML、以及文字檔案。AJAX 的特點是「非同步」，它可以不須重整網頁就可以更新頁面。 用 AJAX 與我們用表單送出資料的差別在哪？ 利用表單的方式發送資料，在瀏覽器接收到 response 之後，就會馬上渲染出結果，與 AJAX 最明顯的差別就是使用 AJAX 不用換頁，而且在傳送資料的同時還可以進行其它操作。 JSONP 是什麼？ 基於安全性的考量，瀏覽器中有「同源政策（Same Origin Policy）」的規範，如果並非處於同個網域之下，瀏覽器就不會將返回的 response 給客戶端，而 <script> 標籤不在同源政策的管制範圍，伺服器可 呼叫一個函式並將資料作為參數，客戶端在宣告一個同名函式即可拿到想要的資料，不過由於 JSONP 是繞過瀏覽器的安全機制，所以如果伺服器端的程式碼被惡意修改，那客戶端引入的程式碼也會受影響。 要如何存取跨網域的 API？

此篇內容節錄並改寫自 讓我們來談談 CSRF 和 1 2 請說明雜湊跟加密的差別在哪裡，為什麼密碼要雜湊過後才存入資料庫 雜湊與加密最大的差別在於，雜湊是不可逆的，而加密可逆。使用者的密碼先經過雜湊函式再存入資料庫，即便防止資料庫遭入侵，攻擊者也無法直接看到明碼。 雜湊的特性： 不可逆，沒有辦法從結果去逆推回原本的內容。 不定長度、無窮可能的輸入，都會得到固定長度的雜湊值。 不同的輸入也有可能得到相同的雜湊值，這種情形稱為碰撞(collision)。

ES6 宣告變數方式 const 與 let let 用來宣告一個變數像 var 一樣，不過 let 是塊級作用域， var 是函數作用域。 const const 用來宣告一個常數且一定要賦值，其值不能再藉由指派運算子（例如等號運算子）進行變動，否則報錯。常數名稱可以用大寫表示以利區分： //宣告常數一定要賦值 const A //Uncaught SyntaxError: Missing initializer in const declaration const PI = 3.14

此篇內容節錄並改寫自 使用 Promise 處理非同步 Promise 是 JavaScript 中進行非同步操作的新的解決方案 Promise 是一個建構式 Promise 物件用來封裝一個非同步操作，再使用 then() 拿到結果 ES7 await 語法更方便簡單 為什麼要使用 Promise？ 解決回呼地獄的問題

為什要要使用 Git ? 記錄 Git 記錄修改，而不是檔案。資料夾對於 Git 來說只是路徑，並不會判別資料夾，除非在資料夾內新增檔案或者資料夾內的檔案有所變動。 回復 寫錯東西或者後悔變動的檔案可以回復之前的樣子。 合作 Git Branch 可以開拓分支進行平行運作而不互相干擾，最後還可以合併在一起。

MVVM 的概念 此小節節錄自 sunbu。 在說 MVVM 之前先介紹一下 MVC，MVC 本身也是一個經典的 ｗeb 開發架構，現在很多的開發架構就是用 MVC ，MVC 包含了前後端。 這邊 MVC 分別為 view、controller 及 model，那 view 指的就是我們看到的畫面，controller 就是控制器，model 指的就是模型，這裡也是資料介接的地方。 MVC 的架構中 controller 是做轉接的，model 是取得資料用的。 在一開始的時候會發送一個需求給 controller，比方說我們要取得資料列表的畫面，這個資料列表是網址下面帶有一個 list 的目錄下，此時使用者會對 list 本身發送一個請求說我要看這個 data 的內容，那 view 就會對 controller 發送一個需求，那在目前還沒有實際取得 data，只是發送一個請求說『我要看資料表』，此時 controller 就會對 model 說，請把資料表吐給我，那這個時候他就會去要求 model，model 得知此事後就會把 DB 裡的相關資料表取出來，比如說我要某某人的名字，那它把取出來並且把 data 返回給 controller，這個時候conroller 才會把整個網頁的內容呈現在某頁的樣板，一併回給畫面本身，這就是很基本的 MVC 架構。

一、啟用一個 Vue Cli 並且 引用帶入專屬 API 前置作業： 安裝 Vue Cli：npm install -g vue-cli （注意這是 2.x 版本） 啟用：vue init webpack my-project 安裝 vue-axios：npm install --save axios vue-axios 注意若你是使用 Vue.js 2.x ，vue-axios 必須使用 2.x 舊版，請在 package.json 中 dependencies 移除 "vue-axios"，並安裝 2.x 版本：npm install --save vue-axios@2

此篇內容參考自 前後端分離與 SPA 和 跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR 請簡單解釋什麼是 Single Page Application 又稱為「單頁面應用程式」，SPA 是透過 Ajax 串接 API 來取得資料，並在 client 端動態新增資料，由 Server-side render 轉為 Client-side render，這些交換資料的過程都是在單一頁面完成而不用換頁，對使用者來說有比較好的使用體驗。 對比 SPA，早期的網頁多為 Multi-page Application 又稱 MPA「多頁面應用程式」，每次交換資料都需重新刷新頁面中斷使用者體驗。 SPA 的優缺點為何 優點：

Cookie 是什麼？在 HTTP 這一層要怎麼設定 Cookie，瀏覽器又是怎麼把 Cookie 帶去 Server 的？ Cookie 是個儲存在瀏覽器的小型文字檔案，伺服器可以透過 Set-Cookie 這個 response header 來讓瀏覽器儲存相對應的 Cookie。而下次瀏覽器發送 Request 時，會把相對應的 Cookie 放在 Header 一起傳過去，Server 就可以拿到資料。 Session 是什麼？ Session 原本英文的意思是指一段時間，在網路的世界我覺得真正的意思是指 Stateful session 即有狀態的一段時間，因為 HTTP 協定是一個無狀態協定，每個 Request 都是獨立的、彼此沒有關聯，而透過建立 Session 就可以讓 Request 保留狀態，伺服器就能辨別不同的 Request 是否為同一個人所發出。 在 Cookie 還沒出現以前，一樣可以建立 Session，像是可以把狀態資訊用 Qurey String 的方式放在網址列上面或使用其他方法。但 Cookie 出現以後建立 Session 變成一件更容易的事，只要使用 Set-Cookie 與 Cookie 這兩個 header 就好了。 建立 Session 之後，所儲存的狀態就叫做 Session information，可以翻作 Session 資訊。若是選擇把這些資訊存在 Cookie 裡面，就叫做 Cookie-based session；還有另一種方法則是在 Cookie 裡面只存一個 SessionID，其他的 Session 資訊都存在 Server 端，靠著這個 ID 把兩者關聯起來。

此篇內容引用並改寫自 [week9] 給自己看的 PHP 和 MySQL 溝通 MySQL 是一種關聯式資料庫。 關聯式資料庫 儲存格式為 table （資料表） 資料表之間互相關聯（共用 id 、學號等等） 結構穩定，但相對彈性低 常見如 MySQL、PostgreSQL、Microsoft SQL Server、SQLite

Document Object Model （文件物件模型）是一個在瀏覽器上提供的介面，瀏覽器將 html 文件（document） 解析為一個個的節點（node）、物件（object），讓我們能用 JavaScript 或其它程式語言來操作、使用它們。 DOM 其實就是瀏覽器提供給我們的一個 API，讓我們能夠在一個固定的標準上去操作網頁裡的元素。 事件傳遞機制的順序是什麼；什麼是冒泡，什麼又是捕獲？ 事件傳遞分為三個階段，首先是捕獲階段，次要為目標階段，最後是冒泡階段： 捕獲：從瀏覽器的網頁視窗（window）開始，進入文件（document），進入 HTML，然後一層一層的傳到觸發事件的目標。 目標：傳遞到目標，這個階段不屬於捕獲也不屬於冒泡。 冒泡：從目標開始，一層層回傳到網頁視窗（window）為止。

此內容參考自 Jest | 讓 Jest 為你的 Code 做測試-基礎用法教學 與 Day17 | 不知道對不對，就把邏輯通通測起來 feat. Jest。 Jest 安裝懶人包 開啟命令提示字元，cd 到想要安裝 Jest 的資料夾 輸入 npm init -y，在 node.js 環境下建立一個 package.json 檔案 輸入 npm install --save-dev jest，透過 npm 套件管理工具下載 Jest 測試框架到專案的執行環境中 打開 package.json，並將 "scripts" 中的 key "test" 的值改為 "jest"： //...略