๐Ÿ˜Ž ๊ณต๋ถ€ํ•˜๋Š” ์ง•์ง•์•ŒํŒŒ์นด๋Š” ์ฒ˜์Œ์ด์ง€?

๋ฐฑ์—”๋“œ express์™€ node.js ์‚ฌ์šฉํ•˜๊ธฐ (3) ๋ณธ๋ฌธ

๐Ÿ‘ฉ‍๐Ÿ’ป ๋ฐฑ์—”๋“œ(Back-End)/Node js

๋ฐฑ์—”๋“œ express์™€ node.js ์‚ฌ์šฉํ•˜๊ธฐ (3)

์ง•์ง•์•ŒํŒŒ์นด 2023. 1. 20. 15:54
728x90
๋ฐ˜์‘ํ˜•

<๋ณธ ๋ธ”๋กœ๊ทธ๋Š” ์šฐ๋ฆฌ๋ฐ‹ ๋‹˜์˜ [Node.js] ๋ฐฑ์—”๋“œ ๋ง›๋ณด๊ธฐ๋ฅผ ์ฐธ๊ณ ํ•ด์„œ ๊ณต๋ถ€ํ•˜๋ฉฐ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค>

https://www.youtube.com/watch?v=AZtyyeCwNoc&list=PLSK4WsJ8JS4cQ-niGNum4bkK_THHOizTs&index=5 

 

 

๐Ÿšจ html ์ž๋™ ์™„์„ฑ

html ํŒŒ์ผ์—

! + enter ๋ˆ„๋ฅด๋ฉด ์ž๋™์œผ๋กœ html ๊ตฌ์กฐ ์ž…๋ ฅ๋จ

<!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>Document</title>
</head>
<body>
    
</body>
</html>

 

 

โญ ๋กœ๊ทธ์ธ ํ™”๋ฉด (๋งค์šฐ ๊ตฌ์‹! ํ•˜๋“œ์ฝ”๋”ฉ)

// const http = require("http");
// const app = http.createServer((req, res) => {
//     // ํ•œ๊ธ€๋กœ ์ฝ์–ด์คŒ
//     res.writeHead(200, {"Content-Type" : "text/html; charset=utf-8" });

//     if (req.url === "/") {
//         res.end("์—ฌ๊ธฐ๋Š” ๋ฃจํŠธ");
//     } else if (req.url === "/login") {
//         res.end("์—ฌ๊ธฐ๋Š” ๋กœ๊ทธ์ธ");
//     }
// });

// app.listen(3001, () => {
//     console.log("http๋กœ ๊ฐ€๋™๋œ ์„œ๋ฒ„")
// })


const express = require("express");
const app = express();

app.get("/", (req, res) => {
    res.send(`
    <!DOCTYPE html>
    <html lang="ko">
        <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>Document</title>
        </head>
        <body>
            ์—ฌ๊ธฐ๋Š” ๋ฃจํŠธ์ž…๋‹ˆ๋‹ค
        </body>
    </html>
`
);
});

app.get("/login", (req, res) => {
    res.send(`
    <!DOCTYPE html>
    <html lang="ko">
        <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>Document</title>
        </head>
        <body>
            <input type="text" placeholder = "์•„์ด๋””"><br>
            <input type="text" placeholder = "๋น„๋ฐ€๋ฒˆํ˜ธ"><br>
            <button>๋กœ๊ทธ์ธ</button>
        </body>
    </html>
`
    );
});

app.listen(3000, function () {
    console.log("์„œ๋ฒ„ ๊ฐ€๋™");
});

 

 

 

โญ ๋กœ๊ทธ์ธ ํ™”๋ฉด (EJS ์‚ฌ์šฉ)

๊ทธ ์ „์— ejs ์„ค์น˜ํ•˜๊ธฐ

 npm install ejs -s

 

views ํด๋” ๋งŒ๋“ค๊ธฐ

login.ejs

<!DOCTYPE html>
<html lang="ko">
    <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>Document</title>
    </head>
    <body>
        <input type="text" placeholder = "์•„์ด๋””"><br>
        <input type="text" placeholder = "๋น„๋ฐ€๋ฒˆํ˜ธ"><br>
        <button>๋กœ๊ทธ์ธ</button>
    </body>
</html>

index.ejs

<!DOCTYPE html>
<html lang="ko">
    <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>Document</title>
    </head>
    <body>
        ์—ฌ๊ธฐ๋Š” ๋ฃจํŠธ์ž…๋‹ˆ๋‹ค
    </body>
</html>

app.js

const express = require("express");
const app = express();

// ์•ฑ ์„ธํŒ…
app.set("views", "./views");
app.set("view engine", "ejs");

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

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

app.listen(3000, function () {
    console.log("์„œ๋ฒ„ ๊ฐ€๋™");
});

728x90
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ

'๐Ÿ‘ฉโ€๐Ÿ’ป ๋ฐฑ์—”๋“œ(Back-End) > Node js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

MVC ํŒจํ„ด๊ณผ REST API ์ž๋™ ์›๋ฆฌ  (0) 2023.02.03
๋ฐฑ์—”๋“œ express์™€ node.js ์‚ฌ์šฉํ•˜๊ธฐ + Router (4)  (0) 2023.01.20
๋ฐฑ์—”๋“œ express์™€ node.js ์‚ฌ์šฉํ•˜๊ธฐ (2)  (0) 2023.01.20
๋ฐฑ์—”๋“œ express์™€ node.js ์‚ฌ์šฉํ•˜๊ธฐ (1)  (0) 2023.01.20
๋‹ค์‹œ ๋„์ „.. Flask-SocketIO ์‚ฌ์šฉํ•ด์„œ live-graph ๋งŒ๋“ค๊ธฐ (8)  (1) 2022.12.02
'๐Ÿ‘ฉ‍๐Ÿ’ป ๋ฐฑ์—”๋“œ(Back-End)/Node js' Related Articles more
Comments