[2019.04.24] API 통신 방식 -express

 

express방식을 이용하면 http 방식보다 조금 더 편리하고 강력하게 서버 기능을 구현할 수 있다.

확실히 express 방식으로 구현하니까 소스코드가 엄청나게 줄어들었다.

 

# 통신을 위한 틀

var express = require('express');
const cors = require('cors');
var app = express();

app.use(cors());

app.use(express.json());

app.get('/getTest', function(req,res){
   res.send(JSON.stringify({a:'pass1'}))
})

app.post('/postTest', function(req,res){
  console.log('---->',req.body);

  res.send(JSON.stringify({b:'pass2'}));
})

app.listen(3000);

 

express로 구현하기 위해서 express 모듈과 보완 관련 cors를 설치한다. 

url이 'getTest'인 get방식으로 요청이 올 때와, url 'postTest' 방식으로 요청이 올 때의 데이터 처리 함수가 구현되어 있다. 

 

 

그리고 post부분에, 클라이언트에게서 데이터를 가져오는 방식이 requrest.body 이다.

이것은 app.use(express.json());을 선언해 줘야만, 위처럼 쉽게 클라이언트의 요청 데이터를 가져올 수 있다. (원래는 저렇게 request.body로 데이터를 가져오기 위해서는 body-parser라는 모듈을 사용했었는데, 이제는 express에 내장이 되었나보다.)

 

# 라우터와 미들웨어

 

라우터는 서버에서 기본적으로 데이터 통신에 기본적인 기능을 하는 녀석, 평소 http에서 했던 것처럼 클라이언트에게 데이터를 받으면 처리를 하고 응답을 해주는 부분.

 

미들웨어란 중간에 끼어들어서 일을 하는 녀석이다. 클라이언트에게서 요청이 오면 라우터로 가기 전에 미들웨어를 먼저 거치게 된다. 

 

미들웨어 사용 방식

app.use('/PostTest',function(req, res, next) {
  console.log('1', req.body);
  next();
});

app.get('/PostTest', function(req,res){
   console.log('2', req.body);
   res.send(JSON.stringify({a:'pass1'}))
})

 

첫번째 줄의 app.use 함수 부분이 미들웨어라고 할 수 있다. 클라이언트가 '/PostTest'로 url을 요청하면, app.get으로 가는게 아니라 app.use로 먼저 가게 된다. 

미들웨어에서 처리를 완료하면 next()함수를 호출하여 라우터로 이동한다.

미들웨어에서 받는 요청은 get,post를 구분하지 않으니, url로 잘 구분해 줘야한다.

 

경로가 없는 미들웨어

app.use(function(req, res, next){
  console.log(req.body);
  next();
});

 

위처럼 url 경로가 없는 미들웨어는, 클라이언트가 요청하면 무조건 호출되는 함수로 사용한다.

 

# 라우터와 미들웨어를 구분하여 구현하자

같은 파일에 라우터와 미들웨어 부분을 같이 구현해도 상관은 없지만, 왠만하면 따로 분리를 하여 구현하는게 좋다고 한다.

라우터 부분

var express = require('express');
const cors = require('cors');
var app = express();

app.use(cors());
app.use(express.json());



app.get('/getTest', function(req,res){
   res.send(JSON.stringify({a:'pass1'}))
})

app.use('/postTest', require('./middleware').postTest);
app.post('/postTest', function(req,res){

  res.send(JSON.stringify({b:'pass2'}));
})

app.listen(3000);

 

미들웨어 부분

var postTest = function(req, res, next) {
  console.log('1',req.body);
  next();
}

exports.postTest = postTest;

 

위처럼 분리하면 될 것 같다. 분리하는 방법은 여러가지 있다.

 

 

# 작업하면서 생겼던 이슈사항

 

클라이언트에게 요청은 왔는데, 데이터가 계속 안들어 가지는 문제

function test(){
  fetch('http://localhost:3000/postTest',{
    method: 'POST',
    body: JSON.stringify({a:1,b:2}),
    headers: {
      'content-type': 'application/json'
    }
  })
  .then(res=> res.json())
  .then(json=>{
    console.log(json);
  })
}

 

우선 클라이언트가 요청하는 부분이다. 근데 중간에 headers 부분을 'content-type' : 'applicaton/json'으로 안하고 'text/..' 어쩌고로 했다가 통신만 되고 데이터는 가지 않아서 골치였다....

 

데이터를 보낼 때는, 꼭 stringify()!!!

서버든 클라이언트는, 데이터를 보낼때는 꼭 stringify 작업을 해주고 보내자! stringify를 안해주고 보내면 계속 받는 곳에서 파싱 에러가 난다...

 

url과 경로를 헷갈리지 말자...

계속 url 쓰는 부분에 '/' 를 써야하는 것을 './' 를 쓴다.....-.-;;; 경로랑 헷갈리지 말자!

---

Github Repo - mini Express Server

https://github.com/inyong-e/mini-ExpressServer

inyong-e/mini-ExpressServer