Node.js - Twitter Clone Coding // Settings and Template Engines(Pug)

1. 새로운 폴더 만들고, vscode or terminal 에서 npm init 시작해서 package.json 만들기

npm init

"start": "node app.js"

 

npm install

git init
git config --global user.name "dmstlf292"
git config --global user.email "silviapark292@gmail.com"
git add .
git commit -m "upload files"
git remote add origin https://github.com/dmstlf292/Springboot_Blog.git
git branch -M main
git push -u origin main

npm install express

app.js

const express = require('express');
const app = express();
const port = 3003;

const server = app.listen(port, ()=>{//callback 함수 
    console.log("Server listening on port" + port);
})

 

 

//서버에 알려주기
app.set("view engine", "pug");
app.set("views", "views");

npm install pug

 

app.js

const express = require('express');
const app = express();
const port = 3003;

const server = app.listen(port, ()=>{//callback 함수 
    console.log("Server listening on port" + port);
});

//서버에 알려주기
app.set("view engine", "pug");
app.set("views", "views");



app.get("/", (req, res, next)=>{
    res.status(200).render("home");
})

home.pug

html
    head   
        title welcome 
    body 
        h1 this is awesome
        div hi 
            div bye

const express = require('express');
const app = express();
const port = 3003;

const server = app.listen(port, ()=>{//callback 함수 
    console.log("Server listening on port" + port);
});

//서버에 알려주기
app.set("view engine", "pug");
app.set("views", "views");



app.get("/", (req, res, next)=>{
    var payload={
        pageTitle:"Home"
    }
    res.status(200).render("home",payload);
})

 

 

home.pug

extends layouts/main-layout.pug

block content
    h1 this is awesome

 

 

main-layout.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title #{pageTitle}
    body