---
title: Note
tags: Concept
---

## 背景
### 對電腦的了解?
#### 1. 硬體
* 規格
* 作業系統(三種)，==Windows== / ==IOS== / Linux => 黃底的代表較多人使用
* 運行APP的server, 只會是Windows或者Linux系統. Linux占大多數, 且同樣的硬體規格, Linux效能會比Windows好
* Physical servers(實體機) - 我們看得到的實體電腦, 一台實體機可以直接安裝多個作業系統, 目前聽過安裝IOS+windows, 或者windows+windows. 如果要IOS或windows再搭Linux, 就不太會把Linux也裝在實體機上, 會把Linux裝在VM內
* VM - virtual machines (虛擬機) - 在某實體機內建VM, 一台實體機可以建多個VM, VM必須安裝作業系統!
* Container(容器) - 不需要安裝作業系統, 神奇的空間, 最火紅的是docker. 最大優點是, 在不同電腦, 不同的作業系統, 不同的硬體背景, 只要裝上docker, 把專案程式碼包成容器, 就都能順利執行!! (完美解決跑專案程式碼要先搞定環境的痛苦問題)
* 跟容器有關的關鍵字 - Docker. Kubernetes(K8S) 管理容器們的工具
* [補充VM跟容器的差異](https://hackmd.io/c9RQP-xKRACWqRdHnyFMPg)
#### 2. 軟體
* 瀏覽器
* 最多人使用的會是Chrome, Safari, Firefox
* IE從Nov 2020開始, 不再更新, 所以未來趨勢, 開發的app不太會需要支援IE
* 瀏覽器的底層不一定相同, 所以同樣的JavaScript, 或者同樣的CSS, 在不同的瀏覽器, 結果不一定會一樣 => both operating system and browser matter
* 同樣的瀏覽器, 在電腦上跟在手機上, 結果也不一定一樣
* 中國有更多奇奇怪怪底層不知道怎麼寫的瀏覽器. 而前端的困難處之一, 就是寫出來的東西, 要能兼容該產品"多數客群使用的瀏覽器們"

* 文書(微軟office / google docs sheet)
* [Markdown語法](https://wcc723.github.io/development/2019/11/23/ten-mins-learn-markdown/) - 近幾年看到的文件, 多半用此語法撰寫, 本文也是
* GUI - Graphical user interface - 圖形化的操作介面
所有你使用的軟體都是.
* CLI - command-line interface - 透過指令操作

### 對手機的了解?
#### 1. 硬體
* 規格
* 作業系統(三種)，Windows / ==IOS== / ==Android(Linux)== => 黃底的代表較多人使用
#### 2. 軟體
* 瀏覽器 (同上)
### 對英語的感情深度?
* 一手資訊/ 官方文件 / 爬文找答案，答案的數量 / 學習資源的多寡
* 命名的好壞(關係到你註解的長度+維護的困難度)

---

## 程式的世界
### 工程師，就是problem solver
### 前端/後端(API)

1. 前端工程師，做出來是給人用的網站，好用使用者才會想要用，好看也很重要 (UI/UX的重要性) => ==前端技術，相較於後端技術, 推陳出新更快速，工具更多更雜==
2. RWD，手機/電腦，==觀察這些網站的長相(設計)，兩側留空白，因為每個人電腦螢幕解析度不同(也跟寬度有關係)== [臉書](https://www.facebook.com/) / [亞馬遜](https://www.amazon.com/) / [露天拍賣](https://www.ruten.com.tw/) / [博客來](https://www.books.com.tw/)

3. [前台](https://glb.012wenchuan.com/) / [後台](http://admin.wc012.com/admin)
4. 可以多觀察別人的網頁, 像是進到某一頁時, 觀察這一個畫面, 做了多少邏輯？
5. 前後端的檢核。==資料庫的長相，每個欄位有其規定，必須確保下次撈回的資料是正確的，否則會連顯示在畫面上都有問題==

### 前端相關名詞

#### 前端技術組成 => 永遠都只有 HTML+ CSS+ JavaScript, 瀏覽器看得到的部分才屬於前端
* HTML
*  [HTML5](https://zh.wikipedia.org/wiki/HTML5) - HTML5提供了新屬性、更有語意的標籤、增強的表單元素、音訊與視頻的增強支援、二維繪圖API、離線資料庫…等。

* CSS
*  CSS3
* SASS/SCSS - CSS升級版, 瀏覽器沒辦法懂, 所以SASS/SCSS寫完還是需要編譯成CSS.
* 較知名的CSS framework, UI framework
* 通用/切版使用 - [Bootstrap](https://getbootstrap.com/docs/5.1/getting-started/introduction/), [Tailwind](https://tailwindcss.com/docs)
* 特別for Vue - [Vuetify](https://vuetifyjs.com/en/getting-started/installation/), [Element](https://element.eleme.io/#/en-US)
* 特別for React - [Ant Design](https://ant.design/docs/react/introduce), [ Material-UI](https://v4.mui.com/getting-started/installation/), [Chakra UI](https://chakra-ui.com/docs/getting-started)
* 特別for Angualr - [Prime NG](https://www.primefaces.org/primeng/)

* JavaScript
* 因為JavaScript本身是弱型別的程式語言(Don't really care about data type that much), 相對出錯率較高, 後來Microsoft開發出了[TypeScript](https://en.wikipedia.org/wiki/TypeScript), TypeScript是JavaScript的加強版, 本身是強型別語言, 但瀏覽器只看得懂JavaScript, 所以TypeScript寫完, 也是需要編譯成JavaScript.
* 長命百歲的通用Library
* jQeury - 為什麼近年會被框架取代? 因為它直接操作DOM, 在畫面異動頻繁的case, 效能較差. 而且對於大專案, 框架在開發速度/維護便利性, 遠遠勝過jQuery.
* 前端三大框架
* [React](https://en.wikipedia.org/wiki/React_(JavaScript_library)) (**Facebook**) - 其實只是個Library, 當初是為了方便開發UI所以才有React. 那你會問,UI以外的部分呢? 像是處理邏輯怎麼辦 => 工程師自己想辦法阿!!! 但是React是前端三大框架, 社群最龐大的, 所以相關套件也最多.
* [Angular](https://en.wikipedia.org/wiki/Angular_(web_framework)) (**Google**) - Angular的前身是AngularJS, 不要小看它的前身名字只多加了JS兩個字, AngularJS難用到爆炸.
* [Vue](https://en.wikipedia.org/wiki/Vue.js) (**尤雨溪**) - 因為不像其他兩個框架是Google或者Facebook這種大廠商開發的, 所以一度遭質疑能否存活很久, 大家開發APP當然會怕萬一有一天框架倒了怎麼辦. 後來"阿里巴巴"等等中國的大企業都使用Vue, Vue在中國的市占率越來越高, 目前在中國跟台灣已經超越React.

| | 學習難度 | 世界市佔率 | 台灣/中國市佔率 |
| ----------- | ------- | -------- | ------------ |
| React | 中 | 1 | 2 |
| Angular | 高 | 2 | 3 |
| Vue | 低 | 2 | 1 |

#### 瀏覽器渲染方式
* CSR - client side rendering 客戶端渲染/瀏覽器端渲染 => 畫面上資料在user打開瀏覽器, 進到網頁, 才開始生成.
* 優點: 第一次進到網頁快(因為一開始會是空白頁), 之後切換頁面快(因為都在client端做掉,不需要再跑一次server端)
* 缺點: 如果資料載入較慢, 使用者會看到一開始的空白頁. 因為原本是空白頁, 網路爬蟲是爬不到資料的, 所以也沒辦法做SEO.
* SSR - server side rendering 伺服器端渲染/服務器端渲染 =>
* 優點: 當用戶看到網頁時, 網頁都是完整的(因為在server端生成畫面,才會回傳到瀏覽器上), SEO好做
* 缺點: 第一次進到網頁慢(因為在server端生成畫面,才會回傳到瀏覽器上)
* SSG - static side generation 靜態網頁生成 =>
* 優點: 生成速度比SSR快些 (因為畫面全部都已經做好,放在server上), SEO好做
* 缺點: 因為畫面都是預生成, 不適合動態資料多的case

[其他參考資料](https://medium.com/dean-lin/ssr-csr%E5%90%8D%E8%A9%9E%E7%90%86%E8%A7%A3-%E6%87%89%E7%94%A8%E5%A0%B4%E6%99%AF-119ca6f5ecc)

### 後端相關
#### 業界較常見的後端程式語言
* Java - 老牌後端語言, 發產成熟. 近幾年最常見的框架是Spring Boot (Spring再包一層的框架)
* C# .NET
* Python - 近年火起來的, 常見用於大數據分析, 網路爬蟲. 學習難度低. 有Python2跟Python3. 最常見的框架是Flask.
* Node.js - JavaScript的後端框架, 最常見的是Express (Node.js再包一層的框架)
* Go - 近年火起來的 - 聽說本身效能不錯 (通常越低階的程式語言, 效能越好, 越高階的程式語言, 效能越差...)
* PHP - 萬年不衰, 開發速度快, 本身是弱型別, 做小系統可以, 做大系統處理要高併發, 較不合適.

#### API相關名詞
* API種類
* Restful - 最最常見, 業界大概80%以上都是用這方式
* POST = 新增
* GET = 讀取
* PUT (或PATCH) = 更新
* DELETE = 刪除
* [補充GET POST方法長度限制](https://www.itread01.com/content/1546869788.html) => 其實實際上, get要超過那個長度限制, 很難, 但是在開發時, 還是會看狀況, 以防萬一
* 更新用PUT跟PATCH的差異 => 當我們寫一支API, 假設有10個欄位. id,姓名,電話,地址,信箱...一堆, 如果後端寫API使用put這個method, 即使我只想更改, 這筆資料的"姓名", 我還是必須傳10個欄位. 但如果API使用patch, 我可以只傳"姓名".
* GraphQL - 其實用的是POST, 優點是一次可以把所有想要撈的資料都拿到(Restful要打多次API,才能做到的事情, GraphQL一次就做到了.)
* 缺點是 1.全部API的進入點(entry point)都是同一個
* 2. 上面那個缺點也同時導致安全性降低
* 3. 比起Restful, error message閱讀性不好
* web socket - 上述API都是被動的, 要打API才能撈回資料, web socket能讓connection持續, 有資料更新, 就會主動送回資料.

#### 資料庫相關名詞
* SQL 關聯式資料庫
* MySQL - 最常見的
* PostgreSQL
* Microsoft SQL Server / MSSQL / SQL Server
* Oracle
* NoSQL (Non-SQL，又為Not only SQL) 非關聯式資料庫
* MongoDB
* reddis - 用在快取

* [SQL跟NoSQL差異及使用場景](https://hackmd.io/qR0dvjlVR0WDkZiN14bCIQ)

### 手機端程式語言
* Swift
* Flutter
* Objective-C
* Java
* 現在有很多方式可以寫手機app, 即使用前端框架Vue, React, Angular, 也有對應方式可以寫出手機app
* React - [Ionic](https://ionicframework.com/), [React Native](https://reactnative.dev/)
* Vue - [Ionic](https://ionicframework.com/), [uni-app](https://uniapp.dcloud.io/README)
* Angular - [Ionic](https://ionicframework.com/)

### 維運相關名詞
* Cloud service
* AWS - Amazon 2006
* GCP - Google 2010
* Azure - 微軟 2013
* 阿里雲
* Docker
* Jenkins (CICD工具) - 老牌, 最多人使用, plug-in 超多, 缺點是plug-in很多已經沒有在維護或更新
* CircleCI (CICD工具)
* Travis CI (CICD工具)
* 內網(Intranet) - 通常是192.168開頭的IP
* 外網(Internet) - 連到外面網路的IP
* 最常見的場景, 一條連外的網路(對外IP), 再透過IP分享器, 分給每個區域內的裝置, 每個裝置就會有自己的內網IP

### 其他相關名詞
* 高併發 - 極短的時間內, 大量request打到server.
* Git版本控制 => 建議爬文了解一下, 正常開發會怎樣走git flow
* 甘特圖 => PM可能需要會
* 環境

| 英文縮寫 | 英文 | 中文 |
| ----------- | ---------------------- | --------------- |
| DEV | development | 開發 |
| SIT | System Integrate Test | 系統整合測試（內測）|
| UAT | User Acceptance Test | 用戶驗收測試 |
| PRD/PROD | production | 產品/正式/生產 |

## 後記
* 平常可以瀏覽自己喜歡的職缺, 看job requirement有些什麼, 多看幾篇, 一定會看到有些技能是反覆出現的, 再去Google或學習即可.
* 整個業界常用的關鍵字及tech stack有哪些, 也可以用此方法學習了解.
* [Stack overflow](https://insights.stackoverflow.com/survey/2021#technology-most-popular-technologies) 也是個了解業界tech stack有哪些的好地方