Node.js / Express에서 GET과 POST 요청 처리하는 방법
1. Node.js
Node.js는 서버 측에서 JavaScript를 실행할 수 있게 해주는 런타임 환경이다. 이벤트 기반, 논 블로킹 I/O 모델을 사용하여 가볍고 효율적인 웹 서버를 구축할 수 있다. 자세한 내용은 다른 포스트에서 다루겠다.
💾 Node.js
Node.js — Run JavaScript Everywhere
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
2. Express.js
1) Express.js 소개
Express.js는 Node.js를 사용하여 백엔드 웹 애플리케이션을 개발할 수 있도록 도와주는 프레임워크이다. Node.js 환경에서 가장 널리 사용되는 사실상 Node.js의 표준 서버 프레임워크이다. Express는 특히 RESTful API를 쉽게 빌드할 수 있도록 설계되어있다.
2) Express.js 설치 및 기본 폴더 생성
(1) Express.js 설치
VS Code 터미널에서 아래 명령어를 입력하여 Express를 설치한다.
Express 설치 명령어
npm install express
(2) Express.js 기본 폴더 생성
해당 프로젝트 아래에 다음과 같은 폴더들을 생성한다.
📂 config : 설정에 관련된 정보들을 저장 (DB 연결 정보, API KEY 등)
📂 public : 정적인 파일들을 관리하는 공간 (CSS, JS, IMG, VIDEO 등)
📂 routes : 경로를 관리하는 공간
📂 views : 동적인 웹페이지를 관리하는 공간
3. Nunjucks
이 포스트에서는 웹 페이지를 렌더링하기 위해 Nunjucks를 설치하여 사용한다. Nunjucks는 Mozilla에서 개발한 JavaScript 템플릿 엔진으로 동적인 웹 페이지를 생성할 때 유용하다.
VS Code 터미널에서 아래 명령어를 입력하여 Nunjucks를 설치한다.
Nunjucks 설치 명령어
npm install nunjucks
4. Express에서 GET / POST 요청 처리
아래 코드는 main 페이지에서 Data를 입력하고 submit했을 때, 전송 받은 Data를 화면에 출력해주는 예제이다.
1) app.js
📂 Project > 📑 app.js
// 1. 모듈 불러오기
const express = require("express");
const bodyParser = require("body-parser");
const nunjucks = require("nunjucks");
const router = require("./routes/router");
// 2. 애플리케이션 설정
const app = express();
const PORT = process.env.PORT || 3000;
// 3. 미들웨어 설정
app.use(bodyParser.urlencoded({ extended: true }));
// 4. 뷰 엔진 설정
app.set("view engine", "html");
nunjucks.configure("views", {
express: app,
watch: true,
});
// 5. 라우터 설정
app.use("/", router);
// 6. 서버 시작
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
2) main.html
📂 views > 📑 main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Express.js: GET and POST Request Handling</title>
</head>
<body>
<h1>GET 요청</h1>
<form action="/get-data" method="GET">
<label for="data">Data:</label>
<input type="text" id="data" name="data" />
<input type="submit" value="Submit" />
</form>
<h1>POST 요청</h1>
<form action="/post-data" method="POST">
<label for="data">Data:</label>
<input type="text" id="data" name="data" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
3) router.js
Express에서 GET 요청으로 전송된 데이터는 req.query 객체를 통해 접근
Express에서 POST 요청으로 전송된 데이터는 req.body 객체를 통해 접근
📂 routes > 📑 router.js
const express = require("express");
const router = express.Router();
// 메인 페이지 처리하기
router.get("/", (req, res) => {
res.render("main");
});
// GET 요청 처리
router.get("/get-data", (req, res) => {
const data = req.query.data;
res.send(`GET request received. Data: ${data}`);
});
router.post("/post-data", (req, res) => {
const data = req.body.data;
res.send(`POST request received. Data: ${data}`);
});
module.exports = router;