2021.02.27

웹_프론트_백엔드/프론트엔드

2021.02.27

shine94 2021. 2. 27. 15:08

1. 메일 보내기

보안 수준이 낮은 앱의 액세스 : https://myaccount.google.com/lesssecureapps

계정 액세스 사용을 허용 : https://accounts.google.com/DisplayUnlockCaptcha

** 1_Mail.js

const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');
const nodemailer = require('nodemailer');

const app = express();
const port = 3000;
const router = express.Router();

app.use(bodyParser.urlencoded({extended: false}));

// http://localhost:3000/mail
router.route('/mail').get((req, res) => {
    fs.readFile('mail.html', 'utf-8', (err, data) => {
        if(!err) {
            res.writeHead(200, {'content-type':'text/html'});
            res.end(data);
        } else {
            console.log(err);
        }
    });
});

// http://localhost:3000/mailok
router.route('/mailok').post((req, res) => {
    const from = req.body.from;
    const fromemail = req.body.fromemail;
    const to = req.body.to;
    const toemail = req.body.toemail;
    const title = req.body.title;
    const content = req.body.content;

    const fmtfrom = `${from}<${fromemail}>`;
    const fmtto = `${to}<${toemail}>`;

    const tansporter = nodemailer.createTransport({
        service: 'Gmail',
        auth: {
            user: '구글아이디@gmail.com',
            pass: '구글비밀번호'
        },
        host: 'smtp.mail.com',
        port: '465'
    });

    const mailOptions = {
        from: fmtfrom,
	    to: fmtto,
	    subject: title,
	    text: content
    }

    tansporter.sendMail(mailOptions, (err, info) => {
        tansporter.close();
        if(err) {
            console.log(err);
        } else {
            console.log(info)
        }
    });
});

app.use('/', router);
app.all('*', (req, res) => {
    res.status(404).send('<h2>페이지를 찾을 수 없습니다.</h2>');
});

app.listen(port, () => {
    console.log(`${port} 포트로 서버 실행중...`);
});

** mail.html

<!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>노드메일 보내기</title>
</head>
<body>
    <h2>노드메일 보내기</h2>
    <form method="post" action="/mailok">
        <p><label>보내는 사람 : <input type="text" name="from"></label></p>
        <p><label>보내는 이메일 : <input type="text" name="fromemail"></label></p>
        <p><label>받는 사람 : <input type="text" name="to"></label></p>
        <p><label>받는 이메일 : <input type="text" name="toemail"></label></p>
        <p><label>제목 : <input type="text" name="title"></label></p>
        <p>내용</p>
        <p><textarea name="content" cols="60" rows="5"></textarea></p>
        <p><input type="submit" value="확인"></p>
    </form>
</body>
</html>

2. 사용자 정의 모듈

: 사용자가 직접 만들어 코드를 관리할 수 있도록 작성하는 모듈이다.

** 첫번째 모듈 작성

module.exports = () => {
모듈 내의 코드
...
...
}

** 첫번째 모듈 작성 사용
const 객체명 = require('파일명');

** 두번째 모듈 작성

모듈 내의 코드
...
...
...
module.export = 변수;

** 두번째 모듈 작성 사용
const 객체명 = require('변수명');

3. 사용자 정의 모듈 실습

1) 나오는 것이 아무것도 없는 에러 발생! → 모듈 호출이 안되고 있다.

2) 모듈을 제대로 호출하니 이번엔 app is not defined 에러 발생!

3) 매개변수로 app을 넘겨주니 views 폴더가 없다고 에러 발생!

4) 잘못만든 view 폴더명을 views로 수정 → 성공!

** 2_Module.js

const express = require('express');
const fs = require('fs');
const bodyParser = require('body-parser');

const app = express();
const port = 3000;

app.engine('html', require('ejs').renderFile);          // views
app.use(bodyParser.urlencoded({extended: false}));

const module1 = require('./router/module1')(app);

app.listen(port, () => {
    console.log(`${port} 포트로 서버 실행중...`);
});

** module1.js

module.exports = (app) => {
    app.get('/', (req, res) => {
        res.render('index.ejs', {
            length: 10
        });
    });
}

** /views/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><%- include('title.ejs')%></title>
</head>
<body>
    <%- include('body.ejs')%>
</body>
</html>

** /views/title.ejs

처음으로 만드는 모듈

** /views/body.ejs

<h2>처음으로 만드는 모듈</h2>
<ul>
    <%
        for(let i=0; i<length; i++) {
    %>
            <li><%=i + "번째 반복중" %></li>
    <%
        }
    %>
</ul>

5) 경로 추가

** module1.js

module.exports = (app) => {

    // http://localhost:3000
    app.get('/', (req, res) => {
        res.render('index.ejs', {
            length: 10
        });
    });

    // http://localhost:3000/about
    app.get('/about', (req, res) => {
        res.render('about.html');
    });
}

** /views/about.html

<!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>node.js</title>
</head>
<body>
    <h2>node.js</h2>
    <p>
        Node.js®에 대해서 비동기 이벤트 주도 JavaScript 런타임으로써<br>
        Node.js 는 확장성 있는 네트워크 애플리케이션을 만들 수 있도록 설계되었습니다.<br>
        다음 "hello world" 예제는 다수의 연결을 동시에 처리할 수 있습니다.<br>
        각 연결에서 콜백이 실행되는데 실행할 작업이 없다면 Node.js 는 대기합니다.<br>
        이는 오늘날 OS 스레드가 일반적으로 사용하는 동시성 모델과는 대조적입니다.<br>
        스레드 기반의 네트워크는 상대적으로 비효율적이고 사용하기가 몹시 어렵습니다.<br>
        게다가 잠금이 없으므로 Node.js 의 사용자는 프로세스의 교착상태에 대해서 걱정할 필요가 없습니다.<br>
        Node.js 에서 I/O를 직접 수행하는 함수는 거의 없으므로 프로세스는 결과 블로킹 되지 않습니다.<br>
        아무것도 블로킹 되지 않으므로 Node.js 에서는 확장성 있는 시스템을 개발하는 게 아주 자연스럽습니다.<br>
    </p>
    <p><a href="/">홈으로</a></p>
</body>
</html>

** /views/body.ejs

<h2>처음으로 만드는 모듈</h2>
<ul>
    <%
        for(let i=0; i<length; i++) {
    %>
            <li><%=i + "번째 반복중" %></li>
    <%
        }
    %>
    <p><a href="/about">node.js란</a></p>
</ul>

4. JSON(JavaScript Object Notation)

: 데이터를 교환하고 저장하기 위해 만들어진 텍스트 기반의 데이터 교환 표준이다.

** JSON 예시

1) 객체

{
"name" : "김사과",
"gender" : "여자",
"age" : 20,
"job" : "학생",
"height" : 155.5,
"hobby" : [
"드라이브",
"쇼핑",
"영화감상"
],
"dog" : null
}

2) 배열
{
"student" : [
{"name":"김사과", "gender":"여자"},
{"name":"오렌지", "gender":"남자"},
{"name":"반하나", "gender":"여자"}
]
}

5. JSON 문법 검증

https://jsonlint.com

6. JSON 예제 - list

** /data/member.json

{
    "apple" : {
        "name" : "김사과",
        "password" : "1111",
        "gender" : "여자"
    },
    "banana" : {
        "name" : "반하나",
        "password" : "2222",
        "gender" : "여자"
    },
    "orange" : {
        "name" : "오렌지",
        "password" : "1234",
        "gender" : "남자"
    },
    "melon" : {
        "name" : "이메론",
        "password" : "3333",
        "gender" : "남자"
    }
}

** 2_Module.js

const express = require('express');
const fs = require('fs');
const bodyParser = require('body-parser');

const app = express();
const port = 3000;

app.engine('html', require('ejs').renderFile);          // views
app.use(bodyParser.urlencoded({extended: false}));

const module1 = require('./router/module1')(app, fs);

app.listen(port, () => {
    console.log(`${port} 포트로 서버 실행중...`);
});

** module1.js

module.exports = (app, fs) => {

    // http://localhost:3000
    app.get('/', (req, res) => {
        res.render('index.ejs', {
            length: 10
        });
    });

    // http://localhost:3000/about
    app.get('/about', (req, res) => {
        res.render('about.html');
    });

    // http://localhost:3000/list
    app.get('/list', (req, res) => {
        fs.readFile(__dirname + "/../data/member.json", 'utf-8', (err, data) => {
            if(!err) {
                console.log(data);
                res.writeHead(200, {'content-type':'text/json;charset=utf-8'});
                res.end(data);
            } else {
                console.log(err);
            }
        });
    });
}

7. JSON을 예쁘게 보는 툴 설치하기(이미 국비 수업을 진행하면서 설치한 상태)

8. JSON 예제 - create

** module1.js

module.exports = (app, fs) => {

    // http://localhost:3000
    app.get('/', (req, res) => {
        res.render('index.ejs', {
            length: 10
        });
    });

    // http://localhost:3000/about
    app.get('/about', (req, res) => {
        res.render('about.html');
    });

    // http://localhost:3000/list
    app.get('/list', (req, res) => {
        fs.readFile(__dirname + "/../data/member.json", 'utf-8', (err, data) => {
            if(!err) {
                console.log(data);
                res.writeHead(200, {'content-type':'text/json;charset=utf-8'});
                res.end(data);
            } else {
                console.log(err);
            }
        });
    });

    // http://localhost:3000/getMember/apple
    app.get('/getMember/:userid', (req, res) => {
        fs.readFile(__dirname + "/../data/member.json", 'utf-8', (err, data) => {
            if(!err) {
                const member = JSON.parse(data);
                res.json(member[req.params.userid]);
            } else {
                console.log(err);
            }
        });
    });
}

** module1.js

module.exports = (app, fs) => {

    // http://localhost:3000
    app.get('/', (req, res) => {
        res.render('index.ejs', {
            length: 10
        });
    });

    // http://localhost:3000/about
    app.get('/about', (req, res) => {
        res.render('about.html');
    });

    // http://localhost:3000/list
    app.get('/list', (req, res) => {
        fs.readFile(__dirname + "/../data/member.json", 'utf-8', (err, data) => {
            if(!err) {
                console.log(data);
                res.writeHead(200, {'content-type':'text/json;charset=utf-8'});
                res.end(data);
            } else {
                console.log(err);
            }
        });
    });

    // http://localhost:3000/getMember/apple
    app.get('/getMember/:userid', (req, res) => {
        fs.readFile(__dirname + "/../data/member.json", 'utf-8', (err, data) => {
            if(!err) {
                const member = JSON.parse(data);
                res.json(member[req.params.userid]);
            } else {
                console.log(err);
            }
        });
    });

    // http://localhost:3000/joinMember/apple
    app.post('/joinMember/:userid', (req, res) => {
        const result = {};
        const userid = req.params.userid;

        if(!req.body["password"] || !req.body["name"]) {
            result["success"] = 100;        // 100 : 실패
            result["msg"] = "invalid request";
            res.json(result);
            return false;
        }
        fs.readFile(__dirname + "/../data/member.json", "utf-8", (err, data) => {
            const member = JSON.parse(data);
            if(member[userid]) {
                result["success"] = 101;    // 101 : 중복 아이디 존재
                result["msg"] = "duplicate";
                res.json(result);
                return false;
            }
            console.log(req.body);
            member[userid] = req.body;
            fs.writeFile(__dirname + "/../data/member.json", JSON.stringify(member, null, '\t'), 'utf-8', (err, data) => {
                if(!err){
                    result["success"] = 200;
                    result["msg"] = "success";
                    res.json(result);
                } else {
                    console.log(err);
                }
            });
        });
    });
}

9. JSON 예제 - update

** module1.js

module.exports = (app, fs) => {

    // http://localhost:3000
    app.get('/', (req, res) => {
        res.render('index.ejs', {
            length: 10
        });
    });

    // http://localhost:3000/about
    app.get('/about', (req, res) => {
        res.render('about.html');
    });

    // http://localhost:3000/list
    app.get('/list', (req, res) => {
        fs.readFile(__dirname + "/../data/member.json", 'utf-8', (err, data) => {
            if(!err) {
                console.log(data);
                res.writeHead(200, {'content-type':'text/json;charset=utf-8'});
                res.end(data);
            } else {
                console.log(err);
            }
        });
    });

    // http://localhost:3000/getMember/apple
    app.get('/getMember/:userid', (req, res) => {
        fs.readFile(__dirname + "/../data/member.json", 'utf-8', (err, data) => {
            if(!err) {
                const member = JSON.parse(data);
                res.json(member[req.params.userid]);
            } else {
                console.log(err);
            }
        });
    });

    // http://localhost:3000/joinMember/apple -> POST
    app.post('/joinMember/:userid', (req, res) => {
        const result = {};
        const userid = req.params.userid;

        if(!req.body["password"] || !req.body["name"]) {
            result["success"] = 100;        // 100 : 실패
            result["msg"] = "invalid request";
            res.json(result);
            return false;
        }
        fs.readFile(__dirname + "/../data/member.json", "utf-8", (err, data) => {
            const member = JSON.parse(data);
            if(member[userid]) {
                result["success"] = 101;    // 101 : 중복 아이디 존재
                result["msg"] = "duplicate";
                res.json(result);
                return false;
            }
            console.log(req.body);
            member[userid] = req.body;
            fs.writeFile(__dirname + "/../data/member.json", JSON.stringify(member, null, '\t'), 'utf-8', (err, data) => {
                if(!err){
                    result["success"] = 200;
                    result["msg"] = "success";
                    res.json(result);
                } else {
                    console.log(err);
                }
            });
        });
    });

    // http://localhost:3000/updateMember/apple -> PUT
    app.put('/updateMember/:userid', (req, res) => {
        const result = {};
        const userid = req.params.userid;

        if(!req.body["password"] || !req.body["name"]) {
            result["success"] = 100;
            result["msg"] = "invalid request";
            res.json(result);
            return false;
        }
        fs.readFile(__dirname + "/../data/member.json", "utf-8", (err, data) => {
            if(!err) {
                const member = JSON.parse(data);
                member[userid] = req.body;
                fs.writeFile(__dirname + "/../data/member.json", JSON.stringify(member, null, '\t'), 'utf-8', (err, data) => {
                    if(!err) {
                        result["success"] = 200;
                        result["msg"] = "success";
                        res.json(result);
                    } else {
                        console.log(err);
                    }
                })
            } else {
                console.log(err);
            }
        });
    });

}

10. JSON 예제 - delete

** module1.js

module.exports = (app, fs) => {

    // http://localhost:3000
    app.get('/', (req, res) => {
        res.render('index.ejs', {
            length: 10
        });
    });

    // http://localhost:3000/about
    app.get('/about', (req, res) => {
        res.render('about.html');
    });

    // http://localhost:3000/list
    app.get('/list', (req, res) => {
        fs.readFile(__dirname + "/../data/member.json", 'utf-8', (err, data) => {
            if(!err) {
                console.log(data);
                res.writeHead(200, {'content-type':'text/json;charset=utf-8'});
                res.end(data);
            } else {
                console.log(err);
            }
        });
    });

    // http://localhost:3000/getMember/apple
    app.get('/getMember/:userid', (req, res) => {
        fs.readFile(__dirname + "/../data/member.json", 'utf-8', (err, data) => {
            if(!err) {
                const member = JSON.parse(data);
                res.json(member[req.params.userid]);
            } else {
                console.log(err);
            }
        });
    });

    // http://localhost:3000/joinMember/berry -> POST
    app.post('/joinMember/:userid', (req, res) => {
        const result = {};
        const userid = req.params.userid;

        if(!req.body["password"] || !req.body["name"]) {
            result["success"] = 100;        // 100 : 실패
            result["msg"] = "invalid request";
            res.json(result);
            return false;
        }
        fs.readFile(__dirname + "/../data/member.json", "utf-8", (err, data) => {
            const member = JSON.parse(data);
            if(member[userid]) {
                result["success"] = 101;    // 101 : 중복 아이디 존재
                result["msg"] = "duplicate";
                res.json(result);
                return false;
            }
            console.log(req.body);
            member[userid] = req.body;
            fs.writeFile(__dirname + "/../data/member.json", JSON.stringify(member, null, '\t'), 'utf-8', (err, data) => {
                if(!err){
                    result["success"] = 200;
                    result["msg"] = "success";
                    res.json(result);
                } else {
                    console.log(err);
                }
            });
        });
    });

    // http://localhost:3000/updateMember/berry -> PUT
    app.put('/updateMember/:userid', (req, res) => {
        const result = {};
        const userid = req.params.userid;

        if(!req.body["password"] || !req.body["name"]) {
            result["success"] = 100;
            result["msg"] = "invalid request";
            res.json(result);
            return false;
        }
        fs.readFile(__dirname + "/../data/member.json", "utf-8", (err, data) => {
            if(!err) {
                const member = JSON.parse(data);
                member[userid] = req.body;
                fs.writeFile(__dirname + "/../data/member.json", JSON.stringify(member, null, '\t'), 'utf-8', (err, data) => {
                    if(!err) {
                        result["success"] = 200;
                        result["msg"] = "success";
                        res.json(result);
                    } else {
                        console.log(err);
                    }
                })
            } else {
                console.log(err);
            }
        });
    });

    // http://localhost:3000/deleteMember/berry -> DELETE
    app.delete('/deleteMember/:userid', (req, res) => {
        let result = {};
        fs.readFile(__dirname + "/../data/member.json", "utf-8", (err, data) => {
            const member = JSON.parse(data);
            if(!member[req.params.userid]) {
                result["success"] = 102;
                result["msg"] = "not found";
                res.json(result);
                return false;
            }
            delete member[req.params.userid];
            fs.writeFile(__dirname + "/../data/member.json", JSON.stringify(member, null, '\t'), 'utf-8', (err, data) => {
                result["success"] = 200;
                result["msg"] = "sucess";
                res.json(result);
            });
        });
    });
}

저작자표시

'웹_프론트_백엔드 > 프론트엔드' 카테고리의 다른 글

2021.03.06 (0)	2021.03.14
2021.02.28 (0)	2021.03.01
2021.02.21 (0)	2021.02.21
2021.02.20 (0)	2021.02.21
2021.02.07 (0)	2021.02.18

현재글2021.02.27

shine의 개발 노트

게임 서버 개발자, 샤인의 IT 공부 노트

shine의 개발 노트

2021.02.27

'웹_프론트_백엔드 > 프론트엔드' 카테고리의 다른 글

'웹_프론트_백엔드/프론트엔드'의 다른글

티스토리툴바

2021.02.27

'웹_프론트_백엔드 > 프론트엔드' 카테고리의 다른 글

'웹_프론트_백엔드/프론트엔드'의 다른글

관련글

티스토리툴바