[Node.js] 자주 쓰는 의존성 패키지

728x90

EJS 템플릿 엔진

Javascript 코드를 HTML 템플릿에 삽입하여 동적으로 HTML을 생성하는 데 사용되는 템플릿 엔진이다.

이를 통해 웹 페이지를 동적으로 생성하는 데 유용하다.

설치 방법

package.json을 업데이트 한다.
터미널에서 다음과 같은 명령어를 입력하여 npm으로 설치한다.

npm install ejs

기본 문법

<% %> : Javascript 코드를 실행하는 데 사용, 이 안에는 서버 측의 데이터와 로직을 작성할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <% for (let i = 1; i <= 5; i++) { %>
    <h<%= i %>>Heading <%= i %></h<%= i %>>
  <% } %>
</body>
</html>

<%= %> : 변수나 표현식의 값을 출력하는 데 사용, 이 안에는 서버 측의 데이터를 클라이언트에 출력할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1>Hello, <%= name %>!</h1>
</body>
</html>

view로 데이터 넘기기

main.js를 다음과 같이 수정하여 view로 title, length 변수를 넘긴다.

view에서 데이터 접근 및 루프코드 실행

views에 index.ejs 파일을 만들고 다음과 같이 작성한다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title><%= title %></title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <% for(var i=0; i<length; i++) { %>
            <li>
                <%= "Loop" + i %>
            </li>
        <% } %>
    </body>
</html>

ejs 파일은 분할 하여 사용할 수 있다.

head와 body 부분을 분할 하여 index.ejs에 불러와 보겠다.

include를 사용하여 다른 ejs를 불러올 수 있다.
3.x 버전 부터는 <%- include('파일이름.ejs') %>을 사용해야 한다.

header.ejs

<title><%= title %></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />

body.ejs

<h1>Loop!</h1>
<% for(var i=0; i < length; i++) { %>
<li><%= "Loop" + i %></li>
<% } %>

index.ejs

<!DOCTYPE html>
<html lang="en">
    <head>
        <%- include('header.ejs') %>
    </head>
    <body>
        <%- include('body.ejs') %>
    </body>
</html>

RESTful API

Representational State Transfer의 약자로서, www와 같은 하이퍼미디어 시스템을 위한 소프트웨어 아키텍쳐 중 하나의 형식이다.

REST 서버는 클라이언트로 하여금 HTTP 프로토콜을 사용해 서버의 정보에 접근 및 변경을 가능케 한다.

사용되는 4가지 메소드

GET - 조회
PUT - 생성 및 업데이트
DELETE - 제거
POST - 생성

data 폴더를 만들고 json 파일을 하나 작성한다.

GET - 조회

module.exports = (app, fs) => {
    app.get("/", (req, res) => {
        res.render("index", {
            title: "MainPage",
            length: 5,
        });
    });

    app.get("/list", (req, res) => {
        fs.readFile(
            __dirname + "/../../data/data1.json",
            "utf8",
            (err, data) => {
                console.log(data);
                res.end(data);
            }
        );
    });
};

POST - 생성 및 업데이트

테스트를 위해 body-parser 모듈을 설치한다.

npm install body-parser

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <form action="/addpost" method="post">
            <b>name :</b>
            <input name="usr" ,id="usr" required /><br />
            <b>password :</b>
            <input name="pass" ,id="pass" type="password" required />
            <input type="submit" />
        </form>
    </body>
</html>

app.post("/addpost", (req, res) => {
        const name = req.body.usr;
        const pass = req.body.pass;

        fs.readFile(
            __dirname + "/../../data/data1.json",
            "utf8",
            (err, data) => {
                if (err) {
                    console.error("Error reading JSON file:", err);
                    return res.status(500).send("Error reading JSON file");
                }

                try {
                    // JSON 데이터를 파싱하여 객체로 변환
                    const jsonData = JSON.parse(data);

                    // 새로운 데이터를 JSON에 추가
                    const newEntry = {
                        password: pass,
                        name: name,
                    };
                    jsonData[name] = newEntry;
                    // JSON 데이터를 다시 문자열로 변환
                    const updatedData = JSON.stringify(jsonData);

                    // 업데이트된 JSON 파일을 다시 쓰기
                    fs.writeFile(
                        __dirname + "/../../data/data1.json",
                        updatedData,
                        (err) => {
                            if (err) {
                                console.error("Error writing JSON file:", err);
                                return res
                                    .status(500)
                                    .send("Error writing JSON file");
                            }

                            console.log("Data successfully added to JSON file");
                            res.send("Data successfully added to JSON file");
                        }
                    );
                } catch (error) {
                    console.error("Error parsing JSON:", error);
                    res.status(500).send("Error parsing JSON");
                }
            }
        );
    });

PUT - 생성 및 업데이트

put을 사용해 list에 json에 있는 이름을 보내면 비밀번호를 업데이트 하는 코드를 작성해보자.

app.put("/data/:name", (req, res) => {
        const name = req.params.name;
        const password = req.body.password;

        fs.readFile(
            __dirname + "/../../data/data1.json",
            "utf8",
            (err, data) => {
                if (err) {
                    console.error("Error reading JSON file:", err);
                    return res.status(500).send("Error reading JSON file");
                }
                const jsonData = JSON.parse(data);

                if (!jsonData[name]) {
                    return res
                        .status(404)
                        .json({ error: "이름을 찾을 수 없습니다." });
                }

                jsonData[name] = { password: password, name: name };
                const updatedData = JSON.stringify(jsonData);
                console.log(jsonData);
                // 업데이트된 JSON 파일을 다시 쓰기
                fs.writeFile(
                    __dirname + "/../../data/data1.json",
                    updatedData,
                    (err) => {
                        if (err) {
                            console.error("Error writing JSON file:", err);
                            return res
                                .status(500)
                                .send("Error writing JSON file");
                        }

                        console.log("Data successfully added to JSON file");
                        res.send("Data successfully added to JSON file");
                    }
                );
            }
        );
    });

PUT의 테스트를 위해 curl을 사용했다.

curl -X PUT -d "password=change1" http://localhost:3000/data/Rechel

Delete - 제거

Pinkbani를 제거해보자.

app.delete("/data/:name", (req, res) => {
        const name = req.params.name;

        fs.readFile(
            __dirname + "/../../data/data1.json",
            "utf8",
            (err, data) => {
                if (err) {
                    console.error("Error reading JSON file:", err);
                    return res.status(500).send("Error reading JSON file");
                }
                const jsonData = JSON.parse(data);

                if (!jsonData[name]) {
                    return res
                        .status(404)
                        .json({ error: "이름을 찾을 수 없습니다." });
                }

                delete jsonData[name];
                const updatedData = JSON.stringify(jsonData);

                // 업데이트된 JSON 파일을 다시 쓰기
                fs.writeFile(
                    __dirname + "/../../data/data1.json",
                    updatedData,
                    (err) => {
                        if (err) {
                            console.error("Error writing JSON file:", err);
                            return res
                                .status(500)
                                .send("Error writing JSON file");
                        }

                        console.log("Data successfully del to JSON file");
                        res.send("Data successfully del to JSON file");
                    }
                );
            }
        );
    });

Express-Session

Express는 express-session 미들웨어를 사용해 세션을 관리한다.

npm install -s express-session

세션 생성

const session = require("express-session");

app.use(
    session({
        secret: "@#@$MYSIGN#@$#$",
        resave: false,
        saveUninitialized: true,
    })
);

secret : 쿠키를 임의로 변조하는 것을 방지하기 위한 값, 이 값을 통해 세션을 암호화하여 저장.
resave : 세션을 언제나 저장할 지(변경되지 않아도) 정하는 값, express-session Doc에서는 이 값을 false로 하는 것을 권장.
saveUninitialized : 세션이 저장되기 전에 uninitialized 상태로 미리 만들어 저장.

세션 초기화

app.get('/',(req,res)=>{
	sess = req.session;
});

세션 변수 설정

app.get("/list",(req,res)=>{
	sess = req.session;
    sess.username = "velopert"
});

"sess.키 이름 = 값"으로 세션 변수를 설정할 수 있다.

세션 변수 사용

app.get("/",(req,res)=>{
	sess = req.session;
    console.log(sess.username);
});

"sess.키 이름"으로 변수 사용할 수 있다.

세션 제거

req.session.destroy((err)=>{
    // 세션이 없을 때 처리
    // 이 콜백 함수에서는 세션에 접근 할 수 없음.
});

728x90

저작자표시 변경금지

'Back-end & Server > Node.js' 카테고리의 다른 글

[Node.js] JWT (0)	2023.08.01
[Node.js] 토큰(Token) 기반 인증 (0)	2023.08.01
[Node.js] Express.js (0)	2023.07.31
[Node.js] 클라이언트 (0)	2023.07.30
[Node.js] Event Loop (0)	2023.07.29

Pupbani's Lab

[Node.js] 자주 쓰는 의존성 패키지

EJS 템플릿 엔진

RESTful API

Express-Session

'Back-end & Server > Node.js' 카테고리의 다른 글

티스토리툴바

[Node.js] 자주 쓰는 의존성 패키지

EJS 템플릿 엔진

RESTful API

Express-Session

'Back-end & Server > Node.js' 카테고리의 다른 글

'Back-end & Server/Node.js' Related Articles

티스토리툴바