마카로닉스

1963 No

Nodejs 정복하기

2022-10-24 00:27:55 By 라이트 0 371 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

1강-설치
2강-VS Code 다운로드
3강-Nodejs 실행
4강-NPM 명령어
5강-자신만의 Module 만들기
6강-Core Module (readline)
7강-Core Module (file system)
8강-Sync와 Async (동기 vs 비동기)
9강-단어장 App Overview
10강-NPM 패키지 (3rd party module)
11강-JSON 읽고 쓰기
12강-HTTP 서버 만들기
13강-Express로 서버 만들기
14강-Express 기초 원리와 HTML 보내는 방법
15강-Middleware
16강-Template (Handlebars)
17강-Semantic-ui 적용
18강-간단한 Layout 만들기
19강-Handlebars Array를 Each사용하여 나타내기
20강-Post Request와 Body Parser 사용
21강-Delete Request 보내는 방법

강의 : https://www.youtube.com/playlist?list=PLHGvDasahwZMko2OayS24NEzWYf3sMq2w

소스 : https://github.dev/DannyTWLC/complete-nodejs-code

https://github.dev/braverokmc79/Nodejs-conquer

1강-설치

nodejs 다운로드

https://nodejs.org/ko/download/

2강-VS Code 다운로드

vscode 다운로드

https://code.visualstudio.com/download

3강-Nodejs 실행

4강-NPM 명령어

5강-자신만의 Module 만들기

stat.js

exports.pi = 3.14;
const mean = (...arr) => {
    if (arr.length === 0) {
        return 0;
    }

    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    return sum / arr.length;
};

exports.mean = mean;

app.js

console.log("Hello from Daniel");
const add = require("./add");
const mult = require("./mult");
const stat = require("./stat");

const result1 = add(1, 2);
const result2 = mult(10, 2);

console.log(result1, result2);
console.log(stat.pi, stat.mean(1, 2, 3, 4, 5));

실행

$ node app.js

6강-Core Module (readline)

7강-Core Module (file system)

8강-Sync와 Async (동기 vs 비동기)

9강-단어장 App Overview

10강-NPM 패키지 (3rd party module)

$ npm install express

$ npm install readline-sync

11강-JSON 읽고 쓰기

app.js

const fs = require("fs");

const data = fs.readFileSync("./vocab.json", { encoding: "utf-8" });
let arr = JSON.parse(data);
console.log(arr);

const ob = {
    name: "Daniel",
    age: 20,
    description: "I go to school.",
};

fs.writeFileSync("test.json", JSON.stringify(ob, null, 2));

vocab.json

[
    {
        "word": "Eat",
        "definition": [
            "먹다",
            "식사를 하다"
        ],
        "examples": [
            {
                "sentence": "I eat an apple",
                "definition": "저는 사과를 먹습니다."
            },
            {
                "sentence": "I cat't eat that.",
                "definition": "나는 저것을 먹을 수 없다."
            }
        ]
    },
    {
        "word": "Learn",
        "definition": [
            "배우다",
            "학습하다"
        ],
        "examples": [
            {
                "sentence": "I learn English.",
                "definition": "저는 영어를 배웁니다."
            },
            {
                "sentence": "Programming languages are fun to learn.",
                "definition": "프로그래밍 언어를 배우는 것은 정말 재미있는 일입니다."
            }
        ]
    }
]

12강-HTTP 서버 만들기

app.js

const http = require("http");

const server = http.createServer((req, res) => {
    if (req.url === "/") {
        res.write("<h1>Hello from nodejs</h1>");
    } else {
        res.write(`<h1>You have entered this url : ${req.url}</h1>`);
    }
    res.end();
});

server.listen(3000, () => {
    console.log("The server is listening on port 3000");
});

13강-Express로 서버 만들기

app_13.js

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

server.get("/", (req, res) => {
    res.send("<h1></h1>")
});


server.listen(3000, (err) => {
    if (err) return console.log(err);
    console.log("The server is listening on port 3000");
})

14강-Express 기초 원리와 HTML 보내는 방법

app_14.js

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

server.get("/", (req, res) => {
    res.sendFile(__dirname + "/index.html");
});

server.get("/about", (req, res) => {
    res.sendFile(__dirname + "/about.html");
});

server.listen(3000, (err) => {
    if (err) return console.log(err);
    console.log("The server is listening on port 3000");
});

15강-Middleware

app_15.js

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

server.use(express.static(__dirname + "/public"));

server.get("/", (req, res) => {
    res.sendFile(__dirname + "/index.html");
});

server.get("/about", (req, res) => {
    res.sendFile(__dirname + "/about.html");
});

server.use((req, res) => {
    res.sendFile(__dirname + "/404.html");
});

server.listen(3000, (err) => {
    if (err) return console.log(err);
    console.log("The server is listening on port 3000");
});

16강-Template (Handlebars)

nodemon 설치

$ npm install nodemon --save-dev

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon ./app.js"
  },

실행

$npm run dev

뷰템플릿 설치

$ npm install express-handlebars

app.js

const express = require("express");
const hbs = require("express-handlebars");
const server = express();


server.use(express.static(__dirname + "/public"));
server.set("view engine", "hbs");
server.engine(
    "hbs",
    hbs.engine({
        extname: 'hbs',
        defaultLayout: 'layout',
        layoutsDir: __dirname + '/views/layouts/',
        partialsDir: __dirname + '/views/partials'
    }

    ));



server.get("/", (req, res) => {
    res.render("home", { message: "Hello from node.js", });
});


server.use((req, res) => {
    res.sendFile(__dirname + "/404.html");
});

server.listen(3000, (err) => {
    if (err) return console.log(err);
    console.log("The server is listening on port 3000");
});

17강-Semantic-ui 적용

views/layouts/layout.hbs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/semantic/semantic.min.css" />
    <script src="/semantic/semantic.min.js"></script>
</head>

<body>
    {{{ body }}}
</body>

</html>

views/home.hbs

<h1>{{ message }}</h1>
<button class="ui button red">
    Hello
</button>

18강-간단한 Layout 만들기

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon ./app.js -e js,json,mjs,hbs"
  },

app.js

const express = require("express");
const hbs = require("express-handlebars");
const server = express();


server.use(express.static(__dirname + "/public"));
server.set("view engine", "hbs");
server.engine(
    "hbs",
    hbs.engine({
        extname: 'hbs',
        defaultLayout: 'layout',
        layoutsDir: __dirname + '/views/layouts/',
        partialsDir: __dirname + '/views/partials/'
    }

    ));



server.get("/", (req, res) => {
    res.render("home", { message: "Hello from node.js", });
});

server.get("/add", (req, res) => {
    res.render("add");
});
server.get("/quiz", (req, res) => {
    res.render("quiz");
});


server.use((req, res) => {
    res.sendFile(__dirname + "/404.html");
});

server.listen(3000, (err) => {
    if (err) return console.log(err);
    console.log("The server is listening on port 3000");
});

quiz.hbs

<div class="ui main text container">
    <h1 class="ui header">Quiz</h1>
</div>

home.hbs

<div class="ui main text container">
    <h1 class="ui header">Semantic UI Fixed Template</h1>
    <p>This is a basic fixed menu template using fixed size containers.</p>
    <p>A text container is used for the main container, which is useful for single column layouts</p>
</div>

add.hbs

<div class="ui main text container">
    <h1 class="ui header">Add</h1>
</div>

404.hbs

<div class="ui main text container">
    <h1 class="ui header">Error 404 - Page Not Found</h1>
</div>

19강-Handlebars Array를 Each사용하여 나타내기

views/home.hbs

<div class="ui main text container">
    <h1 class="ui header">Semantic UI Fixed Template</h1>
    {{#each words}}
    <div class="card flex-box">
        <div class="flex-1 main-word">
            <h1>{{this.word}}</h1>
        </div>
        <div class="flex-1 word-list">
            <ul>
                {{#each this.definition}}
                <li>{{this}}</li>
                {{/each}}
            </ul>
        </div>
    </div>
    {{/each}}
</div>

public/styles/index.css

.flex-box {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.flex-4 {
  flex: 4;
}
.flex-5 {
  flex: 5;
}
.flex-6 {
  flex: 6;
}
.flex-7 {
  flex: 7;
}
.card {
  border: 1px solid black;
  border-radius: 5px;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}
.main-word {
  text-align: center;
  min-width: 300px;
}
.word-list {
  min-width: 300px;
}

views/layouts/layout.hbs

   <link href="/styles/index.css" rel="stylesheet" />

20강-Post Request와 Body Parser 사용

body-parser 설치

$ npm install body-parser

app.js

const express = require("express");
const hbs = require("express-handlebars");
const words = require("./db/words.json");
const bodyParser = require("body-parser");
const server = express();




server.use(express.static(__dirname + "/public"));
server.set("view engine", "hbs");
server.engine(
    "hbs",
    hbs.engine({
        extname: 'hbs',
        defaultLayout: 'layout',
        layoutsDir: __dirname + '/views/layouts/',
        partialsDir: __dirname + '/views/partials/'
    }

    ));

server.use(bodyParser.urlencoded({ extended: false }))


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

server.post("/", (req, res) => {
    const { query } = req.body;
    const wordsFilter = words.filter((w) =>
        w.word.toLowerCase().includes(query.toLowerCase())
    );

    res.render("home", { words: wordsFilter });
});

server.get("/add", (req, res) => {
    res.render("add");
});
server.get("/quiz", (req, res) => {
    res.render("quiz");
});


server.use((req, res) => {
    res.sendFile(__dirname + "/404.html");
});

server.listen(3000, (err) => {
    if (err) return console.log(err);
    console.log("The server is listening on port 3000");
});

views/home.hbs

    <form method="POST" action="/">
        <div class="ui action input fluid">
            <input type="search" placeholder="Search..." name="query">
            <button class="ui button" type="submit">Search</button>
        </div>
    </form>

21강-Delete Request 보내는 방법

views/layouts/layout.hbs

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

public/styles/index.css

.card {
  border: 1px solid black;
  border-radius: 5px;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}
.main-word {
  text-align: center;
  min-width: 300px;
}
.word-list {
  min-width: 300px;
}

.card {
  position: relative;
  border: 1px solid black;
  border-radius: 5px;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}
.main-word {
  text-align: center;
  min-width: 300px;
}
.word-list {
  min-width: 300px;
}
.delete-btn{
  position:absolute;
  top: 50%;
  right: 10px;
  transform:translateY(-50%);
  cursor:pointer;
}

views/home.hbs

<div class="ui main text container">
    <h1 class="ui header">Semantic UI Fixed Template</h1>
    <form method="POST" action="/">
        <div class="ui action input fluid">
            <input type="search" placeholder="Search..." name="query">
            <button class="ui button" type="submit">Search</button>
        </div>
    </form>
    {{#each words}}
    <div class="card flex-box">
        <div class="flex-1 main-word">
            <h1>{{this.word}}</h1>
        </div>
        <div class="flex-1 word-list">
            <ul>
                {{#each this.definition}}
                <li>{{this}}</li>

                {{/each}}
            </ul>
        </div>
    <div class="delete-btn" onclick="deleteWord(this, '{{this.word}}')">
        <div>X</div>
    </div>
    </div>
    {{/each}}
</div>


<script>
    const deleteWord = (el, word) => {
        $.ajax("/", {
            method: "DELETE",
            data: {
                word,
            }
        })
        let p = el.parentNode.parentNode;
        let c = el.parentNode;
        p.removeChild(c)
    }
</script>