본문 바로가기
공부/Node.js

[Node.js] express로 웹 서버 만들기(static 미들웨어, 라우팅)

KindLoad 2020. 8. 7. 15:39

저번 글에 이어서 오늘은 미들웨어를 사용해 보려고 한다. 오늘 사용하는 static은 '특정 폴더의 파일들을 특정 패스로 접근할 수 있도록 만들어 준다.'고 하는데 일단 써봐야지 알지 않겠나 싶다.

 

일단 모듈 설치를 해야한다.

 

npm install serve-static --save

대충 모듈을 설치해주었다.

 

bodyParser와 static을 사용하여 데이터 보내기

 

다음으로 serve-static과 bodyParser를 같이 사용할 예정이다. bodyParser는 'POST 방식에서 원하는 파라미터를 확인할 수 있는 모듈'이다. 

 

이번에는 public 폴더 하나와 HTML 파일 하나를 만들어서 사용해 볼 것이다.

 

<!DOCTYPE html>
<html lang="ko">
<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>

 

간단하게 아이디랑 비밀번호만 받아서 전송하는 HTML 파일이다.

아이디는 id 비밀번호는 password의 파라미터명을 가지고 req로 호출 할 것이다.

 

var express = require('express')
    ,http = require('http')
    ,path = require('path');

//bodyParser 모듈
var bodyParser = require('body-parser')
    ,static = require('serve-static');

var app = express();

//포트 속성으로 설정
app.set('port', process.env.PORT || 3000);

//주소를 파싱함  application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false}));

app.use(bodyParser.json());

//static으로 폴더를 미리 지정
app.use(express.static('public'));

app.use(function(req,res,next){
    console.log('첫 번째 미들웨어에서 요청을 실행');
    
    //요청 받은 값을 일단 변수에 넣음
    var paramId = req.query.id || req.body.id;
    var paramPassword = req.query.password || req.body.password;
    
    res.writeHead('200', {'Content-Type' : 'text/html; charset=utf8'});
    res.write('<h1>Express에서 응답한 결과입니다.</h1>');
    res.write('<h1>ParamID : '+ paramId +'</h1>');
    res.write('<h1>ParamPASSWORD : '+ paramPassword +'</h1>');
    res.end();
});

http.createServer(app).listen(app.get('port'), function(){
    console.log('start to server');
})

 

코드가 조금 길어졌는데 서버에서 HTML에서 보낸 파라미터를 받아서 그것을 표출하여 보여주는 방식으로 만들었다.

bodyParser를 통해 파싱을 한후 static을 통해 폴더 public을 지정하여 주소가 조금 더 간략화 된다.

 

 

일단 이런 식으로 폼이 만들어지고 주소를 보면 localhost:3000/login.html로 바로 실행 시킨 것을 알 수 있다. 원래 서버 위치는 public 이지만 위의 코드에서 미리 지정을 해주어 /login.html 만으로 집입이 가능하다.

 

 

아이디 자리에는 test011를 비밀번호 자리에는 1234를 입력하고 전송을 누르니 위의 주소를 보면 public은 생략되고 바로 login.html로 넘어왔다는 것을 확인할 수 있다.

 

라우터 미들웨어 사용하기

이번에는 라우팅을 이용해 볼 것이다. app.use와 다르게 요청 url을 일일이 확인해야하는 필요가 없는 미들웨어이다. 책에는 명확한 설명이 없어서 스스로 이해하기로 했다.

 

var express = require('express')
    ,http = require('http')
    ,path = require('path');

//bodyParser 모듈
var bodyParser = require('body-parser')
    ,static = require('serve-static');

var app = express();

//포트 속성으로 설정
app.set('port', process.env.PORT || 3000);

//주소를 파싱함  application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false}));

app.use(bodyParser.json());

//static으로 폴더를 미리 지정
app.use(express.static('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('<h1>ParamID : '+ paramId +'</h1>');
    res.write('<h1>ParamPASSWORD : '+ paramPassword +'</h1>');
    res.end();
});

app.use('/' , router);

http.createServer(app).listen(app.get('port'), function(){
    console.log('start to server');
})

 

위의 코드와 다른 점이라면 app.use대신 router.route를 썼고 route내에는 하나의 경로가 있다. 저 경로를 통해서 HTML의 form과 이어준다.

 

<form method = "post" action ="/process/login">

 

이렇게 form 부분의 action을 이어주면 된다. 그리고 실행을 해보면

 

 

아까와 동일한 결과가 나온다.

 

URL 파라미터 사용하기

이번에는 URL 뒤에 ?를 붙여 파라미터를 추가한 것을 활용하여 주소의 일부분으로 활용해 볼 것이다.

 

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('<h1><p>ParamID : '+ paramName +'</p></h1>');
    res.write('<h1><p>ParamID : '+ paramId +'</p></h1>');
    res.write('<h1><p>ParamPASSWORD : '+ paramPassword +'</p></h1>');
    res.write("<br><br><a href='/public/login3.html'>로그인 페이지로 돌아가기</a>");
    res.end();
});

 

위 코드의 route에서 주소 부분을 /process/login/:name으로 바꿔주고 파라미터를 대신 받는 paramName을 추가 해주고 거기에 주소에서 받을 req.params.name을 넣어주었다.

 

<form method = "post" action ="/process/login/kindload">

 

form 부분을 이렇게 만들어주면 kindload라는 글자가 :name에 대입되어서 서버에서 실행이 된다.

 

 

이렇게 따로 HTML에서 Name을 입력할 필요 없이 주소의 kindload가 자동으로 파라미터로 들어간다.

 

이때 :name과 같은 부분을 토큰이라고 부르기도 한다.

 

'공부 > Node.js' 카테고리의 다른 글

[Node.js] express로 웹 서버 만들기(multer미들웨어, 이미지 업로드)  (0) 2020.08.10
[Node.js] express로 웹 서버 만들기 (쿠키와 세션)  (0) 2020.08.10
[Node.js] express로 웹 서버 만들기(요청 객체와 응답 객체)  (0) 2020.08.07
[Node.js] express로 웹 서버 만들기(use() 미들웨어)  (0) 2020.08.07
[Node.js] 몽구스(Mongoose)  (0) 2020.07.28

'공부/Node.js' Related Articles

티스토리툴바