Try   HackMD
YAMLException: name of an alias node must contain at least one character at line 8, column 2: * 規格 ^

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跟容器的差異

2. 軟體

  • 瀏覽器

    • 最多人使用的會是Chrome, Safari, Firefox
    • IE從Nov 2020開始, 不再更新, 所以未來趨勢, 開發的app不太會需要支援IE
    • 瀏覽器的底層不一定相同, 所以同樣的JavaScript, 或者同樣的CSS, 在不同的瀏覽器, 結果不一定會一樣 => both operating system and browser matter
    • 同樣的瀏覽器, 在電腦上跟在手機上, 結果也不一定一樣
    • 中國有更多奇奇怪怪底層不知道怎麼寫的瀏覽器. 而前端的困難處之一, 就是寫出來的東西, 要能兼容該產品"多數客群使用的瀏覽器們"

  • 文書(微軟office / google docs sheet)

  • Markdown語法 - 近幾年看到的文件, 多半用此語法撰寫, 本文也是

  • GUI - Graphical user interface - 圖形化的操作介面
    所有你使用的軟體都是.

  • CLI - command-line interface - 透過指令操作

對手機的了解?

1. 硬體

  • 規格
  • 作業系統(三種)，Windows / IOS / Android(Linux) => 黃底的代表較多人使用

2. 軟體

  • 瀏覽器 (同上)

對英語的感情深度?

  • 一手資訊/ 官方文件 / 爬文找答案，答案的數量 / 學習資源的多寡
  • 命名的好壞(關係到你註解的長度+維護的困難度)

程式的世界

工程師，就是problem solver

前端/後端(API)

  1. 前端工程師，做出來是給人用的網站，好用使用者才會想要用，好看也很重要 (UI/UX的重要性) => 前端技術，相較於後端技術, 推陳出新更快速，工具更多更雜

  2. RWD，手機/電腦，觀察這些網站的長相(設計)，兩側留空白，因為每個人電腦螢幕解析度不同(也跟寬度有關係) 臉書 / 亞馬遜 / 露天拍賣 / 博客來

  3. 前台 / 後台

  4. 可以多觀察別人的網頁, 像是進到某一頁時, 觀察這一個畫面, 做了多少邏輯？

  5. 前後端的檢核。資料庫的長相，每個欄位有其規定，必須確保下次撈回的資料是正確的，否則會連顯示在畫面上都有問題

前端相關名詞

前端技術組成 => 永遠都只有 HTML+ CSS+ JavaScript, 瀏覽器看得到的部分才屬於前端

  • HTML

    • HTML5 - HTML5提供了新屬性、更有語意的標籤、增強的表單元素、音訊與視頻的增強支援、二維繪圖API、離線資料庫…等。

  • CSS

  • JavaScript

    • 因為JavaScript本身是弱型別的程式語言(Don't really care about data type that much), 相對出錯率較高, 後來Microsoft開發出了TypeScript, TypeScript是JavaScript的加強版, 本身是強型別語言, 但瀏覽器只看得懂JavaScript, 所以TypeScript寫完, 也是需要編譯成JavaScript.
    • 長命百歲的通用Library
      • jQeury - 為什麼近年會被框架取代? 因為它直接操作DOM, 在畫面異動頻繁的case, 效能較差. 而且對於大專案, 框架在開發速度/維護便利性, 遠遠勝過jQuery.
    • 前端三大框架
      • React (Facebook) - 其實只是個Library, 當初是為了方便開發UI所以才有React. 那你會問,UI以外的部分呢? 像是處理邏輯怎麼辦 => 工程師自己想辦法阿!!! 但是React是前端三大框架, 社群最龐大的, 所以相關套件也最多.
      • Angular (Google) - Angular的前身是AngularJS, 不要小看它的前身名字只多加了JS兩個字, AngularJS難用到爆炸.
      • Vue (尤雨溪) - 因為不像其他兩個框架是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

其他參考資料

後端相關

業界較常見的後端程式語言

  • 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方法長度限制 => 其實實際上, get要超過那個長度限制, 很難, 但是在開發時, 還是會看狀況, 以防萬一
    • 更新用PUT跟PATCH的差異 => 當我們寫一支API, 假設有10個欄位. id,姓名,電話,地址,信箱…一堆, 如果後端寫API使用put這個method, 即使我只想更改, 這筆資料的"姓名", 我還是必須傳10個欄位. 但如果API使用patch, 我可以只傳"姓名".
    • GraphQL - 其實用的是POST, 優點是一次可以把所有想要撈的資料都拿到(Restful要打多次API,才能做到的事情, GraphQL一次就做到了.)
      • 缺點是 1.全部API的進入點(entry point)都是同一個
        1. 上面那個缺點也同時導致安全性降低
        1. 比起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差異及使用場景

手機端程式語言

  • Swift
  • Flutter
  • Objective-C
  • Java
  • 現在有很多方式可以寫手機app, 即使用前端框架Vue, React, Angular, 也有對應方式可以寫出手機app

維運相關名詞

  • 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 也是個了解業界tech stack有哪些的好地方
Last changed by 
 
Nien-Ying Chou
If you find my notes helpful, feel free to also help others around :)
0
129

Read more

Macro

| | Amount | Calories | Protein | Fat| Fiber |

Apr 1, 2025
Munich-Salzburg-Hallstatt

09:13/09:06離開機場, 搭乘S1或S8到München Hbf/ Ost車站旁邊的 EDEKA 跟 dm 採買10:55 Hbf/ 11:04 Ost 出發Salzburg, 12:42 抵達

Nov 26, 2024
Thesis topic

Generate AI

Jun 8, 2024
Machine Learning Introduction

You can later watch this video to recap

May 1, 2024
Read more from Nien-Ying Chou
Published on HackMD