[Node.js] 비동기데이터 처리를 위한 폼 태그 API 이해

폼 태그에서 받아온 정보를 DB에서 수정해보자

우선 프론트에서 폼을 다룰 때 name을 지우면 안된다. 

<input type="text" class="form-control" name="name" id="name" placeholder="이름을 입력하세요.">

name이랑 id의 차이가 없는 것 같아서 둘 중 하나를 지우고 싶었다. 서버에서 폼을 인식할 떄는 name 속성을 이용하므로 name을 냄겨두도록 하자.

 

HTML <form/> 은 GET, POST만 가능하다.

정보 수정 페이지 폼에서 버튼 클릭과 동시에 정보를 서버에 보내려면 PUT, DELETE 요청은 어떻게 사용해야할까?

1. AJAX (Asynchronouss Javascript And XML)

XMLHttpRequest라는 HTTP 요청을 만들어 요청 방식과 넘겨줄 정보를 지정하는 비동기 통신 방법을 말한다.

// xhr 객체를 만들고 open 함수를 이용해 form POST to PUT/DELETE
document
  .getElementById('add-user')
  .addEventListener('submit', function (event) {
    // 링크 이동 방지
    event.preventDefault();

    let data = {
      name: nameInput.value,
      email: emailInput.value,
      userId: userIdInput.value,
    };

    // transfer POST to PUT using AJAX from existing HTTP request
    const xhr = new XMLHttpRequest();
    xhr.open('PUT', 'localhost:3000/:userId', true);
    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.onreadystatechange = function () {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          console.log('Edit User Detail Successfully :', xhr.responseText);
        } else {
          console.log('Fail to edit user detail info: ', xhr.status);
        }
      }
    };
    xhr.send(JSON.stringify(data));
  });

 

2. 미들웨어

method-override라는 미들웨어는 이름부터 직관적으로 method를 재정의하겠다는 의지가 잘 보인다. 

상속에서 메서드 재정의할 때 그 override와 동일하다. 

- override: 덮어씌우다.

 

UI를 이용하기 위한 app.js 설정

app.js에 로그인 화면 하나를 만든다면 db를 연결하고, 폼 method를 오버라이딩할 미들웨어 method-override를 등록한다.

app.js가 실행될때 화면에 출력될 뷰를 불러오기 위해 app.set으로 템플릿 파일의 형식과 위치를 지정한다.

아래 코드는 views/ 폴더 밑으로 있는 .vue 파일을 불러오겠다고 지정한 것이다.

이후 app.use로 /public 밑에 있는 정적인 파일 (js, css)을 /views에 있는 것처럼 사용하기 위해 로드한다. 

• login.vue에서 css를 <link rel="stylesheet" href="/css/style.css">로 접근할 수 있다.

가상 경로로 파일 구분을 명확하게 해줄 수도 있다. 

login.vue에서는 <link rel="stylesheet" href="static/css/style.css> 로 링크하고

app.js에서는 app.use("/static", express.static("public"); 으로 지정한다. 

 

const express = require("express");
const dbConnect = require("./config/dbConnect");
const methodOverride = require("method-override");

const port = 3000;

const app = express();

// setting view engine 
// template file *동적인 콘텐츠 위치 인식
app.set("view engine", "vue");
app.set("views", "./views");

// 정적 파일: css, js 등
app.use(express.static("./public");
// header, putter과 같은 반복 컴포넌트
app.use(methodOverride("_method");

dbConnect();
...

그리고 login.vue html form 태그에 ?_method=PUT으로 변경한다. 

---

폼 데이터를 처리하려면 express.urlencoded 미들웨어 함수 이해가 필요하다. 

URL 인코딩: 인터넷에서 서버로 전송하는 내용을 모두 아스키 코드로 전환하는 과정

"영어만 문자냐" 를 URL 인코딩하면 "%ec%98%81%ec%96%b4%eb%a7%8c+%eb%ac%b8%ec%9e%90%eb%83%90" 가 된다. 

 

폼에 있는 데이터도 서버로 전송될 때 인코딩된 URL 형식을 이용하기 때문에 다시 해석가능한 값으로 변환해주는 과정을 파싱parsing이라 한다.  앞서 말한 express.urlencoded 함수가 인코딩된 URL을 파싱해주고, 파싱된 자료는 req.body에 저장된다.

// req.body에 담긴 정보를 화면에 표시하는 예제
const express = require("express");

const app = express();

// urlencoded 미들웨어 등록, extended: true 파싱하는 모듈(express qs) 선택
app.use(express.urlencoded({extended: true});

// 파싱 데이터 사용
app.post("/login", (req, res)=>{
	const username = req.body.username;
    const password = req.body.password;
    
    res.send(`입력 정보: ${username} - ${password}`);
 });
 
 app.listen(3000, ()=>{
 	console.log("server is running at port 3000");
 });

• express.urlencoded({extended: true})
  • module: express qs
  • 복잡한 객체나 배열까지 파싱
  • {extended: false} : module: node.js querystring 
  • 간단한 문자열이나 단순 배열 파싱