สัปดาห์ที่ 14 การทดสอบ การปรับปรุงประสิทธิภาพ และความปลอดภัย

สไลด์บทเรียน

วัตถุประสงค์

1. ใช้แนวทาง Debugging และ Testing เบื้องต้นกับ Front-end ได้
2. ระบุปัญหา Performance ที่พบบ่อยในเว็บได้
3. อธิบายแนวทาง Web Security เบื้องต้นสำหรับ Front-end ได้

หัวข้อย่อย

1. Debugging ด้วย Console และ DevTools
2. Manual Testing และ Test Case
3. Code Review
4. Performance: image, bundle, rendering
5. Lighthouse เบื้องต้น
6. Web Security: XSS, Input Validation, Sensitive Data
7. Checklist ก่อนส่งงาน

เนื้อหา

การพัฒนาเว็บที่ดีต้องมีการตรวจสอบและปรับปรุง ไม่ใช่เพียงเขียนให้เสร็จ การ debug ช่วยหาเหตุของปัญหา การ test ช่วยยืนยันว่าระบบยังทำงานถูกต้อง และ code review ช่วยเพิ่มคุณภาพก่อนส่งมอบ

Performance ส่งผลต่อ UX โดยตรง หน้าเว็บที่โหลดช้าหรือกระตุกทำให้ผู้ใช้เลิกใช้งาน ส่วน Security ช่วยลดความเสี่ยงจาก input ที่ไม่ปลอดภัย การแสดงข้อมูลผิดพลาด และการเก็บข้อมูลสำคัญไม่เหมาะสม

กิจกรรมในชั้นเรียน

ทำ code review Mini Project ของตนเองหรือเพื่อน แล้วระบุอย่างน้อย 5 จุดที่ควรปรับปรุง

ศึกษาค้นคว้านอกเวลา

ปรับปรุงโครงงานจาก feedback และทำ checklist ก่อนนำเสนอ

คำถามทบทวน

1. Console และ Network tab ช่วย debug ปัญหาแบบใด
2. Performance ที่ดีส่งผลต่อ UX อย่างไร
3. Front-end ควรระวัง XSS อย่างไร

กลับรายวิชา