(Node.js)익스프레스로 웹 서버 만들기(2)

프린이0218 2020. 9. 8. 16:39

2020. 9. 8. 16:39

-static 미들웨어-

npm install serve-static --save 설치

샘플1.

var static = require('serve-static')
app.use('/public',static(path.join(__dirname,'public')));

위 코드처럼 설정을 하면 폴더1/public/index.html 에서 index.html에 접근하려면 바로 http://localhost:3000/index.html로 바로 접근 가능하다.

-body-parser 미들웨어-

app7.js

/**
 * POST 방식으로 전달된 파라미터 확인하기
 *
 * (1) 웹 브라우저에서 http://localhost:3000/public/login.html 페이지 열고 요청
 * (2) 크롬 브라우저의 Postman 앱이나 기타 POST 요청 도구를 사용하여 POST 방식으로 요청
 *     GET 방식으로 요청 시에는 웹브라우저에서 아래 URL로 요청해야 함
 *         http://localhost:3000?id=test1&password=123456
 *
 * @date 2016-10-25
 * @author Mike
 */

// Express 기본 모듈 불러오기
var express = require('express')
  , http = require('http')
  , path = require('path');

// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
  , static = require('serve-static');

// 익스프레스 객체 생성
var app = express();

// 기본 속성 설정
app.set('port', process.env.PORT || 3000);

// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))

// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())

app.use(static(path.join(__dirname, 'public')));

// 미들웨어에서 파라미터 확인
app.use(function(req, res, next) {
	console.log('첫번째 미들웨어에서 요청을 처리함.');

	var paramId = req.body.id || req.query.id;
	var paramPassword = req.body.password || req.query.password;
	
	res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
	res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');
	res.write('<div><p>Param id : ' + paramId + '</p></div>');
	res.write('<div><p>Param password : ' + paramPassword + '</p></div>');
	res.end();
});


// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>로그인 테스트</title>
    </head>
    <body>
        <h1>로그인</h1>
        <br>
        <form method='post'>
            <table>
                <tr>
                    <td><label>아이디</label></td>
                    <td><input type='text' name="id"></td>
                </tr>
                <tr>
                    <td><label>비밀번호</label></td>
                    <td><input type="password" name="password"></td>
                </tr>
            </table>
            <input type="submit" value="전송" name=''>
        </form>
    </body>
</html>

-라우터 미들웨어-

사용자가 요청한 기능이 무엇인지 패스를 기준으로 구별함.

example

//라우터 객체 참조
var router = express.Router();

//라우팅 함수 등록
router.route('/process/login').get(...);
router.route('/process/login').post(...);
...

//라우터 객체를 app 객체에 등록
app.use('/',router);

↓

router.route(요청패스).get(실행될 함수);
router.rout(요청패스).post(실행될 함수);

메소드 이름	설명
get(callback)	get 방식으로 특정 패스 요청이 발생했을 때 사용할 콜백 함수를 지정합니다.
post(callback)	post 방식으로 특정 패스 요청이 발생했을 때 사용할 콜백 함수를 지정합니다.
put(callback)	put 방식으로 특정 패스 요청이 발생했을 때 사용할 콜백 함수를 지정합니다.
delete(callback)	delete 방식으로 특정 패스 요청이 발생했을 때 사용할 콜백 함수를 지정합니다.
all(callback)	모든 요청 방식을 처리하며 특정 패스 요청이 발생했을 때 사용할 콜백 함수를 지정합니다.

app8.js

/**
 * Router 객체를 이용해 라우팅 함수 등록하기
 *
 * (1) 웹 브라우저에서 http://localhost:3000/public/login2.html 페이지 열고 요청
 * (2) 크롬 브라우저의 Postman 앱이나 기타 POST 요청 도구를 사용하여 POST 방식으로 요청
 *
 * @date 2016-10-25
 * @author Mike
 */

// Express 기본 모듈 불러오기
var express = require('express')
  , http = require('http')
  , path = require('path');

// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
  , static = require('serve-static');

// 익스프레스 객체 생성
var app = express();

// 기본 속성 설정
app.set('port', process.env.PORT || 3000);

// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))

// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())

app.use('/public', static(path.join(__dirname, 'public')));


// 라우터 객체 참조
var router = express.Router();

// 라우팅 함수 등록
router.route('/process/login').post(function(req, res) {
	console.log('/process/login 처리함.');

	var paramId = req.body.id || req.query.id;
	var paramPassword = req.body.password || req.query.password;
	
	res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
	res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');
	res.write('<div><p>Param id : ' + paramId + '</p></div>');
	res.write('<div><p>Param password : ' + paramPassword + '</p></div>');
	res.write("<br><br><a href='/public/login2.html'>로그인 페이지로 돌아가기</a>");
	res.end();
});

// 라우터 객체를 app 객체에 등록
app.use('/', router);


// 등록되지 않은 패스에 대해 페이지 오류 응답
app.all('*', function(req, res) {
	res.status(404).send('<h1>ERROR - 페이지를 찾을 수 없습니다.</h1>');
});


// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

login2.html(Action 속성 추가)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>로그인 테스트</title>
    </head>
    <body>
        <h1>로그인</h1>
        <br>
        <form method='post' action="/process/login">
            <table>
                <tr>
                    <td><label>아이디</label></td>
                    <td><input type='text' name="id"></td>
                </tr>
                <tr>
                    <td><label>비밀번호</label></td>
                    <td><input type="password" name="password"></td>
                </tr>
            </table>
            <input type="submit" value="전송" name=''>
        </form>
    </body>
</html>

-URL 파라미터 사용하기-

app8_02.js(router.route 경로에 /:name 추가)

req.params.name;-> param에서 이름을 가져옴

/**
 * Router 객체를 이용해 라우팅 함수 등록하기
 * POST로 요청할 때 URL 파라미터를 params 객체로 확인
 *
 * (1) 웹 브라우저에서 http://localhost:3000/public/login3.html 페이지 열고 요청
 * (2) 크롬 브라우저의 Postman 앱이나 기타 POST 요청 도구를 사용하여 POST 방식으로 요청
 *
 * @date 2016-10-25
 * @author Mike
 */

// Express 기본 모듈 불러오기
var express = require('express')
  , http = require('http')
  , path = require('path');

// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
  , static = require('serve-static');

// 익스프레스 객체 생성
var app = express();

// 기본 속성 설정
app.set('port', process.env.PORT || 3000);

// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))

// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())

app.use('/public', static(path.join(__dirname, 'public')));


// 라우터 사용하여 라우팅 함수 등록
var router = express.Router();

router.route('/process/login/:name').post(function(req, res) {
	console.log('/process/login/:name 처리함.');

    var paramName = req.params.name;
    
	var paramId = req.body.id || req.query.id;
	var paramPassword = req.body.password || req.query.password;
	
	res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
	res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');
    res.write('<div><p>Param name : ' + paramName + '</p></div>');
	res.write('<div><p>Param id : ' + paramId + '</p></div>');
	res.write('<div><p>Param password : ' + paramPassword + '</p></div>');
	res.write("<br><br><a href='/public/login3.html'>로그인 페이지로 돌아가기</a>");
	res.end();
});

app.use('/', router);


// 등록되지 않은 패스에 대해 페이지 오류 응답
app.all('*', function(req, res) {
	res.status(404).send('<h1>ERROR - 페이지를 찾을 수 없습니다.</h1>');
});


// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

login3.html(액션에 경로추가)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>로그인 테스트</title>
    </head>
    <body>
        <h1>로그인</h1>
        <br>
        <form method='post' action="/process/login/mike">
            <table>
                <tr>
                    <td><label>아이디</label></td>
                    <td><input type='text' name="id"></td>
                </tr>
                <tr>
                    <td><label>비밀번호</label></td>
                    <td><input type="password" name="password"></td>
                </tr>
            </table>
            <input type="submit" value="전송" name=''>
        </form>
    </body>
</html>

/prcoess/login/mike <-> /process/login/:name 서로 매핑해준다.

'For developer > Node.js' 카테고리의 다른 글

(Node.js)파일 업로드 기능 (0)	2020.09.08
(Node.js)쿠키와 세션 (0)	2020.09.08
(Node.js)익스프레스로 웹 서버 만들기(1) (0)	2020.09.07
(Node.js)서버관련 (0)	2020.09.07
(Node.js)파일처리 관련(1) (0)	2020.09.06

이일팔의 IT