Node.js를 활용한 데이터 폼 처리 방법

작성: 2024년 09월 15일읽기: 약 3분

웹 개발에 있어서 사용자로부터 정보를 받는 것은 매우 중요합니다. 이번에는 Node.js를 사용하여 어떻게 간단하게 데이터 폼을 처리할 수 있는지 알아보겠습니다. 복잡한 기술 용어는 최대한 배제하고, 쉽게 설명하도록 하겠습니다.

폼 데이터란 무엇인가요?

웹사이트에서 사용자가 입력하는 정보를 말합니다. 예를 들어, 회원가입, 로그인, 설문 조사 등에서 사용자가 입력하는 모든 정보가 폼 데이터에 해당됩니다.

Node.js에서 폼 데이터를 처리하는 방법

Node.js에서 폼 데이터를 처리하기 위해 가장 먼저 해야 할 일은 사용자로부터 데이터를 받는 것입니다. 이를 위해 express라는 라이브러리를 사용할 것입니다. express는 Node.js에서 웹 애플리케이션을 구축할 때 많이 사용되는 프레임워크입니다.

1단계: Express 설치

먼저, 프로젝트 폴더를 생성하고, 그 안에서 다음 명령어를 실행하여 express를 설치합니다.

npm init -y
npm install express

2단계: 서버 설정

이제 간단한 서버를 설정해보겠습니다. 프로젝트 폴더 안에 app.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}번 포트에서 실행중입니다.`);
});

이 코드는 사용자로부터 이름과 이메일을 받아서 콘솔에 출력하고, 사용자에게 성공 메시지를 보내는 간단한 서버를 설정합니다.

3단계: 폼 생성

사용자로부터 데이터를 받기 위해서는 HTML 폼이 필요합니다. 예를 들어, 다음과 같은 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>

이 HTML 파일을 웹 브라우저에서 열고, 폼을 제출하면, Node.js 서버가 실행되고 있는 콘솔에서 사용자가 입력한 이름과 이메일을 볼 수 있습니다.

결론

Node.js와 Express를 사용하여 간단하게 웹 폼 데이터를 처리하는 방법을 알아보았습니다. 이 기본적인 예제를 바탕으로, 더 복잡한 데이터 처리 로직을 구현할 수 있습니다. 웹 개발에 있어서 사용자로부터 정보를 수집하고 처리하는 것은 매우 중요하므로, 이번 학습이 도움이 되었기를 바랍니다.