# 1129 月檢視

## Angular

Angular 簡介（MVVM、CSR-SPA）
Primeng
localStorage

## Java Spring Boot

* PO、DTO、DAO、(VO、BO)
* PO(Persistant Object):
* DTO(Data Transfer Object):
* DAO(Data Access Object):
* VO(Value Object):
* BO(Business Object):
* Http
* Request、Response
* Restful(Get、Post、Delete、Put)
* Jpa、JDBC
* IOC(控制反轉)、DI(依賴注入)
* IOC控制反轉: 物件本來是我 new，現在變成 Spring new
* DI(依賴注入): 把外部的值傳進 method
* Annotation(Spring Bean Pool)
* Hibernate
*
* Transaction(交易)(ACID)
* 交易時若中途失敗不能commit任何資料庫更改
* 原子性(Atomicity):
* 一個transaction中的所有操作要嘛全部完成要嘛全部不完成，不會結束在中間某個環節。
* 交易在執行過程中發生錯誤會被rollback到交易開始前的狀態，就像此交易沒有被執行過一樣。
* 一致性(Consistency):
* 在交易開始前以及交易結束後資料庫的完整性沒有被破壞。
* 表示寫入的資料必須完全符合所有預設的拘束。
* 隔離性(Isolation):
* 資料庫允許多個交易同時對資料近修讀寫以及修改，隔離性可以防止多個交易同時執行時由於交叉執行而導致資料不一致。(確保多個交易同時執行時，每個交易不會互相影響到。)
* Isolation的三個現象
* Dirty Read: 一個transaction還沒有commit，但其他卻讀得的到已經更新的結果。
* Non-repeatable reads: 在同一個transaction裡面連續使用相同的query讀取多次資料，但是相同Query卻回傳不同的結果
* Phantom reads: 當在同一個transaction連續兩次讀取時，讀取出來的筆數跟上次不同。
* Ex: Transaction A 第一次讀取了帳戶裡面餘額介於 900–1000 這個範圍的帳戶，結果總共有兩筆：Alice 跟 Bob。在 Transaction A 還沒結束的同時，Transaction B 更新了 Alice’s balance 為 700，這時如果 Transaction A 再次查詢相同條件時，筆數從原本的 2 筆變成 1 筆，這個情況就是 Phantom reads。
* 交易隔離分四種等級
* Read uncommitted: 代表transaction可以讀到別的transaction尚未commit的資料，在此等級三個問題都沒有解決
* Read committed: 代表transaction只能讀到別的transaction已經commit的資料，沒有commit的話就不會讀到，在此等級解決了Dirty Read的問題。
* Repeatable read: 代表每次transaction要讀取特定欄位的資料時，只要quary條件相同時，讀到的資料就會相同。在這個等級解決了Non-repeatable reads的問題。
* Serializable: 代表在多個transaction同時執行時，只要transcation順序相同，得到的結果一定相同。
* 比如說 Transaction A 先執行了接下來再執行 Transaction B，在同樣的條件下，每次執行都會得到一樣的結果。在這個等級下連同 Phantom reads 也會一併被解決。
* 

* 持久性(Durability):
* 交易處理結束後，對資料的修改是永久的，即便系統故障也不會丟失。
* @Transactional
* [propagation](https://www.tpisoftware.com/tpu/articleDetails/2741) -> 描述事務的傳播行為
* PROPAGATION_MANDATORY: 使用當前交易，若當前無交易就拋出異常。
* PROPAGATION_NESTED: 如果當前存在交易，則嵌套在交易內執行，如果當前沒有交易，則執行與PROPAGATION_REQUIRED類似操作。
* PROPAGATION_NEVER:以非交易方式執行，若存在當前交易則拋出異常。
* PROPAGATION_NOT_SUPPORTED: 不支持當前 Transaction；而是始終以非 Transaction 方式執行。
* **PROPAGATION_REQUIRED(默認預設): 如果當前沒有交易就新建一個交易，如果已經存在一個交易中就加入到這個交易中。
* **PROPAGATION_REQUIRES_NEW: 創建一個新 Transaction，如果 Transaction 存在則暫停當前 Transaction
* PROPAGATION_SUPPORTS:支持當前交易，如果當前沒有交易就以非交易執行。
* TIMEOUT_DEFAULT: 使用基礎Transaction系統的默認超時，如果不支持，則不使用默認超時。

* MVC
* Model
* View
* Controller
* Swagger(工具)
* 後端API更視覺化的呈現
* 測試API
* 好處
* 讓User更了解如何使用API
* 讓前端開發者在接API時可以一目瞭然需要餵什麼參數並且可以拿回什麼，大幅提升開發效率
* 專案寫出來的Code等於技術文件，減少寫文件以及維護文件的成本
* 使用線上文件進行測試，透過網頁立即知道API回傳的結果，節省溝通時間提升效率

------------------------------------
## Angular 變更偵測(Change Detection)

data = {
    num: 1;
}

#### 無觸發變更偵測

data.num = data.num + 1;

對data物件本身而言是沒有變更的，因為物件對程式而言是一個參考位置，而在此參考位置不變，只變更裡面的屬性。

#### 觸發變更偵測

data = {
    num: data.num + 1;
}

對程式來說是真正的變更，因為建立了一個新物件並指派給data。

** 手動觸發變更偵測 **

data = [...data];

-------------
## 參數化查詢(parameterized statement)

目前最有效可以預防 sql Injection 的防禦方式，且比起拼接SQL語句更具效能優勢

因為資料庫會快取解析SQL語句的位元組碼，所以相同的SQL語句(參數不同)可以重複使用而不需重複解析。

而也因為資料庫不會將參數內容是為SQL指令的一部分進行處理，而是在解析完成後(Prepared Statement 預編譯語句)才套用參數執行，因此就算參數中含有具破壞性的指令(ex: where id = 1 or 1 = 1)，也不會被執行。藉此可以有效預防 sql Injection攻擊行為。

------------------------------------
## Java 接值

基本型別: boolean、char、byte、short、int、long、float、double
引用型別: Integer、String... (class 類別)

基本型別接值 -> 無傳值會有初始值
引用型別接值 -> 無傳值會是 null

基本上都用引用型別接值

------------------------------------
## log 盡量不要拼接

#### Bad

log.info("data: " + data.toString());

#### Better

log.info("{data: }", data);

------
## Angular component 啟動時呼叫順序

constructor -> ngOnInit()

constructor: 處理注入各種元件，應只用於初始化類別成員、變數。不在Angular生命週期中，Angular 掌握不到。
ngOnInit: 處理預設值以及初始動作。

**constructor 取不到 @Input 的值**

-------
## Angular - ngIf vs [hidden]

ngIf: 會重新載入 Component 並觸發 ngOnInit
[hidden]: 同一個component顯示 / 隱藏

-------
## 基本知識
語義化版本號

**1.2.3**

* 1 -> 主版號: 不可向下兼容
* 2 -> 次版號: 可向下兼容(主要是新增功能等能向下兼容的修改)
* 3 -> 修訂號: 主要是 Bug 修復

-------
## Angular - 常用指令

|指令 |作用|
|-----|--------|
|ng new [Application name]|建立新專案 |
|ng g c [Component name] |建立component|
|ng g p [pipe name] |建立pipe |
|ng g d [directive name] |建立directive|
|ng g s [service name] |建立service |
|ng g g [guard name] |建立guard |
|ng build |建置專案 |
|ng serve |啟動專案 |

-------
## SPA vs MPA

SPA(Single Page Application): 單頁式應用
* SPA 透過使用者的瀏覽器，運行 js 以進行 CSR。
* Example: Angular、Vue、React
* Advantage
* 使用者體驗佳，更平滑的UX體驗，MPA頁面切換的時候需要向SERVER請求頁面，當網路不好的時候就可能產生白畫面。
* 降低伺服器負載: 伺服器端不需要生成HTML。
* Disadvantage
* SEO不好，SPA要透過CSR，所以畫面是動態產生的。部分SEO，透過爬蟲爬取網頁CSR就會提升爬蟲運行難度，導致SEO下降。
* 解決方法: 透過SSR混合CSR，Universal Rendering來解決。

MPA(Mutiple Page Application): 多頁式應用
* 傳統網頁

### CSR vs SSR

CSR (Client Side Rander 客戶端渲染): 所有頁面渲染都透過JavaScript在瀏覽器端完成，包括邏輯、取資料、路由、template。
SSR (Server Side Rander 伺服器端渲染):

------
## RxJS subscribe後要取消訂閱嗎
結束 Observable
1. observable.onComplete();
2. observable.onError();
3. 調用 unSubscribe() 方法

前面兩種皆會在執行完成自動結束observable，若都沒有就要使用unSubscribe()來主動結束observable並釋放記憶體。

-------
## TypeScript - 可選方法

interface Animal {
    name: string;
    weight: number;
    survive: boolean;
    run?(): void;
}

其中在該屬性或方法後面加上 **?** ( **run?(): void** ) 代表該屬性或方法是可選的，實作他的class不一定要擁有此屬性或方法。

------
## 前端提升效能 - Dynamic import

用到才載入 (lazy load)

------
## 匿名內部類別 (Anonymous Inner Class)

創建一個內部類別來實作，因為不需要重用，所以