Mission 1: Frontend vs Backend, Client vs Server

เป้าหมายของ Mission นี้: อธิบายได้ว่า Frontend กับ Backend ต่างกันอย่างไร และ Client กับ Server คุยกันอย่างไร

---

1. Learning Objective

จบ Mission นี้คุณจะ

• บอกได้ว่าโค้ดบรรทัดไหนรันบนเครื่องผู้ใช้ บรรทัดไหนรันบนเซิร์ฟเวอร์
• อธิบายคำว่า Client และ Server ให้คนที่ไม่ใช่โปรแกรมเมอร์ฟังรู้เรื่อง
• ตอบได้ว่า "ทำไมต้องมี Backend ในเมื่อ Frontend ก็เก็บข้อมูลได้"

---

2. Theory — ร้านอาหารหนึ่งร้าน

ลองนึกถึงร้านอาหาร

ในร้านอาหาร	ในเว็บ
ลูกค้าที่นั่งโต๊ะ	Client (เบราว์เซอร์ / มือถือ)
เมนู หน้าตาร้าน จานชาม	Frontend (HTML, CSS, React)
พนักงานเสิร์ฟที่รับออเดอร์	Request
ครัวหลังร้าน	Backend (Express)
ตู้เย็น/คลังวัตถุดิบ	Database (PostgreSQL)
อาหารที่เสิร์ฟกลับมา	Response

ลูกค้าไม่เคยเห็นครัว — เห็นแค่เมนูกับอาหารที่เสิร์ฟมา และนี่คือเหตุผลข้อใหญ่ที่สุดที่ต้องมี Backend: ของที่ต้องปกปิด ต้องอยู่ในครัว

แล้วทำไมเก็บข้อมูลใน Frontend อย่างเดียวไม่ได้?

1. ข้อมูลหาย — refresh หน้าเว็บ ตัวแปร useState ก็ล้างหมด
2. ไม่แชร์กัน — คุณเพิ่มสินค้าในเครื่องคุณ เพื่อนเปิดอีกเครื่องไม่เห็น
3. ไม่ปลอดภัย — โค้ด Frontend ทุกบรรทัดผู้ใช้เปิดดูได้หมด (กด F12 ก็เห็น) ถ้าเอารหัสผ่าน หรือ API Key ไปไว้ตรงนั้น = แจกให้คนทั้งโลก
4. เชื่อผู้ใช้ไม่ได้ — ผู้ใช้แก้โค้ดในเบราว์เซอร์ตัวเองได้ ถ้าปล่อยให้ Frontend เป็นคนตัดสินว่า "ราคา 100 บาท" ก็แก้เป็น 1 บาทได้เลย Backend คือฝ่ายที่ตัดสินใจแทน เพราะผู้ใช้แก้ไม่ได้

---

3. Diagram

flowchart LR
    U["ผู้ใช้"] --> B["Browser<br/>(Client)"]
    B -->|"Request"| S["Express Server<br/>(Backend)"]
    S -->|"Response"| B
    S <--> D[("PostgreSQL<br/>Database")]
    style B fill:#1e3a5f,stroke:#38bdf8,color:#fff
    style S fill:#3f2d5c,stroke:#a855f7,color:#fff
    style D fill:#14532d,stroke:#22c55e,color:#fff

เขียนแบบ ASCII ให้จำง่ายๆ ว่า

   [ ผู้ใช้ ]
       |
       v
+---------------+   Request (ขอ)    +---------------+   SQL   +------------+
|    Browser    | ----------------> |    Express    | ------> |            |
|   (Frontend)  |                   |   (Backend)   |         |  Database  |
|  React / HTML | <---------------- |   Node.js     | <------ |            |
+---------------+   Response (ตอบ)  +---------------+  rows   +------------+
  รันบนเครื่องผู้ใช้                    รันบนเซิร์ฟเวอร์         เก็บข้อมูลถาวร
  ผู้ใช้เปิดดูโค้ดได้                    ผู้ใช้เปิดดูโค้ดไม่ได้       ผู้ใช้แตะไม่ถึงเลย

---

4. เส้นแบ่งที่ต้องจำ

	Frontend	Backend
รันที่ไหน	เครื่องของผู้ใช้	เซิร์ฟเวอร์ของเรา
ภาษา	HTML, CSS, JS, React	JavaScript (Node.js), Python, Go, ...
หน้าที่	แสดงผล, รับ input	ประมวลผล, เก็บข้อมูล, ตรวจสิทธิ์
ผู้ใช้แก้โค้ดได้ไหม	ได้ (F12)	ไม่ได้
เก็บ Secret ได้ไหม	ไม่ได้เด็ดขาด	ได้

ประโยคที่ต้องจำไปตลอดคอร์ส: อะไรที่ผู้ใช้แก้ได้ ห้ามเชื่อ — Frontend ตรวจข้อมูลเพื่อ "ความสะดวกของผู้ใช้" แต่ Backend ตรวจซ้ำเพื่อ "ความถูกต้องของระบบ" ต้องตรวจทั้งสองที่เสมอ

---

5. ในคอร์สนี้เราอยู่ตรงไหน

Frontend Explorer 1-2     <-- เรียนมาแล้ว (ฝั่งซ้ายของภาพ)
        |
        v
Backend Explorer          <-- อยู่ตรงนี้ (ฝั่งขวา + ตรงกลาง)

โค้ด fetch("https://jsonplaceholder.typicode.com/posts") ที่เคยเขียน — วันนี้เราจะสร้าง "ตัวที่อยู่ปลายทางของ URL นั้น" ขึ้นมาเอง

---

6. Common Mistakes

เข้าใจผิด	ความจริง
"Backend คือภาษาอีกภาษาหนึ่ง"	ไม่ใช่ — เราใช้ JavaScript ตัวเดิม แค่รันคนละที่
"Next.js เป็น Frontend ล้วน"	Next.js ทำ Backend ได้ด้วย แต่คอร์สนี้แยก Server ออกมาให้เห็นชัดๆ ก่อน
"ตรวจข้อมูลใน Frontend แล้วพอ"	ผู้ใช้ปิด JavaScript หรือยิง API ตรงได้ ต้องตรวจที่ Backend เสมอ
"Database คือ Backend"	คนละตัวกัน — Backend คือคนสั่ง, Database คือคนเก็บ

---

7. Summary

• Client = ฝ่ายขอ, Server = ฝ่ายตอบ
• Frontend รันบนเครื่องผู้ใช้ (แก้ได้ → เชื่อไม่ได้) / Backend รันบนเซิร์ฟเวอร์เรา (แก้ไม่ได้ → เชื่อได้)
• มี Backend เพราะต้องการ เก็บข้อมูลถาวร, แชร์ข้อมูลข้ามเครื่อง, ซ่อนความลับ, และตัดสินใจแทนผู้ใช้
• Mission ถัดไป: ภาษาที่ Client กับ Server ใช้คุยกัน — HTTP