[NodeJS] express와 함께 쓰는 모듈들

Tim·2022년 2월 13일
0

NodeJS

목록 보기
3/4
post-thumbnail

1. body-parser 미들웨어

HTTP post put 요청시 request body 에 들어오는 데이터값을 읽을 수 있는 구문으로 파싱함과 동시에 req.body 로 입력해주어 응답 과정에서 요청에 body 프로퍼티를 새로이 쓸 수 있게 해주는 미들웨어.

  • extended 옵션
    body-parser 미들웨어의 여러 옵션 중에 extended를 false로 설정하면 node.js에 기본으로 내장된 queryString를 사용하고 true일 때 따로 설치가 필요한 npm qs 라이브러리를 사용합니다.

    extended:false -> queryString 사용
    extended:true -> qs 라이브러리 사용

    app.use(bp.urlencoded({extended:false}));
  • 사용 방법

     const express = require('express');
     const bp = require('body-parser');
     const app = express();
    
     app.use(bp.urlencoded({extended:false}));
     app.use((req, res) => {
         const userid = req.body.userid;
         const userpw = req.body.userpw;
    
         console.log(`userid : ${userid} / userpw : ${userpw}`);
         res.writeHead(200, {'content-type': 'text/html; charset=utf-8'});
         res.write(`<h2>익스프레스 서버에서 응답한 메세지 입니다.</h2>`);
         res.end();
     }).listen(3000, () => {
         console.log('3000번 포트로 서버 실행중...');
     });

2. router 미들웨어

router는 사용자의 다양한 요청이 들어왔을 때 use() 메소드로 설정한 미들웨어가 항상 호출되는 불편한 점을 개선하여 만들어진 모듈입니다. 라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말합니다.

  • router 객체 생성
    const express = require('express');
    const app = express();

    const 객체명 = express.Router();
    객체명.route('/요청 URL').get(호출할 함수);
    객체명.route('/요청 URL').post(호출할 함수);

  • express에 router 객체를 등록
    app.use('/', 객체명);

  • 사용 방법

    const express = require('express');
    const bp = require('body-parser');
    const app = express();
    const router = express.Router();
    
    app.use(bp.urlencoded({extended:false}));
    
    // post 방식
    router.route('/member/login').post((req, res) => {
        console.log('/member/login 호출');
    });
    // get 방식
    router.route('/about/detail').get((req, res) => {
        console.log('/about/detail 호출');
    });
    
    app.use('/', router);
    // 존재하지 않는 페이지 처리
    app.all('*', (req, res) => {
        res.status(404).send('<h2>페이지를 찾을 수 없습니다.</h2>');
    })
    app.listen(3000, () => {
        console.log('3000번 포트로 서버 실행중...');
    });

3. EJS(Embeded JavaScript) 모듈

템플릿 엔진. View를 구현하기 위한 템플릿을 의미합니다.
EJS 모듈은 특정한 형식의 파일로부터 HTML 페이지를 생성하는 모듈입니다.

  • 문법
    .ejs 확장자 파일 내에서 <% %>, <%= %>를 사용하여 자바스크립트 문법 사용.
    ejs.render()를 통해 요청받은 데이터를 ejs 모듈로 랜더링하여 응답.

  • EJS 모듈 설치

    npm install ejs
  • 사용 방법

    const express = require('express');
    const bp = require('body-parser');
    const fs = require('fs');
    const ejs = require('ejs');
    
    const app = express();
    const router = express.Router();
    
    app.use(bp.urlencoded({extended:false}));
    
    router.route('/login').post((req, res) => {
        const userinfo = {
            userid: req.body.userid, 
            userpw: req.body.userpw
        };
        fs.readFile('./ejs.ejs', 'utf-8', (err, data) => {
            if(err) {
                console.log(err);
            } else {
                console.log('/login 호출!');
                res.writeHead(200, {'coontent-type':'text/html'});
                res.end(ejs.render(data, userinfo));
            }
        });
    });
    
    app.use('/', router);
    app.all('*', (req, res) => {
        res.status(404).send('<h2>페이지를 찾을 수 없습니다.</h2>');
    });
    app.listen(3000, () => {
        console.log('3000번 포트로 서버 실행중...');
    });
  • ejs 파일

    <!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>사용자 정보</title>
    </head>
    <body>
        <h2>사용자 정보</h2>
        <p>아이디 : <%=userid%></p>
        <p>비밀번호 : <%=userpw%></p>
    </body>
    </html>
profile
HTML5, CSS3, JavaScript, Typescript, React 프론트엔드 개발자입니다.

0개의 댓글