이번 포스팅에서는 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, get
    • post는 데이터를 request body에 담아 보냄
    • get 은 action url에 ? 와 함께 전달됨
  • 더 알아보기

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

티스토리툴바