:::warning
:bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受!
:::
1. 新增專案資料夾
mkdir project
cd project
2. 設定 package.json
npm init -y
- JavaScript中的事件循環 (The Event Loop in JavaScript) :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: MDN文件中對Event loop的定義 JavaScript中，並行模型（concurrency model）建立於事件迴圈(event loop)的基礎上。Event loop的功能在於執行程式碼、蒐集與處理事件、以及執行等待中的次任務(sub-tasks). JavaScript is primarily single threaded. JavaScript是一種單線執行(single threaded)的程式語言，亦即一次只有一條線執行所有的事。例如，有一個for迴圈需要花一段時間執行，則必須等待這個for迴圈執行完畢，才能繼續執行後面的程式碼，這就會造成阻塞(blocking)。
Emily Yu changed 22 days agoView mode - :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: :memo: 簡介 當網站有些常常需要存取的資料、或是要依賴第三方API回傳資料時，經常需要花許多時間等待對方的伺服器回應，造成頁面載入時間過長；回想一下，當我們在瀏覽購物網站時，對於那些需要等待很久的網站頁面，會有什麼反應呢？耐心等它跑完、或是直接關掉？大部分的人應該是選擇後者吧！ 因此，提升頁面載入速度可以有效改善使用者體驗，同時也可以減少伺服器的負擔，如果是使用第三方API，也不需要不斷對它發送請求(畢竟第三方API時常有存取次數限制)，可以先將這些資料快取存起來，之後發送請求的時候就可以使用快取中的資料，直到快取過期。 :memo: 情境Emily Yu changed 2 months agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: <mark> 新增資料庫</mark> 先到MongoDB Atlas建一個雲端資料庫，或是建立一個本地資料庫(這裡下載) <mark> 連線專案伺服器與資料庫 </mark> 在專案中安裝MongoDB的ODM-Mongoose:npm i mongoose 設定專案與資料庫的連線:Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: <mark> 1. 新增資料庫</mark> 在MySQL Workbench中的Query頁面輸入指令： drop database if exists <database_name>; create database <database_name>; use <database_name>;Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: :memo: 什麼是Cross-Site Request Forgery (CSRF) Cross-Site Request Forgery (CSRF)，翻譯成跨站請求偽造，是一種常見的攻擊手法，使用者在不知情的情況下，代表了攻擊者向伺服器發送請求。以下簡單說明： 角色 A網站：銀行網站 B網站：惡意網站Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: :memo: 關聯式資料庫(RDBMS, Relational Database Management System) RDBMS是什麼 資料以資料表(table)的形式存在資料庫中，資料表之間有事先定義的關係，資料表中的一欄(column)代表某項屬性、一列(row)代表一個實體相關屬性的數值，每個資料表都具有主鍵(primary key)方便查詢，並且資料表間的關係可以透過外鍵(foreign key)建立。 RDBMS的優點 資料完整性(Data Integrity)：RDBMS具有ACID的特性，ACID代表（參考AWS關於RDBMS的介紹）：不可分割性 (Atomic):交易必須整體成功執行，若是交易有一部分操作失敗，整個交易都會失效Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: :memo: Nodemailer安裝與設定 首先參閱Nodemailer的文件。 安裝 npm install --save nodemailer 安裝完成後到package.json確認，沒問題就來進行接下來的設定，看一下文件的說明：Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: :::warning :bangbang: 2023/08 更新：Railway自2023年8月1日起取消免費方案，最低收費Hobby Plan每個月5美元，各方案詳細收費標準可參考官網。 ::: 專案簡介 用Node.js完成的互動式社交網站Simple Twitter，搭配關聯式資料庫MySQL(v8.0)，採前後端分離開發，這次要部署的是後端repo。Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: :memo: HTTP 的無狀態 (Stateless) 特性 HTTP通訊協定(HTTP Protocol)具無狀態(Stateless)的特性，這表示每個伺服器所接收的HTTP request是獨立的，並且與先前接收到的request不相關。伺服器不會保存client的狀態，因此伺服器給予的response是根據當下的狀態。 無狀態協定具有特性如下: 簡化了伺服器的設計Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: Q1. <script> 在HTML中的位置放在<body>最底部，請問：在瀏覽器渲染流程中，會在什麼時機點載入JavaScript 程式碼？為什麼需要這樣做？ A1. 瀏覽器解析HTML的順序是由上而下，當遇到一個<script> 需載入外部的JavaScript檔案時，此時瀏覽器會暫停解析下方的HTML內容，直到JS檔案解析完成，這種情況會導致頁面停滯，造成不好的使用者體驗。因此，將<script> 放在</body>之前可以讓所有靜態HTML內容解析完畢後，再載入JS檔案，避免頁面阻塞，帶來良好的使用者體驗。 Q2. 若要在 DOM 生成的同時，一併載入 JavaScript，針對<script>還有什麼處理方式？ A2. 將 <script> 放在<body>最底部也有缺點，特別是當script和stylesheet檔案很大時，需要花很久的時間等待腳本載入，導致使用者一開始看到的畫面缺乏動態功能，同樣也會造成不好的使用者體驗。如果想要「在 DOM 生成的同時，一併載入 JavaScript」，現代的瀏覽器支援在<script>中加入async或defer的屬性，讓瀏覽器知道可以在生成DOM的同時，載入腳本。Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: :memo: HTTP 的無狀態 (Stateless) 特性 HTTP通訊協定(HTTP Protocol)具無狀態(Stateless)的特性，這表示每個伺服器所接收的HTTP request是獨立的，並且與先前接收到的request不相關。伺服器不會保存client的狀態，因此伺服器給予的response是根據當下的狀態；也就是說，client端發送的第一個request進行登入，在第二個request發送時，伺服器無法得知第二個request是否來自同一個使用者。 因此，如果我們希望伺服器能認出 request 的狀態 (例如之前已經登入)，我們可以讓 request 本身攜帶充足的資訊，來幫助伺服器判斷這個 request 是否為會員系統裡的某位使用者，再進一步判斷這位使用者的狀態，這是一種「交換憑證」的概念，先前提到的cookie與session機制為達成交換憑證的策略之一，然而，cookie的值限定在特定網域中可以被存取，在前後端分離的開發模式中，如果後端API站和前端網站部署在不同網域，則無法跨網域使用瀏覽器提供的cookie機制，因此，可以採用token-based的機制來進行交換憑證。 :memo: 憑證Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: :memo: 什麼是快取(Cache) 當web app規模越來越大、使用者越來越多，頁面加載的時間也變得更久；因此，需要一個更快速的方式提供網站內容給使用者。快取提供了這種功能，快取指的是將資料儲存在具有高速特性的資料儲存層的一個過程，尤其針對可重複使用的資料，後續發送請求這些資料時，可以更有效率地重複使用之前擷取或運算過的資料。 :memo: 快取的好處與使用情境 好處 提高性能(performance)：Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: :memo: 前言 當我們想要把資料放在Google Sheets上方便閱讀、計算等操作的時候，可以透過串接Google Sheets API製作、寫入資料。這裡介紹如何應用Node.js串接Google Sheets API，廢話不多說就開始實作吧！ :memo: 取得Google憑證 首先，需要有Google憑證(credentials)才可以使用這個服務。Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: :memo: 什麼是建構式(Constructor) 建構式(Constructor)是一種在創造物件時，執行初始化的函式。使用new關鍵字時，參數(arguments)將被傳入Constructor函式。以下分別介紹傳統的constructor function，以及ES6引入的class中的constructor方法。 物件建構函式 (The Object Constructor Function) 要使用constructor創造物件，只需定義一個帶有任意數量參數(arguments)的 JavaScript 函式即可。在函式內部，關鍵字this指的是正在創造的物件，因此我們可以用this.property來寫入該物件的屬性。constructor函式的第一個字母最好使用大寫字母，以方便溝通、及避免與一般函式混淆。 例如：Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: :memo: 什麼是HTTP Headers 無論是瀏覽器發送的request或伺服器回傳的response中，都包含headers，其中記錄該request或response的相關的相關資訊。這邊要談的是伺服器回傳response中的headers，其中包含日期、檔案大小及類型等基本資訊，以及安全性資訊如該網站使用的政策、通訊政策、或限制瀏覽器是否可以在其他網站的iframe中渲染當前網頁等。這些安全性相關的headers同時保護應用程式與使用者的安全，避免XSS等攻擊，同時提升了該網站的可信度，提升其在SEO中的排名。 Google Translate的Response Headers :memo: 常見的安全性HeadersEmily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: :memo: 前言 在MDN文件中提到，JavaScript並非一個以class為基礎(class-based)的語言(例如Java、C++)，儘管在JavaScript中有class這個關鍵字，但那只是為了開發者撰寫更直觀易懂的語法糖；事實上，JavaScript是以原型為基礎(prototype-based)的語言。 :memo: 繼承(Inheritance) 什麼是繼承 繼承(Inheritance)可以說是物件導向程式設計（object-oriented programming, OOP）最重要的原則之一，繼承可以讓子類別(child class/subclass)沿用父類別(parent class/ superclass)的屬性與功能，以MDN文件的例子而言:Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: (Photo by Kalyani Akella on Unsplash) 此Curry非彼Curry，不過Naan沾咖哩真的好好吃啊:yum: :memo: 前言 柯里化(Currying)是functional programming的一種技術 ，透過currying可以編寫模組化、易於測試和高度可重複使用的程式碼。Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: :memo: 功能 輸入原始網址，送出表單後會回傳格式化後的短網址。 在伺服器啟動期間，使用者可以在瀏覽器的網址列，輸入你提供的短網址，瀏覽器就會導向原本的網站 短網址輸出格式為 5 碼英數組合 使用者可以按 Copy 來複製縮短後的網址Emily Yu changed 2 years agoView mode
- :::warning :bulb: 本站筆記已同步更新到我的個人網站囉! 歡迎參觀與閱讀，體驗不同的視覺感受! ::: API、伺服器、資料庫的關係 (圖片為作者自製，轉載請註明來源) :memo: 什麼是RESTful API REST為Representational State Transfer的簡寫，意思是「表現層狀態轉換」， 是一種軟體架構風格，使系統間溝通更容易；而 RESTful API 是符合REST原則的API架構，能讓兩個電腦系統用來安全地透過網際網路交換資訊的介面，特點是它們是無狀態的(stateless)，並且將客戶端和伺服器端的關注點分離。Emily Yu changed 2 years agoView mode
