이번 포스팅에서는 Express를 사용하여 간단한 계산기 서비스를 제공하는 웹 애플리케이션 페이지를 만들어 보도록 하겠습니다.
계산기 html 작성
계산기로 사용할 html 문서를 아래와 같이 작성해줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<h1>Calculator</h1>
<form action="/" method="post">
<input name="number1" placeholder="Input the first number">
<input name="number2" placeholder="Input the second nmmber">
<button type="submit">Submit</button>
</form>
</body>
</html>여기서 핵심은 바로 form 태그를 사용했다는 것인데요. 중요한 사항들만 간단히 정리해보도록 하겠습니다.
form태그를 사용하면 정보를 제출할 수 있음action은 form 제출을 처리하는 URL을 지정하며 데이터가 도착하는 URL입니다.- 사용할 수 있는 대표적인 HTTP 메소드는
post,getpost는 데이터를 request body에 담아 보냄get은actionurl에?와 함께 전달됨
- 더 알아보기
Express에서 응답으로 html 파일 전달하기
서버에서는 res.sendFile 을 사용하여 html 파일을 응답으로 전달할 수 있습니다.
경로를 설정할 때는 아래와 같이 __dir 을 통해 현재 디렉토리를 찍고 이후 전달할 파일 경로를 +를 통해 지정해 줍니다.
const express = require("express");
const app = express();
app.get("/", function(req, res){
res.sendFile(__dirname + "/index.html");
})
app.listen(3000, function(){
console.log("Server is working at port 3000");
});post 요청 처리하기
여기까지 작성하고 submit 버튼을 눌러 전송하면 404 오류가 발생합니다. 이는 요청으로 들어온post 메소드를 처리하지 않고 있기 때문입니다. 이제 이를 처리해보도록 하겠습니다.
const express = require("express");
const app = express();
app.get("/", function(req, res){
res.sendFile(__dirname + "/index.html");
})
app.post("/", function(req, res){
res.send("Thanks for the Sent!")
})
app.listen(3000, function(){
console.log("Server is working at port 3000");
});이렇게 하고서 post 요청으로 찍히는 req 를 찍으면 상당히 복잡한 데이터가 주르륵 찍힙니다. 우리는 form 태그의 post 메소드를 통해 body 안에 담겨오는 데이터를 받아와야 합니다.
req로 들어오는 body 데이터 받기
npm install body-parser 를 통해 body parser 패키지를 설치합니다. 그리고 아래와 같이 작성합니다.
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.urlencoded({extended: true}))
app.get("/", function(req, res){
res.sendFile(__dirname + "/index.html");
})
app.post("/", function(req, res){
// res.send("Thanks for the Sent!")
console.log(req.body)
})
app.listen(3000, function(){
console.log("Server is working at port 3000");
});이제 콘솔 창에 form 데이터에 담아 전송한 { number1: '1', number2: '4' }와 같은 데이터가 찍히게 됩니다.
계산 로직 처리하기
마지막으로 계산기 로직을 처리할 차례입니다. 편의상 이를 덧셈으로 처리해보겠습니다.
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.urlencoded({extended: true}))
app.get("/", function(req, res){
res.sendFile(__dirname + "/index.html");
})
app.post("/", function(req, res){
let number1 = req.body.number1;
let nubmer2 = req.body.number2;
let result = Number(number1) + Number(nubmer2);
res.send("Calculation result is " + result)
})
app.listen(3000, function(){
console.log("Server is working at port 3000");
});의도한 대로 계산 결과가 표시되는 것을 확인할 수 있습니다.
이렇게 하고서 브라우저에서 개발자 도구를 열어 코드를 확인하면 프론트 단의 소스 코드에서는 계산 로직을 볼 수 없습니다. 우리는 이를 백엔드 단에서 처리하고 있기 때문입니다.
CSS 파일 연결하기
Express에서 CSS 파일을 연결하려면 서버 파일에 다음과 같이 작성하고 public 디렉토리를 생성해줍니다.
app.use(express.static(__dirname + "/public"));다음으로 html 파일에서 <link rel="stylesheet" href="/css/styles.css" type="text/css">와 같이 css 파일을 연동해주면 스타일 시트를 사용할 수 있습니다.
이상으로 html과 express를 사용하여 간단한 웹 애플리케이션을 생성하는 방법에 대해 살펴봤습니다.
'개발 > Express' 카테고리의 다른 글
| Express (3) API 사용하기 (0) | 2022.09.27 |
|---|---|
| Express (1) 기초 설치와 서버 실행 (0) | 2022.09.21 |
