Express - from { body-parse }

현재 admin/products 경로는 이 상태이다

작성하기 버튼의 경로는 /admin/products/write인데 라우팅을 해주지 않았으므로 추가 라우팅을 만들어준다

//routes/admin.js

router.get('/products/write' , (req, res) => {
    res.render('admin/write.html');
})

다시 작성하기 누르면 "template not found: admin/write.html" 이라고 뜬다 현재 페이지가 없다는 뜻

template > admin > write.html를 만들고 아래 코드를 write.html에 작성한다

{% set title = "제품 등록" %}
{% extends "layout/base.html" %}
 
{% block content -%}
    <form action="" method="post">
        <table class="table table-bordered">
            <tr>
                <th>제품명</th>
                <td><input type="text" name="name" class="form-control"/></td>
            </tr>
            <tr>
                <th>가격</th>
                <td><input type="text" name="price" class="form-control"/></td>
            </tr>
            <tr>
                <th>설명</th>
                <td><input type="text" name="description" class="form-control"/></td>
            </tr>
        </table>
        <button class="btn btn-primary">작성하기</button>
    </form>

{% endblock %}

아래처럼 뜨게된다

이제 제품명, 가격, 설명 등 데이터를 받아서 처리해야한다

form에 대충 내용을 넣은 뒤 작성하기를 누르면 Cannot POST가 뜨게된다

form에서 받아온 데이터를 데이터베이스에 넣어야하기도하고 저장해야하는데 그런 역할을 하는 기능이 body-parse 라고한다

body-parse도 미들웨어에 포함된다

그동안 뭔가 기능을 불러올 땐 npm 기능을 사용해서 가져왔지만 body-parse는 Express의 내장 모듈이기 때문에 따로 불러올 필요가 없다

app.js 최상단에 추가

const bodyParser = require('body-parser');

미들웨어 설정

주석처리한 미들웨어 셋팅에 넣어주었다 아래 두줄의 코드를 넣어주면 body-parse 셋팅은 끝나게된다

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : false}));

이제 request의 body부분을 사용할 수 있게 되었다 미들웨어 셋팅은 했으니 작성하기 버튼을 눌렀을 때 데이터가 넘어오는 POST 셋팅을 해준다

routes > admin.js에 router를 만들어준다 이때 그동안 get 요청을 했지만 새롭게 post로 만들게된다

router.post("/products/write", (req, res) => {
  res.send("test");
});

아래 이미지처럼 제품명 테스트라는 문구를 어떤 변수를 받는지 코드를 살펴보면 write.html에서 input 쪽에 name으로 받고있는걸

확인할 수 있다

admin.js에서 body.name으로 작성하고 값을 넘겨받아보자

router.post("/products/write", (req, res) => {
  res.send(req.body.name);
});

마찬가지로 가격을 받고 싶으면 write.html에 name=price로 되어있으니 price를 이용한다

router.post("/products/write", (req, res) => {
  res.send(req.body.price);
});

특정 데이터가 아닌 전체 데이터를 받고 싶을 땐 req.body만 작성한다

router.post("/products/write", (req, res) => {
  res.send(req.body);
});

현재 request에 body를 입력한 상태로 request에 변수가 하나 추가된 상태이다

만약 body-parse를 만드려고 한다면 이런 느낌으로 아래 코드처럼 입력한다

app.js // 미들웨어 셋팅

app.use( (req, res, next) => {
  req.body = {

  }
});

현재 우리가 get 과 post를 직접 작성해서 URL을 호출했지만 실제 작업할 땐 REST API를 이용하게된다

여러 개발자들이 있고 같이 협업해서 프로젝트를 진행하고자 하는데 통신하는 URL 같은 경우는 협약이 되어있다면 좀 더 작업하는데 수월할 것이다 이때 REST API를 이용하며 아래 내용처럼 알아들을 수 있게 작성한다

GET /users => 사용자정보
POST /users => 사용자추가
GET /users/(ID) => 한명만 볼때
PUT /users/(ID) => 한명 수정하기
DELETE /users/ID => 삭제