大家好，這是百日轉職前端工程師的 Day7，也是 6/17（三）。今天來聊聊前後端的差別。老實說我覺得最好理解的比喻應該就是「餐廳」的運作了，比喻來說「前端」其實就是餐廳外場負責點餐和招待，而「後端」則是依據前端收到的需求進食材庫拿食物並且料理後送出，這篇文章將讓你一次用最簡單的方式搞懂整個網頁背後到底是怎麼運作。
前端後端是怎麼合作的
基本上當你 (Client) 進入到一網頁時就像是來到一間餐廳，你會點各種菜或者跟店員做各種互動，這時候招待你的是外場，像是這間店的裝潢，以及店內菜單的設計等，這些工作對比到網頁上就是「前端」工程師負責的事。
而當你 (Client) 進到店裡你點了一道菜，這時候就外場服務生就要發出一個需求 (request) 給餐廳的櫃檯，其有點像是 API 的角色，會去確認你的需求/權限是否符合，接著通過櫃台把需求傳給餐廳的內場人員，而餐廳的內場人員就要根據這需求去調閱餐廳的食材庫 (database) 並且取出適當的食材加工後送回 (response) 給餐廳的櫃檯，櫃檯再交給外場的服務生，最後遞交到你 (Client) 手上。而餐廳後台從食材庫取出食材並且加工的一系列工作，這些工作對比到網頁上就是「後端」工程師要負責的事；而餐廳的門面菜單等等的設計以及外場服務生的服務則是「前端」工程師要負責的事。
繼續用餐廳比喻網頁，基本上你到一間餐廳你看得到的部分就是前端，而你看不到的地方發生的事就是後端。
接下來我們回到網頁，真實講解一下前端和後端互動發生的事。基本上當你的 Chrome 瀏覽器 (Client) 造訪一個網頁時，你首先要輸入網址接著你的瀏覽器會先發需求給域名系統 (DNS)，請他幫忙根據域名 (Domain) 解碼一下真正的 IP 地址，域名系統於是告訴你網址精確的 IP 地址為何。
註：此處舉 Chrome 只是為方便想像
你的瀏覽器才能進一步透過這個 IP 位置找到對應的伺服器 (Server，我理解就是遠方的電腦)，然後發 request 給這個 Server，接著 Server 會根據你的需求從資料庫 (database) 中取出一些資料並且回應 (response) 給你的瀏覽器 (Client)。
舉一個小案例
當我在 Google 上輸入 JavaScript 實際上發生了什麼事？
我的瀏覽器 (Client) ，先詢問 DNS 得到 Google 的 IP 是 172.217.24.14，接著瀏覽器再發 request 到 172.217.24.14 到 Google 的 Server ，Server 於是查詢了它的 Database 取出資料做處例後回應 (response) 回傳給我的瀏覽器一系列的查詢結果。
總結：前端工程師負責資料的呈現，後端工程師負責處理後台資料的處理
基本上前端工程師有點介於設計師和工程師的平衡點，要去想辦法用程式邏輯讓資料美美的呈現在頁面上，也要去撰寫邏輯讓頁面能夠跟使用者做互動，而後端工程師則是做些更底層的資料處理，想辦法讓網頁能夠實現更複雜的功能。
- 百日轉職前端工程師：前端工程師知識地圖 《DAY 1》
- 百日轉職前端工程師：時間管理的技巧 《DAY 2》
- 百日轉職前端工程師：網頁的普通常識 HTML 《DAY 3》
- 百日轉職前端工程師：高效率的最高休息法 《DAY 4》
- 百日轉職前端工程師：用 CLI 命令電腦 《DAY 5》
- 百日轉職前端工程師：人生不能重來但 GIT 可以《DAY 6》
- 百日轉職前端工程師：前端後端怎麼合作開餐廳《DAY 7》
- 百日轉職前端工程師：第四週秒懂網路基礎《DAY 8》
- 百日轉職前端工程師：JS 常用內建函式《DAY 9》
- 百日轉職前端工程師：第三週 JS 程式基礎《DAY 10》
- 百日轉職前端工程師：談談轉職初衷《DAY 11》
- 百日轉職前端工程師：第六週前端基礎 HTML《DAY 12》
- 百日轉職前端工程師：第六週前端基礎 CSS《DAY 13》
- 百日轉職前端工程師：第七週前端魔王 JAVASCRIPT《DAY 14》
- 百日轉職前端工程師：第八週前端整合串 API 《DAY 15》
訂閱我不斷更新的百日學習專欄，看看我百日後有沒有成為工程師，薪水多少？
