Express를 사용하여 유저 입력 데이터를 가져오기

developsy·2022년 7월 8일

폼에 사용자가 입력한 데이터를 내 서버에 저장하려면 어떻게 할까?

사용한 코드는 이렇다.

const express = require("express");

const app = express();

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

app.get('/currenttime', function(req, res){
  res.send("<h1>" + new Date().toISOString() + "</h1>");
});

app.get('/', function(req, res){
  res.send('<form action="/store-data" method="POST"><label>Your Name</label><input type="text" name="username"><button>submit</button></form>');
});

app.post('/store-data', function(req, res){
  const userName = req.body.username;
  res.send('<h1>Username saved</h1>');
});

app.listen(3000);

app.get('/', function(req, res){
  res.send('<form action="/store-data" method="POST"><label>Your Name</label><input type="text" name="username"><button>submit</button></form>');
});

form태그의 method 속성에는 POST를 사용하여 데이터를 내 서버에 저장하도록 했다. GET도 사용할 순 있으나 POST가 관례인 듯하다. POST를 사용하면 브라우저는 자동으로 POST HTTP요청을 현재의 URL로 보내게 되고, 이는 form의 모든 필드

<form action="/store-data" method="POST"><label>Your Name</label><input type="text" name="username"><button>submit</button></form>

를 가져와서 해당되는 요청에 대한 데이터로 추가한다.

app.post('/store-data', function(req, res){
  const userName = req.body.username;
  req.send('<h1>Username saved</h1>');
});

app에 get이 아니라 post메서드를 사용했는데, 이는 앞에서 설정한 POST 요청을 처리하는 메서드이다.

이때 요청 객체 req에 body라는 속성을 사용했는데 body를 사용하면 요청에 들어있는 데이터에 엑세스 할 수 있다. 만약 POST요청에 그 데이터가 있다면 input의 name속성의 속성값을 사용하여 추출할 수 있다. 이를 상수로 저장.

이제 주소창을 열어서 서버에 접속한 뒤 폼에 뭔가를 입력하고 제출하면

이때는
app.use(express.urlencoded({extended: false}));
가 없다고 가정

에러가 뜬다. 이는 요청 데이터를 분석(parsing)하지 않기 때문에 발생하는 문제다.

express는 주로 들어오는 요청 라우팅을 처리하는 라이브러리이기 때문에 어떤 요청이 어떤 경로로 어떤 함수에 의해 처리되어야 하는지를 정의한다. 즉 따로 뭔가를 하지 않으면 데이터를 자바스크립트 객체로 변환하지 않는다.

에러 페이지를 개발자 도구로 봐보면 보내는데 실패한 데이터를 볼 수 있는데, 자세히 보면 자바스크립트가 아님을 알 수 있다. 이는 요청에 첨부되는, 서버에서 사용하기 위해 분석해야 하는 원시 텍스트일 뿐이다.

그러므로 이 요청 데이터를 분석해야 한다. 이 방법은 꽤나 간단하다.

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

use메서드를 사용했는데, use는 get이나 post와는 다르게 들어오는 요청에 종류를 신경 쓰지 않는다. 즉 모든 요청이 대상이기 때문에 굳이 경로를 지정할 필요도 없다. 파라미터로는 express의 urlencoded메서드를 사용했는데, 이는 들어오는 모든 요청을 살펴보고 요청에 form데이터가 포함되어 있을 때 그것이 찾던 데이터라면 그것을 분석하여 자바스크립트 객체로 변환해준다.