อินเทอร์เน็ตและเว็บทำงานยังไง?

เมื่อคุณพิมพ์ URL แล้วกด Enter...

สิ่งที่ดูเหมือนวิเศษ (เปิดเว็บขึ้นมา) จริง ๆ เกิดจาก การสนทนา ระหว่าง 2 ฝ่าย:

1. เบราว์เซอร์ของคุณ (Client) — ฝ่ายขอ
2. เซิร์ฟเวอร์ (Server) — ฝ่ายให้

กำลังวาดไดอะแกรม…

• การ ขอ เรียกว่า Request
• การ ตอบ เรียกว่า Response

Frontend คืออะไร?

Frontend (หน้าบ้าน) = ทุกอย่างที่ ผู้ใช้เห็นและโต้ตอบด้วย บนเบราว์เซอร์

ประกอบด้วย 3 ภาษาหลัก:

Backend คืออะไร?

Backend (หลังบ้าน) = ส่วนที่ ทำงานบนเซิร์ฟเวอร์ ผู้ใช้ไม่เห็นโค้ด แต่เป็นสมองที่คอยประมวลผล

หน้าที่ของ Backend:

• รับ request จากผู้ใช้
• ตรวจสอบสิทธิ์ (ใครคุณ?)
• ประมวลผลกฎเกณฑ์ธุรกิจ (เช่น คำนวณราคา ตัดสต็อก)
• อ่าน/เขียนข้อมูลลง ฐานข้อมูล (Database)
• ส่งผลลัพธ์กลับเป็น response

Database คืออะไร?

Database (ฐานข้อมูล) = ที่ เก็บข้อมูลถาวร เช่น บัญชีผู้ใช้ รายการสินค้า ประวัติการสั่งซื้อ

เปรียบเหมือน ไฟล์เอ็กเซลขนาดมหึมา ที่ Backend เข้าไปค้น/เพิ่ม/แก้ไขได้

แล้ว API ล่ะ?

API (Application Programming Interface) คือ "ประตู" ที่ Frontend ใช้คุยกับ Backend แทนที่จะเข้าไปยุ่งกับข้อมูลตรง ๆ โปรแกรมจะเคาะประตูนี้ตามกติกาที่กำหนด

ตัวอย่าง: Frontend เรียก API GET /products → Backend ส่งรายการสินค้ากลับมา

API คือสัญญาว่า "ส่งข้อมูลแบบนี้ จะตอบแบบนี้" ทำให้สองฝ่ายทำงานด้วยกันได้

ภาพรวมแบบ Fullstack

   ผู้ใช้
     |
   เบราว์เซอร์ ── Frontend (HTML/CSS/JS)
     |
    API (request/response)
     |
   Backend (Node.js/Express หรือ Python/FastAPI)
     |
   Database (เก็บข้อมูลถาวร)

Fullstack Developer = คนที่สร้างได้ทั้งแถบบน (Frontend) และแถบล่าง (Backend + Database) นั่นคือเป้าหมายของหลักสูตรนี้

ทำไมต้องรู้เรื่องนี้ก่อนเขียนโค้ด?

เพราะเมื่อรู้ว่าทุกส่วนเชื่อมกันยังไง คุณจะ:

• เข้าใจว่าแต่ละบทเรียน "อยู่ตรงไหน" ของภาพใหญ่
• ไม่หลงทางเวลาเจอศัพท์ใหม่ (เช่น "API", "server", "database")
• เห็นเป้าหมายชัดขึ้นว่ากำลังไปทางไหน

สรุป

บทสุดท้ายของโมดูลพื้นฐาน เราจะมา เลือกสายเรียน ที่เหมาะกับคุณ 🧭