2021.02.21

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

2021.02.21

shine94 2021. 2. 21. 14:07

1. 어제 수업할 때 만든 package를 이용하여 복원하기

: 복원할 package + 터미널에 npm install 명령어

2. 포스트맨 다운로드

www.postman.com/downloads

** 국비 수업 + 라이징 프로그래밍 수업을 진행하면서 다운받은 상태 -> https://shine94.tistory.com/85

3. 1_Express1.js

const express = require('express');
const bodyParser = require('body-parser');      // post 데이터를 전달받기 위해 사용

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

// body-parser를 이용하여 application/x-www-form-urlencoded 파싱
// http://localhost:3000/?userid=apple&userpw=1111 
// └ 전송방식이 get이 아니기 때문에 데이터를 받을 수 없음
app.use(bodyParser.urlencoded({extended: false}));
app.use((req, res) => {
    const paramId = req.body.userid;
    const paramPw = req.body.userpw;
    console.log(`paramId: ${paramId}, paramPw:${paramPw}`);

    res.writeHead(200, {'content-type':'text/html;charset=utf-8'});
    res.write('<h2>익스프레스 서버에서 응답한 메시지입니다.</h2>');
    res.write(`<p>아이디 : ${paramId}</p>`);
    res.write(`<p>비밀번호 : ${paramPw}</p>`);
    res.end();
});

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

4. REST(REpresentational State Transfer)

: 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 것을 의미한다.

5. CRUD 연산

CREATE : 생성(POST)
READ : 조회(GET)
UPDATE : 수정(PUT)
DELETE : 삭제(DELETE)

6. Router 미들웨어

: 사용자의 다양한 요청이 들어왔을때 use() 메소드로 설정한 미들웨어가 항상 호출되는 불편한 점이 있다.
이를 해결하고자 사용하는 미들웨어가 Router 미들웨어이다.

7. Router 객체 만들기

const 라우터객체 = express.Router();

라우터객체.route(요청패스).get(실행할 함수);
라우터객체.route(요청패스).post(실행할 함수);

8. 익스프레스에 Router 객체 적용

app.use('/', 라우터객체);

9. 2_Express2.js

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

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

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

const router = express.Router();

// http://localhost:3000/member/login -> post
router.route('/member/login').post((req, res) => {
    console.log('/member/login 호출!');
});

// http://localhost:3000/member/regist -> post
router.route('/member/regist').post((req, res) => {
    console.log('/member/regist 호출!');
});

// http://localhost:3000/member/about -> get
router.route('/member/about').get((req, res) => {
    console.log('/member/about 호출!');
});

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

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

10. 템플릿 엔진
1) EJS(Embedded JavaScript)

: EJS 모듈은 템플릿 엔진 모듈이다.
템플릿 엔진 모듈은 특정한 형식인 파일로부터 HTML 페이지를 생성하는 모듈이다.

** EJS 파일 형식의 특수 코드

<% ~~~ code ~~~ %> : 자바스크립트 코드를 입력하는 영역이다.
<%= 변수 또는 값 %> : 데이터를 출력한다.
<%- 변수 또는 객체 %> : EJS 파일 전체를 전달한다.

** EJS 데이터를 전달하는 방법
render() : 메소드의 매개 변수에 전달하고자 하는 데이터를 입력하여 전달한다.

** 3_Ejs1.js

const express = require('express');
const fs = require('fs');
const ejs = require('ejs');     // npm i ejs

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

const router = express.Router();

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

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

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

** ejs1.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>EJS 첫 페이지</title>
</head>
<body>
    <%
        const userid = 'apple';
        const username = '김사과';
    %>
    <h2>EJS 첫 페이지</h2>
    <p>아이디 : <%=userid%></p>
    <p>이름 : <%=username%></p>
    <p>생년월일을 입력하세요</p>
    <p>
        <select>
        <%
            for(let i=1970; i<= 2021; i++) {
        %>
            <option value="<%=i%>"><%=i%></option>
        <%
            }
        %>
        </select>
    </p>
</body>
</html>

** 4_Ejs2.js

const express = require('express');
const fs = require('fs');
const ejs = require('ejs');

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

const router = express.Router();

// http://localhost:3000/login
router.route('/login').post((req, res) => {
    const userinfo = {userid: 'apple', userpw: '1234'};
    fs.readFile('./ejs2.ejs', 'utf-8', (err, data) => {
        if(!err) {
            res.writeHead(200, {'content-type' : 'text/html'});
            res.end(ejs.render(data, userinfo));
        } else {
            console.log(err);
        }
    });
});

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

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

** ejs2.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>로그인 파라미터</title>
</head>
<body>
    <h2>EJS 로그인 파라미터</h2>
    <p>아이디 : <%=userid%></p>
    <p>패스워드 : <%=userpw%></p>
</body>
</html>

** 5_Ejs3.js

const express = require('express');
const fs = require('fs');
const ejs = require('ejs');

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

const router = express.Router();

const header = fs.readFileSync('./header.ejs', 'utf-8');
const body = fs.readFileSync('./body.ejs', 'utf-8');

// http://localhost:3000/about
router.route('/about').post((req, res) => {
    const html = ejs.render(header, 
        {title: '매개변수로 전달된 제목입니다.', 
        content: ejs.render(body, {message: '매개변수로 전달된 텍스트 메시지 입니다!'})});
    res.writeHead(200, {'content-type':'text/html'});
    res.end(html);
});

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

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

** header.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><%=title%></title>
    <style>
        body { background-color: deepskyblue; }
        h2 { font-size: 30px; color: gold; }
    </style>
</head>
<body>
    <header>
        <h2><%=title%></h2>
    </header>
    <div>
        <p><%-content%></p>
    </div>
</body>
</html>

** body.ejs

<p>예제로 만든 템플릿 입니다.</p>
<p>다른 파일로 준비한 것을 읽어와서 사용합니다.</p>
<p><%=message%></p>

2) PUG(구 jade)

https://jade-lang.com

** 6_Jade1.js

const express = require('express');
const fs = require('fs');
const jade = require('jade');       // npm i jade

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

const router = express.Router();

router.route('/about').post((req, res) => {
    fs.readFile('./jade1.jade', 'utf-8', (err, data) => {
        if(!err) {
            const jd = jade.compile(data);
            res.writeHead(200, {'content-type':'text/html'});
            res.end(jd());
        } else {
            console.log(err);
        }
    });
});

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

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

** jade1.jade

html
    head
        title jade 테스트입니다.
    body
        h1 안녕하세요. Jade
        p 처음으로 만드는 jade 예제입니다.
        br
        a(href='https://www.google.com', alt='구글') 구글로 이동

** 7_Jade2.js

const express = require('express');
const fs = require('fs');
const jade = require('jade');

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

const router = express.Router();

// http://localhost:3000/userinfo
router.route('/userinfo').post((req, res) => {
    fs.readFile('./jade2.jade', 'utf-8', (err, data) => {
        if(!err) {
            const jd = jade.compile(data);
            res.writeHead(200, {'content-type':'text/html'});
            res.end(jd({userid: 'apple', name: '김사과', desc: '착해요'}));
        } else {
            console.log(err);
        }
    });
});

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

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

** jade2.jade

html
    head
        title 사용자 정보 보기
    body
        #header
            h2 사용자 아이디 : #{userid}
        hr
        #header
            h2 사용자 이름 : #{name}
            p= desc
        hr
        .article
            a(href='https://www.daum.net') 다음으로 이동
        hr
        .for
            - for(let i=0; i<10; i++) {
                p
                    a(href='http://localhost:3000/#{i}') 사이트 이동 #{i}
            - }

3) nunjucks

www.npmjs.com/package/nunjucks

11. Node.js에서 메일 보내기

: nodemailer 모듈 → gmail 서버를 이용하여 메일을 보낼 수 있다.

1) 보안 수준이 낮은 앱의 액세스

https://myaccount.google.com/lesssecureapps

2) 계정 액세스 사용을 허용

https://accounts.google.com/DisplayUnlockCaptcha

3) nodemailer 설정

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

4) 메일 발송 옵션 설정
const 메일발송옵션객체명 = {
from: "이름<메일주소>",
to: "이름<메일주소>",
subject: "제목",
text: "내용" or html: "HTML코드"
}

** 8_Nodemailer1.js

const nodemailer = require('nodemailer');       // npm i nodemailer

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

const mailOptions = {
	from: "발송자_이름<발송자_메일주소>",
	to: "수신자_이름<수신자_메일주소>",
	subject: "node.js의 nodemailer 테스트중입니다.",
	html: "<h2>안녕하세요. 메일이 잘 가나요?</h2><p style='color: deeppink;'>정말 잘 가네요!</p>"
}

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