MERN Stack கற்றலில் 46-வது நாள்

MERN Stack கற்றலில் 46-வது நாள்

எனது MERN stack பயணத்தில் நான் 46 நாட்களை நிறைவு செய்துள்ளேன்.

நேற்று நான் Tailwind CSS-ஐ அமைத்தேன். இன்று EJS templating engine-ஐக் கற்றேன்.

இன்று வரை எனது HTML பக்கங்கள் நிலையானவை (static). அவற்றால் சர்வரில் இருந்து வரும் மாற்றங்களைக் காட்ட முடியாது.

EJS சர்வர் பக்க ரெண்டரிங் (server-side rendering) செய்ய அனுமதிக்கிறது. இது உங்கள் பேக்எண்டில் (backend) இருந்து வரும் நேரடித் தரவைப் (live data) பயன்படுத்தி HTML-ஐ உருவாக்குகிறது. நீங்கள் உங்கள் HTML-க்குள் நேரடியாக JavaScript லாஜிக்கை எழுதலாம்.

இன்று நான் அதை எவ்வாறு அமைத்தேன் என்பது இதோ:

• Express-ஐ view engine ஆக EJS-ஐப் பயன்படுத்தச் சொன்னேன்.
• எனது டெம்ப்ளேட்களுக்காக (templates) ஒரு views டைரக்டரியை உருவாக்கினேன்.
• தரவை பிரண்ட்எண்டிற்கு (frontend) அனுப்ப res.render முறையைப் பயன்படுத்தினேன்.

குறியீடு (code) இவ்வாறு இருக்கும்:

const express = require("express");
const app = express();
const users = require("./MOCK_DATA.json");

app.set("view engine", "ejs");

app.get("/users-list", (req, res) => {
    res.render("users", { allUsers: users }); 
});

app.listen(8000);

இந்த முறை எனது தரவை எனது UI உடன் உடனடியாக இணைக்கிறது.

ஆதாரம்: https://dev.to/ali_hamza_589ec7b3eb6688d/day-46-of-learning-mern-stack-15dh