Sign in

前言

  1. 先統整 TEST 和 CI/CD 相關基礎知識。
  2. 之後再統整:
    (1) Node.js 的 Express Testing Tools
    (2) 串接 CI/CD 的實作方法

前言

  1. 目的:觀察和理解 Middleware 中的:
    (1) app.use、(2) next()、(3) Router 順序,對 request 流向的影響。
  2. 方法:建立一組 Router 設定檔(範例),包含 4 組設定
    (Name代稱[Router])和最終回傳 JSON:
    (1) Kevin [app.use]
    (2) John [POST/me]
    (3) Jimmy [app.use*]
    (4) Mary [GET/me]
    (5) Final JSON:res.json({answer: req.name})

Express-Using middleware

Express is a routing and middleware web framework that has minimal functionality of its own: An Express application is essentially a series of middleware function calls.

Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next.


前言

以範例理解 Currying 觀念和屬於弱型別 JavaScript型別強制轉換特性。

Currying

Currying is an advanced technique of working with functions. It’s used not only in JavaScript, but in other languages as well.

Currying is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c).

Currying doesn’t call a function. It just transforms it.

範例 1:

說明:(1) 資料傳遞方式、(2) 參數 x 和 y 值變化

  1. 命名 add5 = makeAdder(5),函式 makeAdder(x)的參數 x,固定代入
    5 後, 繼續執行inner func-return function(y)。
    但 inner func的return function(y) 只有參數 y,沒有 x,所以只會計算 x。
  2. 測試 console.log(“add5(0)”,add5(0)):
    可得知函式 add5內的參數為y,得知完整函式和參數 add5(y)。
    // 得出 5+0=5
  3. 執行 console.log(“add5(2)”,add5(2)):
    // 得出 5+2=7

範例 2…


前言

Alpha Camp 課程中,依據不同教師,包含約 2–3 種不同 Route 分流寫法。

我選擇對於自己較易理解的寫法,歸納統整成 organizational chart (組織圖),幫助提點記憶和快速查詢。

express-router 套件 (npm 官網)

express-router is a library for organizing routes of an express application.

express-router lets you write your express routes in a simpler way.
You just have to create a ‘routes’ folder inside your project and place your routes in an index.txt file.

規劃 Route 分流,主要參與對象(檔案)共 4 個:

  1. app.js
  2. routes [Folder]
    (1) routes/index.js (總路由器)
    (2) routes/routes.js (Full-stack features)
    (3) routes/apis.js (Back-end APIs)

app.js 結構:


更新

5. 重新上傳 Heroku:.env&FACEBOOK for Developers

前言

佈署 Heroku,以整合第三方 API-Imgur 切換成 MySQL Database 為例,步驟和指令:

  1. 前置作業
    (1) 建立個人 Heroku 帳號
    (2) Heroku CLI:Download and install
  2. PostgreSQL ( Heroku 預設 )
  3. 整合 Imgur API
  4. PostgreSQL 換成 MySQL (ClearDB MySQL)
  5. 重新上傳 Heroku:.env&FACEBOOK for Developers

2. PostgreSQL ( Heroku 預設 )

(1) 安裝套件:node-postgres

(2) 修改 config/config.json production 模式

(3) 建立 git commit

(4) Heroku CLI 初始化

(5) 佈署至 Heroku

(6) Heroku 啟動專案

(7) 建立 Heroku 新資料庫

(8) app.js 修改 Port

(9) 定義啟動腳本 Procfile

(10) 重新 commit,並上傳 Heroku

(11) 執行 Migration & Seeder

3. 整合 Imgur API

(1) 註冊 Imgur 帳號

(2) 安裝套件:imgur-node-api

(3)…


Also on Strikingly:
https://ryanx94.medium.com/javascript-1-the-this-concept-2-iife-immediately-invoked-function-expression-cceb60252674

更新

新增:

  1. 立即函式 IIFE (Immediately Invoked Function Expression)
  2. 立即函式 IIFE 對 this 的影響

前言

學習 this 觀念後,後續遇到應用情境,仍似懂非懂,因此歸納統整,儘量明確釐清:(1) this、(2) 前端 Views (MVC Framework)、(3) 物件導向的 Constructor (建構式函式),3者觀念和實務應用情境。

目前自己實務上,常用操作情境和 this 觀念:

  1. 前端 Views (MVC Framework):
    (1) 使用 this 的 Implicit Binding (隱式綁定),即 this 自動指向最近(父層)的 Object。
    (2) Controllers 將 Array Data 傳至 Views,Views 搭配 this 指向該 Array,幫助 render 頁面。
  2. Design Operational Data API (Object-oriented programming-Constructor):
    設計 API 時,透過物件導向的 Constructor (建構式函式)產生符合 JSON 的資料格式,另搭配使用 this 的 New Binding (new 關鍵字綁定)
  3. Arrow function (箭頭函式)不適用 this

this 定義

  1. JavaScript 中的 this ,會在調用某個 function 時,「自動」添加到該 function 中。
  2. 注意:this 是在 function 執行時才被自動添加在該 function 中,當 function 尚未執行時,無法確定…

Also on Strikingly:
https://site-4828247-981-6937.mystrikingly.com/blog/getting-data-from-request-req

更新

新增 URL (取得 “網址” 內容):2-3. req.method (取得 HTTP Method)

前言

Express-Request

The req object represents the HTTP request and has properties for the request query string, parameters, body, HTTP headers, and so on. In this documentation and by convention, the object is always referred to as req (and the HTTP response is res) but its actual name is determined by the parameters to the callback function in which you’re working.

根據常用 req 內容,依來源位置,歸納為 4 類(共5種):

  1. HTML Form (取得 “表單” 內容):req.body
  2. URL (取得 “網址” 內容):
    2-1. req.query、2-2. req.params、2–3. req.method (取得 HTTP Method)
  3. Passport 套件+資料關聯:req.user
  4. Flash Message

Also on Strikingly:
https://site-4828247-981-6937.mystrikingly.com/blog/javascript-array-related-functions-operators

前言

  1. 主要以 3 種方式統整常用陣列相關函數:

(1) 歸納功能類別:目前共12種功能分類
(2) 區分相似函數:如 slice()、splice()
(3) 區分該函數對原陣列影響:標註 改變/不改變 原陣列

2. 之後擴充時,主要新增 3 種情況:

(1) 上述既有架構內,新增其他函數。
(2) 新功能類別:如第13種功能大分類。
(3) 新實務運用:如 [對稱合併 2 陣列] 等實務操作,方便之後快速檢索和組合運用。

  1. 去頭、去尾
  2. 加頭、加尾
  3. 切出 & 產生新陣列
  4. 刪除/ …

Also on Strikingly:
https://site-4828247-981-6937.mystrikingly.com/blog/database-related-knowledge

前言

  1. 以 MECE (Mutually Exclusive, Collectively Exhaustive)原則,統整歸納Database 相關知識。
  2. 建立 organizational charts(組織架構圖),作為基礎架構,後續維護時,若學習新知,可持續擴充。

Database 分類架構

Data Structure


Also on Strikingly:
https://site-4828247-981-6937.mystrikingly.com/blog/json-web-token-jwt-authentication-csrf-cross-site-request-forgery

前言

雖已完成 JSON Web Token (JWT) 登入驗證機制,但一段時間後很容易忘記,因此統整出框架和重要觀念。

MDN-HTTP is stateless, but not sessionless

HTTP is stateless: there is no link between two requests being successively carried out on the same connection.
每個 request 獨立,Server 端和 Client 端不保持連線狀態,因此雙方狀態無即時更新。

This immediately has the prospect of being problematic for users attempting to interact with certain pages coherently, for example, using e-commerce shopping baskets.

But while the core of HTTP itself is stateless, HTTP cookies allow the use of stateful sessions.

Using header extensibility, HTTP Cookies are added to the workflow, allowing session creation on each HTTP request to share…

Ryan Lai

Equipped with web development, communication, and business analytical skills.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store