안녕하세요. 혀코입니다.
오늘은 Node.js로 두개의 값을 폼으로 받아서 간단한 덧셈연산을 할 수 있는 웹사이트를 만드는 방법에 대해 알아보겠습니다.
$ mkdir calculator
$ cd calculator
$ touch calculator.js
$ npm init
$ npm install express
calculator 폴더를 만들고 그 폴더안으로 이동해서 calculator.js 파일을 만들고 npm 초기화 세팅 후, express를 설치합니다.
calculator.js 파일을 다음과 같이 업데이트 합니다.
//jshint esversion:6
const express = require("express");
const app = express();
app.get("/",function(res,req){
res.send("I am Iron Man");
});
app.listen(3000,function(){
console.log("I love you 3000.");
});
다음 명령어를 실행시켜서 서버를 시작합니다.
$ nodemon calculator.js
서버가 제대로 실행되었다면, 커맨드창에 "I love you 3000."이 보이고, http://localhost:3000으로 이동하면 "I am Iron Man"이 보입니다.
서버 테스트를 중지하기 위해서, Ctrl+c를 눌러서 중지합니다.
다음 명령어를 실행시켜서 index.html 파일을 생성합니다.
$ touch index.html
index.html 파일을 다음과 같이 업데이트 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>I am Iron Man</title>
</head>
<body>
<h1>I am Iron Man</h1>
<form action="/" method="POST">
<input type="text" name="num1" placeholder="first number">
<input type="text" name="num2" placeholder="second number">
<button type="submit" name="submit">Calculate</button>
</form>
</body>
</html>
서버를 실행시켜서 index.html 파일을 보이게 하기 위해서 calucalator.js를 다음과 같이 변경합니다.
//jshint esversion:6
const express = require("express");
const app = express();
app.get("/",function(req,res){
res.sendFile(__dirname + "/index.html");
});
app.listen(3000,function(){
console.log("I love you 3000");
});
폼형식은 제대로 나타나지만 숫자를 넣고 버튼을 누르면 에러가 나타납니다.
이유는 post로 데이터를 주지만 calculator.js에서 post로 데이터를 받지 않기 때문에 나타나는 오류입니다.
calculator.js를 다음과 같이 변경합니다.
//jshint esversion:6
const express = require("express");
const app = express();
app.get("/",function(req,res){
res.sendFile(__dirname + "/index.html");
});
app.post("/",function(req,res){
res.send("two numbers are entered");
});
app.listen(3000,function(){
console.log("I love you 3000");
});
입력한 두 수를 POST로 보내고 연산하려면 다른 Node Package Module(NPM)이 필요합니다. 바로 body-parser입니다.
다음 명령어를 실행해서 body-parser를 설치합니다.
$ npm install body-parser
그 다음 body-parser를 사용하기 위해 calculator.js를 다음과 같이 업데이트 합니다.
//jshint esversion:6
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){
var num1 = req.body.num1;
var num2 = req.body.num2;
var result = num1 + num2;
res.send("the sum of the two numbers is " + result);
});
app.listen(3000,function(){
console.log("I love you 3000");
});
이렇게 하면, 숫자가 아닌 문자열의 합이 나오게 됩니다. 예를 들어 3, 5를 입력하면 35가 나오게 됩니다.
숫자의 합을 구하려면 calculator.js를 다음과 같이 업데이트 합니다.
//jshint esversion:6
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){
var num1 = Number(req.body.num1);
var num2 = Number(req.body.num2);
var result = num1 + num2;
res.send("the sum of the two numbers is " + result);
});
app.listen(3000,function(){
console.log("I love you 3000");
});
이렇게 하고, http://localhost:3000을 확인해보면 예상한대로 두수의 합을 구할 수 있습니다.
이렇게 node.js로 서버를 구성하고 입력된 두 숫자의 합을 구하는 방법에 대해 알아보았습니다.
유용하셨다면 공감과 구독버튼을 눌러주세요. 저에게 큰 힘이 됩니다.
감사합니다. :)
댓글