Express

Express 설치

mkdir express-tutorial
cd express-tutorial
npm init
npm install --save express

Express 서버 만들기

main.js생성

// main.js
var express = require('express');
var app = express();

app.get('/', function(req, res) {
    res.send('Hello World');
});

app.listen(3000, function() {
    console.log('Example App listening on port 3000');
});

기본 라우팅

app.METHOD(PATH, HANDLER)
METHOD: HTTP 요청 메소드 - get, post, delete, put …
PATH: 라우트 경로
HANDLER: 실행 될 콜백 함수

더 많은 라우팅

// main.js
app.get('/user/:id', function(req, res) {
    res.send('Received a GET request, param:' + req.params.id);
});

app.post('/user', function(req, res) {
    res.json({ success: true })
});

app.put('/user', function(req, res) {
    res.status(400).json({ message: 'Hey, you. Bad Request!' });
});

app.delete('/user', function(req, res) {
    res.send('Received a DELETE request');
});

터미널에서 node main.js로 서버를 엽니다.

localhost:3000으로 접속합니다.

get 메서드 말고는 웹상에서 확인 할 수 없으니

api테스팅 도구로 postman을 사용해서 잘 되는지 실험해봅니다.

user 라우트 모듈화해서 내보내기

routes/user.js생성

// routes/user.js
var express = require('express');
var router = express.Router();

router.get('/:id', function(req, res) {
    res.send('Received a GET request, param:' + req.params.id);
});

router.post('/', function(req, res) {
    res.json({ success: true });
});

router.put('/', function(req, res) {
    res.status(400).json({ message: 'Hey, you. Bad Request!' });
});

router.delete('/', function(req, res) {
    res.send('Received a DELETE request');
});

module.exports = router;

main.js 불러와서 사용하기

// main.js
var express = require('express');
var app = express();
var user = require('./routes/user') 
// 모듈화를 통하여
// 한 파일이 너무 커지는걸 방지, 코드를 나눔으로써 가독성과 유지보수도 편하게 하기 위함.

app.get('/', function(req, res){  // 요청, 응답
    res.send('Hello World');
});

app.use('/user', user); // /user 여기로 요청이 들어오면 user로 연결시켜줌.

app.listen('3000', function(){
    console.log('Example App is listening on port 3000');
});

Express 미들웨어

정의

미들웨어 함수는 요청 오브젝트 (req), 응답 오브젝트 (res),

그리고 애플리케이션의 요청-응답 주기 중

그 다음의 미들웨어 함수 대한 액세스 권한을 갖는 함수입니다.

흐름

지금까진 HTTP요청이 들어오면 그에따른 라우트 작업을 하여 HTTP응답을 했습니다.

미들웨어는 이 중간에 들어가는 작업입니다.

middleware

이를 통해 express 자체에 있지 않은 기능을 우리가 직접 구현할 수 있습니다.

또한 다른사람이 만들어 놓은 미들웨어를 사용할 수도 있습니다.

일종의 plugin 이라고 생각하면 됩니다.

미들웨어도 콜백함수입니다. 한번 만들어 볼까요?

미들웨어 직접 만들어 보기

// main.js
var myLogger = function (req, res, next) {
  console.log(req.url);
  next();
};

app.use(myLogger); // 이렇게 함수를 만들어서 app.use에 넣어주면 됩니다.

// req가 들어왔을때 다른걸 처리하기 전에 myLogger함수가 실행되어서
// 처리할 작업 console.log(req.url); 을 하고
// 인자로 받은 next 콜백함수를 실행하면 다른 미들웨어를 실행하거나
// 아니면 라우팅 작업을 실행하는 것입니다!

서버 재시작후 postman으로 send 해보면 터미널에 url이 표시되는걸 확인 할 수 있습니다.

npm으로 이미 만들어진 미들웨어 설치

npm install --save morgan body-parser

morgan: 로깅 미들웨어
body-parser: JSON 형태 데이터 파싱

tip

npm repo morgan

이렇게 하면 방금 설치한 npm모듈의 github-page를 확인하려면 이렇게 하면 됩니다.

레포를 보고 뭘 쓸건지 찾아서 main.js에 넣어줍시다!

우리가 만들었던 쓸모없는 미들웨어인 myLogger는 지워줍니다.

// main.js
var morgan = require('morgan');

app.use(morgan('dev'))

서버를 재시작하고 postman으로 send 해보면 터미널에 더 상세한 로깅이 보여집니다.

그 다음 미들웨어 모듈도 불러옵니다.

// main.js
var bodyParser = require('body-parser');

app.use(bodyParser.json());

JSON 파싱하기

// routes/user.js
router.post('/user', function(req, res) {
    console.log(JSON.stringify(req.body, null, 2)); 
    // null, 2는 깔끔하게 프린트하기 위해서 옵션추가 한 것.
    res.json({ 
        success: true,
        // body에서 특정값을 불러올 때
        user: req.body.username
        // body에서 username 키를 받아와서 나타내 줄 것입니다. 
    });
});
// 이렇게 변경해줍니다. body-parser를 적용했기 때문에
// req.body를 접근하면 우리가 post한 json형태의 body를 사용할 수 있게 됩니다.

계속 바꿀때 마다 서버를 껏다 재시작하기 번거로우므로 nodemon을 설치하겠습니다.

npm install -g nodemon // 설치 후
nodemon main.js 

이렇게 실행해주면 되겠습니다.

띄어쓰기등 아무거나 수정을 가한다음 저장하면 알아서 재시작 해주는 것을 알 수 있습니다.

정적 (static) 파일 제공

html, image, css, javascript 등

이런 파일들을 브라우저에서 접근할 수 있도록 제공해 줍니다.

// main.js
app.use('/', express.static('public'));

코드를 추가해 줍니다.

’/’이 부분은 경로 설정이고

express.static 메서드를 사용하면

public 폴더에 있는 파일들을 접근할 수 있도록 해줍니다.

그럼 public폴더를 만들고 html의 body안에 hello world라고 작성한

index.html파일을 만들어 줍시다.

그럼 서버에서 index.html에 접근 할 수 있음을 확인할 수 있습니다.

그럼 아까 작성한

app.get('/', function(req, res){
    res.send('Hello World');
});

이 api는 어떻게 되는 걸까요?

어떤걸 먼저 쓰느냐에 따라 우선권을 갖게 됩니다.

다른 파일들도 마찬가지입니다.

이 get메서드는 필요 없으니 지워주겠습니다.

about.html 을 만들고

localhost:3000/about.html로 들어가면 확인 할 수 있습니다.

그럼 다음 편에선 express에서 MongoDB를 설치하여 사용해 보겠습니다.