express.urlencoded()에 대한 간단한 조사

코딩을 하면서 express.urlencoded()를 가장 자주 쓰이게 되는 코드는 아래의 코드이다.

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

app.use(express.urlencoded({ extended: false }))는 Express 애프리케이션에서 application/x-www-form-urlencoded 형식의 데이터를 파싱하는 미들웨어이다.

이 구문을 통해 클라이언트가 보낸 URL-encoded 데이터(HTML 폼을 통해 제출된 데이터)를 Express 애플리케이션이 처리할 수 있도록 설정합니다.

구체적으로 설명해보자면 

• express.urlencoded()는 URL-encoded 데이터를 파싱해서 req.body 객체에 추가해줍니다.
  URL-encoded 데이터는 일반적으로 웹 폼을 통해 전송된 데이터입니다.
• extended: false는 URL-encoded 데이터를 파싱할 때 querystring 라이브러리를 사용하겠다는 의미입니다.
  이 라이브러리는 비교적 단순한 key-value 쌍을 처리할 수 있습니다.
• extended: true로 설정할 경우 qs 라이브러리가 사용되며, 이 라이브러리는 중첩된 객체나 배열 같은 복잡한 구조의 데이터도 처리할 수 있습니다.

따라서, express.urlencoded({ extended: false }) 이 설정은 간단한 URL-encoded 데이터를 처리할 때 적합하며, 복잡한 데이터 구조가 필요하지 않을 경우 사용됩니다.

위의 말로는 이해가 안간다 따라서 예시를 찾아봤습니다.

HTML 폼을 통해 데이터를 전송하고, Express에서 express.urlencoded()를 사용해 이 데이터를 처리하는 예시입니다.

1. 서버 코드 (Express)

import express from 'express';
import { createServer } from 'http';

const app = express();
const server = createServer(app);

const PORT = 3000;

// 미들웨어 설정
app.use(express.urlencoded({ extended: false }));

// HTML 폼 페이지 제공
app.get('/', (req, res) => {
  res.send(`
    <form action="/submit" method="POST">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <label for="age">Age:</label>
      <input type="text" id="age" name="age">
      <button type="submit">Submit</button>
    </form>
  `);
});

// POST 요청 처리
app.post('/submit', (req, res) => {
  const { name, age } = req.body; // req.body에서 폼 데이터 추출
  res.send(`Name: ${name}, Age: ${age}`);
});

// 서버 실행
server.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

2. HTML 폼 설명

위의 코드에서 / 경로로 접근하면 간단한 HTML 폼이 표시됩니다. 사용자가 이름과 나이를 입력하고 폼을 제출하면, 서버가 POST /submit 요청을 받아 데이터를 처리합니다.

 

동작 과정

1. 사용자가 브라우저에서 Name과 Age 필드를 입력하고 제출 버튼을 클릭합니다.
2. 폼은 POST 요청으로 데이터를 서버에 보냅니다.
3. 서버는 express.urlencoded({ extended: false}) 미들웨어를 통해 전송된 데이터를 파싱하여 req.body에 저장합니다.
4. 객체 분해 할당을 통해 폼 데이터를 가져오고, 서버는 그 데이터를 클라이언트에게 응답으로 반환합니다.