Node.js로 Form 데이터 다루기 🖥️

작성: 2025년 07월 13일읽기: 약 3분

웹 개발을 배우는 여러분, 안녕하세요! 오늘은 Node.js를 사용하여 웹 폼(form) 데이터를 어떻게 다루는지 알아볼 거예요. 웹 개발에서 폼 데이터를 다루는 것은 매우 중요한데요, 이를 통해 사용자로부터 정보를 수집하고, 그 정보를 서버로 보낼 수 있기 때문이죠.

폼 데이터란?

웹 폼은 사용자가 데이터를 입력할 수 있는 HTML 태그의 집합입니다. 예를 들어, 로그인 폼에는 사용자 이름과 비밀번호를 입력하는 필드가 있죠. 사용자가 이 정보를 입력하고 제출 버튼을 클릭하면, 이 데이터는 서버로 전송됩니다.

Node.js에서 폼 데이터 처리하기

Node.js에서 폼 데이터를 처리하기 위해, 가장 먼저 해야 할 일은 서버를 설정하는 것입니다. 여기서는 express라는 인기 있는 Node.js 프레임워크를 사용할 거예요.

1단계: Express 설치

터미널을 열고, 다음 명령어를 입력하여 express를 설치합니다.

npm install express

2단계: Express 서버 설정

이제 간단한 서버를 설정해 보겠습니다. 아래 코드를 server.js 파일에 입력하세요.

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

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

app.post('/submit-form', (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  // 여기서 폼 데이터를 처리할 수 있습니다.
  console.log(`Username: ${username}, Password: ${password}`);
  res.send('폼 데이터가 성공적으로 전송되었습니다.');
});

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

3단계: 폼 만들기

서버 코드를 작성했으니, 이제 사용자가 데이터를 입력할 수 있는 간단한 HTML 폼을 만들어 보겠습니다. 아래 코드를 index.html 파일에 입력하세요.

<!DOCTYPE html>
<html>
<head>
    <title>Node.js 폼 예제</title>
</head>
<body>
    <form action="http://localhost:3000/submit-form" method="POST">
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">비밀번호:</label>
        <input type="password" id="password" name="password"><br><br>
        <input type="submit" value="제출">
    </form>
</body>
</html>

이 HTML 파일을 웹 브라우저에서 열고, 폼에 정보를 입력한 후 제출 버튼을 클릭하면, Node.js 서버가 실행되고 있는 콘솔에 사용자 이름과 비밀번호가 출력됩니다.

마무리

축하합니다! 여러분은 방금 Node.js와 Express를 사용하여 웹 폼 데이터를 처리하는 방법을 배웠습니다. 이 기술은 사용자로부터 정보를 수집하고, 그 정보를 서버로 보내는 웹 애플리케이션을 만들 때 매우 중요합니다. 이제 여러분도 이 지식을 활용하여 멋진 프로젝트를 만들어 보세요!