[node.js] Front에서 Back으로 데이터 전송

front의 form으로 back에게 데이터 보내기

• form 
• XMLHttpRequest
• Jquery
• Fetch()

📌 users.ejs에 form 추가 

 

📍form

• action : 보내고자 하는 주소 값
• method: 보내는 method 설정(get, post 만 가능)
• input의 name 속성은 서버에서 받을 때 필드 값이 됨 
• 버튼 type으로 submit을 하면 해당 폼의 내용을 지정한 방식 + 주소로 전달 

<form action="/users" method="POST">
    <div>
      <label>아이디</label>
      <input type="text" name="id" />
    </div>
    <div>
      <label>이름</label>
      <input type="text" name="name" />
    </div>
    <div>
      <label>이메일</label>
      <input type="email" name="email" />
    </div>
    <button type="submit">Submit</button>
  </form>

 

✅ body-parser 모듈 사용 

: form에서 전송 된, 정보를 req.body에 담에서 obj로 전달해주는 역할 

 

body-parser를 사용하지 않으면 아래와 같은 코드로 데이터를 body에 넣은 다음,

인코딩처리까지 해줘야함 (body-parser는 자동으로 처리해줌)

req.on('data', function(chunk) { body += chunk; });

 

✔️ body-parser 설치 및 사용

npm install body-parser --save

body-parser는 실제로 프로젝트를 배포한 상태에서도 서버 통신에 사용되므로 

--save-dev가 아닌 --save 옵션으로 설치해야 함 

// app.js

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

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

json()은 json형태로 데이터를 전달한다는 의미 

urlencoded(url-encoded) 옵션은 url처럼 데이터를 변환하면 

localhost:4000/posts?title=title&content=content 해당 데이터를 json 형태 { “title”: “title, “content”: “content” } 라고 전달함

 

📍 extended: false

• query로 들어온 문자열을 
  • true: 외부 모듈인 qs 모듈로 처리(qs 모듈 설치 필요, npm i qs)
  • false: express 내장 모듈인 queryString 모듈로 처리 
• false 옵션은 중첩된 객체 허용 X

 

✔️ body-parser, express의 기본 기능으로 추가 됨 

// app.js

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

단, express 4.16 이상에서만 지원함 

 

📌 XMLHttpRequest

• 1999년 클라이언트에서 서버 측 데이터를 받기 위해 탄생
• 옛날 방식 -> 최신 기능인 promise 등을 기본으로 내장하지 못하고 있기 때문에 서버 통신을 동기적으로 처리 하려면 콜백 함수를 제외하면, promise를 따로 사용해야 하는 불편함 존재 
• ES6 문법이 등장하기 전 까지는 주로 JQuery를 통해 통신함

<script>
  function deleteUser(id) {
    const xhr = new XMLHttpRequest();
    xhr.open('DELETE', `http://localhost:4000/users/${id}`);
    xhr.responseType = 'json';
    xhr.onload = () => {
      console.log(xhr.response);
      location.reload();
    };
    xhr.send();
  }
</script>

 

📌 JQuery

: JavaScript 라이브러리

2006년 등장하여 편리한 DOM 기능, 데이터 통신 등 다양한 분야에서 사용

JQuery 의 기능들이 JS 에 기본 내장 되면서 점차 사용이 줄어드는 추세

<script>
  function deleteUser(id) {
    console.log(`http://localhost:4000/users/${id}`);
    $.post(`http://localhost:4000/users/${id}`, function (res) {
      console.log(res);
      location.reload();
    }).done(function (data) {
      console.log(data);
    }).fail(function (err) {
      console.log(err);
    })
  }
</script>

 

📌 Fetch 

브라우저에서 서버 사이트 통신을 위해 2015년 ES6에서 추가된 기능 

기존의 XMLHttpRequest의 문제점을 개선하고 Promise를 기본으로 내장하여 서버 통신 코드를 벡엔드 코드와 비슷하게 짤 수 있음 

<script>
  function deleteUser(id) {
    fetch(`http://localhost:4000/users/${id}`, {
      method: 'delete',
      headers: {
        'Content-type': 'application/json'
      },
    }).then((res) => {
      console.log(res);
      location.reload();
    })
  }
</script>

 

✔️ Fetch를 이용하여 삭제 기능 구현 

삭제 기능 자체는 이미 back-end api에 잘 구현되어 있으므로 

front에서는 fetch를 이용하여 back-end에 요청만 잘 보내면 됨

 

li 요소에 삭제 버튼 추가 후 

<a> tag에 onclick으로 삭제 함수 연결 -> 해당 함수에서 fetch로 삭제 api 요청

<ul>
    <% if(userCounts> 0) { %>
      <% for(let i=0; i < userCounts; i++) { %>
        <li>
          <p>ID: <%= USER[i].id %>
          </p>
          <p>이름: <%= USER[i].name %>
          </p>
          <p>email: <%= USER[i].email %>
          </p>
          <!-- 삭제 할 user.id 값 매개변수로 전달 -->
          <a href="" onclick="deleteUser('<%= USER[i].id %>');">삭제</a>
        </li>
        <% } %>
     <% } else { %>
        <li>
          회원 정보가 없습니다!
        </li>
     <% } %>
  </ul>

 

📍 deleteUser() 함수 구현 

fetch의 주소로는 매개 변수로 받은 id값 넣어서 전달 

전달 값으로는 method, headers를 전달 (데이터 전달이 필요하면 body에 담아서 전달)

통신이 완료되면 then으로 받음

function deleteUser(id) {
    fetch(`http://localhost:4000/users/${id}`, {
      method: 'delete',
      headers: {
        'Content-type': 'application/json'
      },
    }).then((res) => {
      console.log(res);
      location.reload();
    })
  }