반응형
🔧 사전 준비사항
먼저 본격적인 개발에 앞서 아래와 같은 환경이 준비되어 있어야 합니다.
- Node.js 설치됨
- Visual Studio Code 같은 코드 편집기
- 터미널 또는 명령 프롬프트 사용 가능
- 기본적인 HTML 이해
🗂 프로젝트 폴더 구조 만들기
먼저 프로젝트 디렉토리를 생성하고, 필요한 폴더 구조를 구성해 봅시다.
mkdir express-post-demo
cd express-post-demo
npm init -y
npm install express ejs
이후 폴더 구조는 다음과 같습니다:
express-post-demo/
│
├── views/
│ ├── index.ejs
│ ├── form.ejs
│ └── result.ejs
│
└── server.js
📄 EJS 파일 구성하기
이제 views 폴더에 세 개의 .ejs 파일을 작성해봅니다.
1. index.ejs – 첫 화면
<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Express Post 예제</title>
</head>
<body>
<h1>Node.js Express Post 전송 예제</h1>
<a href="/form">폼 입력하러 가기</a>
</body>
</html>
- 간단한 홈 화면입니다.
- /form 페이지로 이동할 수 있는 링크가 포함되어 있습니다.
2. form.ejs – 사용자 입력 폼
<!-- views/form.ejs -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>입력 폼</title>
</head>
<body>
<h2>로그인 정보 입력</h2>
<form action="/result" method="POST" name="form_test">
<label>ID : <input type="text" name="id"></label><br><br>
<label>PW : <input type="password" name="pw"></label><br><br>
<button type="submit">제출</button>
</form>
</body>
</html>
- 사용자로부터 ID와 비밀번호를 입력받는 폼입니다.
- method="POST"로 데이터를 서버에 전송합니다.
- action="/result"는 전송될 서버 주소입니다.
3. result.ejs – 결과 출력 페이지
<!-- views/result.ejs -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>결과 페이지</title>
</head>
<body>
<h2>입력 결과</h2>
<p>ID : <%= data.id %></p>
<p>PW : <%= data.pw %></p>
</body>
</html>
- POST로 전달된 데이터를 data.id, data.pw로 렌더링합니다.
- <%= %> 문법은 EJS에서 변수를 출력할 때 사용합니다.
💻 서버 코드 작성하기 (server.js)
이제 Express 서버 코드를 작성해 보겠습니다.
// server.js
const express = require('express');
const app = express();
const port = 3000;
// EJS 템플릿 엔진 설정
app.set('view engine', 'ejs');
// POST 데이터 파싱을 위한 미들웨어 설정
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
// 루트 페이지 (index.ejs)
app.get('/', (req, res) => {
res.render('index');
});
// 입력 폼 페이지 (form.ejs)
app.get('/form', (req, res) => {
res.render('form');
});
// 결과 페이지 (result.ejs)
app.post('/result', (req, res) => {
console.log('POST 요청 수신됨:', req.body);
res.render('result', { data: req.body });
});
// 서버 실행
app.listen(port, () => {
console.log(`서버가 http://localhost:${port} 에서 실행 중입니다.`);
});
✅ 코드 설명
- app.set('view engine', 'ejs') : 뷰 엔진을 EJS로 설정합니다.
- express.urlencoded() : HTML 폼에서 전달된 데이터를 파싱하기 위한 미들웨어입니다.
- app.post('/result') : 폼 데이터를 받아 처리하고 결과 페이지에 출력합니다.
🚀 실행 방법
이제 서버를 실행해 봅시다.
node server.js
브라우저에서 아래 주소로 접속하세요:
http://localhost:3000/
동작 순서
- index.ejs에서 "폼 입력하러 가기"를 클릭
- form.ejs에서 ID와 PW 입력 후 [제출]
- 서버에서 데이터를 받아 result.ejs에 전달
- 입력한 ID와 PW가 출력됨
🧪 콘솔 확인
server.js 파일의 콘솔 로그 부분을 보면 다음과 같이 입력 데이터가 출력됩니다.
POST 요청 수신됨: { id: 'testuser', pw: '1234' }
이는 사용자가 입력한 데이터를 서버에서 정상적으로 받아왔다는 의미입니다.
📝 마무리 – 핵심 요약
항목 설명
| View 엔진 | EJS 사용 (views 폴더) |
| 데이터 전송 방식 | POST |
| 데이터 수신 방식 | req.body 활용 |
| 필수 미들웨어 | express.urlencoded() + express.json() |
| 실행 명령어 | node server.js |
📌 보너스 Tip
- 보안을 위해 실제 서비스에서는 HTTPS, dotenv 환경변수 설정, 패스워드 암호화(Bcrypt) 등을 추가로 적용하세요.
- form.ejs에서 required 속성을 활용해 필수 입력 유도 가능합니다.
- 개발 환경에서는 nodemon을 설치하면 코드 수정 후 자동 재시작이 되어 매우 편리합니다.
npm install -g nodemon
nodemon server.js
✅ 결론
지금까지 Node.js Express 프레임워크를 이용한 POST 방식 데이터 전송 방법에 대해 알아보았습니다. 간단한 로그인 폼을 구현하고, 서버에서 데이터를 수신한 후 결과를 페이지에 출력하는 흐름을 따라오셨다면, Express의 기초적인 데이터 처리 흐름을 이해하셨을 겁니다.
이런 기본적인 원리를 이해하고 나면, 추후 DB 연동, 세션 처리, 회원가입 구현 등 더 복잡한 기능도 쉽게 확장할 수 있습니다. 다음에는 이 폼 데이터를 MongoDB나 MySQL과 연동하는 방법도 소개해드릴게요!
반응형
'정책' 카테고리의 다른 글
| Node.js 동기와 비동기의 차이 완벽 이해하기 (3) | 2025.07.26 |
|---|---|
| 왓챠 영화 추천 🎬 여름의 열기처럼 치열한 성장 무비 5편 (6) | 2025.07.26 |
| Node.js로 웹 스크래핑 시작하기! 자바스크립트로 원하는 데이터 뽑아오기 (3) | 2025.07.25 |
| 자바스크립트 배열 합치기 3가지 방법: concat, spread, push 완전 정복 (2) | 2025.07.25 |
| javascript:void(0) 완벽 정리 – 자바스크립트 링크 막기 방법과 그 이유 (3) | 2025.07.25 |