Node.js를 활용한 Form 데이터 처리하기 💻

작성: 2025년 01월 29일읽기: 약 3분

웹 개발을 배우는 여러분, 안녕하세요! 오늘은 Node.js를 사용하여 웹 폼(form)에서 데이터를 어떻게 처리하는지 알아볼 거예요. 웹 개발에서 폼 데이터 처리는 매우 중요한데요, 사용자가 입력한 정보를 서버로 전송하고 그 정보를 활용하는 방법을 배워보겠습니다.

폼 데이터란?

간단히 말해서, 폼 데이터는 사용자가 웹 폼에 입력하는 정보입니다. 예를 들어, 로그인 폼에서 사용자 이름과 비밀번호, 혹은 설문 조사에서 여러분의 의견을 입력하는 경우가 이에 해당돼요.

Node.js로 폼 데이터 처리하기

Node.js를 사용하여 폼 데이터를 처리하는 과정은 생각보다 간단합니다. 여기서는 express라는 Node.js 프레임워크를 사용할 건데요, 이를 통해 우리는 서버를 쉽게 구축하고 폼 데이터를 처리할 수 있습니다.

1단계: Express 설치하기

먼저, 프로젝트 폴더를 만들고, 그 안에서 다음 명령어를 실행하여 express를 설치해주세요.

npm init -y
npm install express

2단계: 서버 구축하기

다음은 간단한 서버를 구축하는 코드 예시입니다. index.js 파일을 만들고 아래 코드를 입력해주세요.

const express = require('express');
const app = express();
const PORT = 3000;

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

app.post('/submit-form', (req, res) => {
  const { name, email } = req.body;
  console.log(`Name: ${name}, Email: ${email}`);
  res.send('폼 데이터가 성공적으로 처리되었습니다.');
});

app.listen(PORT, () => {
  console.log(`서버가 ${PORT}번 포트에서 실행 중입니다.`);
});

이 코드는 사용자가 /submit-form 경로로 폼 데이터를 전송할 때, 그 데이터를 서버 콘솔에 출력하고 사용자에게 성공 메시지를 보내는 간단한 예시입니다.

3단계: 폼 만들기

이제 사용자가 데이터를 입력할 수 있는 간단한 HTML 폼을 만들어봅시다. index.html 파일을 생성하고 아래 코드를 입력해주세요.

<!DOCTYPE html>
<html>
<head>
    <title>Node.js 폼 예제</title>
</head>
<body>
    <form action="http://localhost:3000/submit-form" method="POST">
        <input type="text" name="name" placeholder="이름" required>
        <input type="email" name="email" placeholder="이메일" required>
        <button type="submit">제출하기</button>
    </form>
</body>
</html>

4단계: 테스트하기

모든 설정이 완료되었다면, 서버를 실행하고 폼을 통해 데이터를 전송해 보세요. 서버 콘솔에서 사용자가 입력한 이름과 이메일이 출력되는 것을 확인할 수 있을 거예요.

node index.js

이제 여러분은 Node.js와 Express를 사용하여 웹 폼에서 데이터를 처리하는 방법을 알게 되었습니다. 사용자로부터 정보를 받아 처리하는 웹 애플리케이션을 만들 때 이 방법을 활용해보세요!