วันที่ 51 ของการเรียนรู้ MERN Stack
ผมเดินทางมาถึงวันที่ 51 ของการเรียนรู้ MERN stack แล้ว
เมื่อวานผมได้เรียนรู้วิธีจัดการกับการส่งข้อมูล host เบื้องต้น ส่วนวันนี้ผมขยับมาสู่การซิงโครไนซ์ข้อมูลในระดับ production โดยเน้นไปที่การอัปเดตข้อมูลตาม ID และการลบข้อมูล (resource deletion)
แอปพลิเคชันขนาดใหญ่ต้องการอะไรที่มากกว่าแค่การเพิ่มข้อมูล คุณต้องสามารถระบุข้อมูลที่ต้องการแก้ไขหรือลบได้อย่างเจาะจง ซึ่งวันนี้ผมได้สร้าง logic นี้ลงในส่วนของ controller layers แล้ว
งานของผมเน้นไปที่สองงานหลัก:
- การดึง identifier ออกมาจาก URL parameters
- การใช้ query variables เพื่อควบคุมโหมดของ interface
ผมได้สร้างระบบค้นหาเพื่อการแก้ไข (edit lookup) ไว้ภายใน controller โดยใช้ req.params.homeId เพื่อค้นหารายการที่ต้องการ และยังใช้ req.query.editing เพื่อตรวจสอบว่าผู้ใช้จำเป็นต้องแสดงโหมดแก้ไขหรือไม่
ตัวอย่างโค้ดจากพื้นที่ทำงานของผม:
const homeId = req.params.homeId; const editing = req.query.editing === 'true';
กระบวนการนี้ช่วยให้มั่นใจว่า backend จะทราบแน่ชัดว่าต้องเปลี่ยนข้อมูลชุดไหน และยังช่วยบอก frontend ว่าควรแสดงผลข้อมูลอย่างไร
Source: https://dev.to/ali_hamza_589ec7b3eb6688d/day-51-of-learning-mern-stack-22cn