WorksheetsFull Stack Nuxt 4 with Prisma and PostgreSQL
Total questions: 20
Worksheet time: 10mins
Nuxt 4 ถูกออกแบบให้เหมาะกับการพัฒนาแบบใดมากที่สุด
Frontend-only SPA เท่านั้น
Full Stack Application ที่รวมทั้ง Client และ Server ในโปรเจกต์เดียว
ใช้สำหรับ Static Site เท่านั้น
ใช้แทนฐานข้อมูลได้โดยตรง
โฟลเดอร์ใดใน Nuxt 4 ใช้เก็บโค้ด API ฝั่ง Server เป็นหลัก
shared
app/pages
app/components
server/api
หากต้องการสร้าง API สำหรับดึงรายการเป้าหมายเก็บเงินทั้งหมด ควรวางไฟล์ไว้ที่ใดจึงจะถูกต้องตามโครงสร้าง Nuxt 4
app/api/goals.get.t
server/api/goals.ts
server/api/goals.get.ts
shared/api/goals.get.ts
Prisma ในโปรเจกต์ Nuxt 4 ทำหน้าที่หลักคืออะไร
เป็น UI Library สำหรับสร้าง Component
ใช้สำหรับ Deploy แอปไปยัง Vercel
เป็น ORM สำหรับเชื่อมต่อและจัดการฐานข้อมูล
ใช้จัดการไฟล์ Static
ไฟล์ใดของ Prisma ที่ใช้ในการนิยาม Model และโครงสร้างตารางฐานข้อมูล
prisma/client.ts
prisma/schema.prisma
prisma/config.json
server/prisma.ts
Tailwind CSS 4 มีแนวคิดสำคัญที่ต่างจากเวอร์ชันก่อนหน้าอย่างไร
ไม่ต้องมีการคอมไพล์ CSS แล้ว
ไม่รองรับการใช้บน Nuxt 4
ใช้เฉพาะกับ React เท่านั้น
ใช้ระบบ “Just-in-Time” เป็นดีฟอลต์ และลดการพึ่งพาไฟล์ config ลง
ข้อใด “ไม่ใช่” ข้อดีของการใช้ Tailwind CSS 4 ร่วมกับ Nuxt 4
ลดขนาดไฟล์ CSS เพราะใช้ class เท่าที่เราระบุใน template
ทำให้ไม่ต้องเขียน HTML เอง
สามารถเขียน UI ได้เร็วด้วย utility class
เหมาะกับการสร้าง UI ทันสมัยและปรับแต่งได้ง่าย
Nuxt UI หรือ Component Library ที่ใช้ร่วมกับ Nuxt มีประโยชน์หลักอย่างไร
ช่วยให้เขียน SQL ได้ง่ายขึ้น
ช่วยตั้งค่า DNS สำหรับ Deploy
ช่วยให้มีชุด Component พร้อมใช้ เช่น Button, Card, Modal
ใช้สร้าง Migration ให้ Prisma อัตโนมัติ
หากต้องการสร้างหน้า Dashboard ที่สามารถ “เพิ่ม/แก้ไข/ลบ” เป้าหมาย ควรใช้โครงสร้างหน้าใน Nuxt อย่างไร
ใช้เพียง app.vue หน้าเดียว
ใช้ shared/dashboard.ts สำหรับแสดง UI
ใช้ server/dashboard.vue เพื่อแสดงหน้า
ใช้ pages/dashboard.vue แล้วเรียก API จาก server/api/goals
การใช้ useFetch หรือ useAsyncData ใน Nuxt 4 มีข้อดีอะไรเมื่อดึงข้อมูลมาแสดงบน Dashboard
ไม่ต้องสนใจเรื่อง SEO
ใช้ได้เฉพาะบน Client เท่านั้น
รองรับ SSR และสามารถแชร์ผลลัพธ์ระหว่าง Client/Server ได้
ใช้แทน Prisma ได้เลย
โฟลเดอร์ server/middleware ใช้ทำอะไรใน Nuxt 4
เก็บ Vue components
เก็บฟังก์ชันตรวจสอบ/ดักการทำงานของทุก request ฝั่ง Server
ใช้เก็บไฟล์ CSS
ใช้เก็บ Prisma Schema
Middleware ฝั่ง Route (เช่น middleware/auth.global.ts) ใน Nuxt 4 ใช้เพื่่ออะไร
ตรวจสอบสิทธิ์ก่อนเข้าแต่ละหน้า หรือ redirect ตามเงื่อนไข
สร้างฐานข้อมูลอัตโนมัติ
ใช้เรียก API ฝั่งอื่น
ใช้สร้าง Chart
แนวคิดหลักของ Error Handling ใน Nuxt 4 คืออะไร
ให้ throw error แล้วหน้าเว็บหยุดทำงานทันที
ใช้ createError หรือโยน error แล้วให้ Nuxt เรนเดอร์ error.vue
จับ error เฉพาะใน Client เท่านั้น
ใช้ Tailwind แทนการจัดการ Error
LRU Cache ที่ใช้ในฝั่ง Server ของ Nuxt หรือ API มีจุดประสงค์หลักคืออะไร
เก็บข้อมูลทั้งหมดไว้ตลอดไป
ลบข้อมูลที่ถูกเรียกใช้บ่อยที่สุดก่อน
เก็บผลลัพธ์ล่าสุดไว้จำนวนหนึ่ง และลบรายการที่ “ไม่ค่อยถูกใช้ล่าสุด” ทิ้งก่อน
ใช้เข้ารหัสข้อมูลทั้งหมด
ข้อใดคือการใช้ Caching แบบ LRU อย่างเหมาะสมในระบบ Dashboard
แคชผลลัพธ์ list เป้าหมายที่เรียกบ่อย เช่น /api/goals เพื่อลด hit ฐานข้อมูล
แคชข้อมูล password ของผู้ใช้ให้ได้นานที่สุด
แคชไฟล์ .env ทั้งหมด
แคชข้อมูล Migration ของ Prisma
ในการแสดงผลข้อมูลบน Dashboard ด้วย Chart และ Analytics ข้อใด “เหมาะสมที่สุด”
ดึงข้อมูลจาก API ทุกครั้งที่กราฟ redraw โดยไม่ใช้ cache
วาดกราฟเองด้วย <div> และ CSS เท่านั้น
ดึงข้อมูลจาก API แล้วส่งให้ไลบรารี Chart เช่น Chart.js หรือ ECharts
ใช้ Prisma แสดงกราฟโดยตรงใน Template
หากต้องการให้ Dashboard โหลดเร็วขึ้นเมื่อต้องดึงข้อมูลสถิติจำนวนมาก ควรใช้เทคนิคใด
เรียก API หลาย ๆ อันพร้อมกันโดยไม่ใช้ Promise
ใช้ useAsyncData ร่วมกับ caching ผลลัพธ์ และแสดง skeleton loading
เพิ่มจำนวน console.log ในโค้ด
ดึงข้อมูลทีละ row จากฐานข้อมูลแล้ว loop ใน Client
ข้อใดเป็นขั้นตอนสำคัญในการ Deploy Nuxt 4 บน Vercel หรือ Netlify
ลบโฟลเดอร์ .output ก่อนทุกครั้ง
ต้องอัปโหลดโค้ดผ่าน FTP เท่านั้น
ระบุคำสั่ง build เช่น npm run build และตั้งค่า environment variables ให้ถูกต้อง
ตั้งค่าให้ build ด้วย npm run test
หากใช้ Prisma + PostgreSQL ในการ Deploy บน Vercel ข้อใดต้องใส่ใจมากที่สุด
การตั้งค่า connection string ใน DATABASE_URL ให้ถูกต้อง และรองรับ connection จาก cloud
สีของปุ่มในหน้า Dashboard
การเปลี่ยนชื่อไฟล์ schema.prisma
ไม่จำเป็นต้องตั้งค่าอะไรเพิ่มเติม
อะไรคือเหตุผลสำคัญที่หลายคนเลือก Deploy Nuxt 4 บนแพลตฟอร์มอย่าง Vercel/Netlify
เพราะไม่ต้องใช้ Node.js เลย
เพราะมีระบบ CI/CD, Preview URL, และรองรับ SSR/Edge Function ง่าย
เพราะบังคับใช้ฐานข้อมูล SQLite เท่านั้น
เพราะไม่ต้อง build แอป
