계산기 서버 만들기 | body-parser | path.js |

웹사이트 서버 기본 세팅

회색 하이라이트는 터미널에서 실행 

파랑 하이라이트는 코드에디터에서 실행 

 

1 원하는 곳에 새 폴더 만든다  mkdir calculator

 

2 새로 만든 폴더 안에 들어간다  cd calculator

 

3 새 파일 만든다  touch calculator.js

 

4 npm을 실행시킨다 npm init

 

5 코드에디터에서 만든 폴더를 연다 

 

6 express를 다운 받는다  npm install express

 

7 calculator.js에서 express 요청하는 코드 작성

const express = require('express'); 

 

8 express 셋업

const app = express();

 

9 포트 연결 

app.listen(3000, function() {

console.log("Server started on port 3000");});

 

10 GET 요청하기 

app.get("/", function(req, res) {

res.send("<h1>Hello world</h1>")});

 

11 nodemon 실행시키기 

nodemon calculator.js 

 

안깔려 있으면 깔기 

npm install -g nodemon

 

12 주소창에 localhost:3000 쳐서 잘 나오나 확인하기

 

---

index.html 파일 만들기

계산기 뼈대 만들기 

html

 

---

 

GET request 하기 

calculator.js에서 get요청하고 파일로 받기 

 

1. sendFile()메소드를 이용한다

calculator.js

 

 

여기서 파일 주소를 파일명으로 적어준다 

하지만 파일명 "index.html"으로만 적어주었을 때는

내 컴퓨터 안에 서버가 있는 경우는 괜찮치만

서버가 클라우드나 다른 컴퓨터에 있다면

이 경로는 찾을 수가 없게된다. 

 

2. 그래서 __dirname(언더스코어2개)을 붙여주면

 /Users/mira/Desktop/코딩/calculator

이 폴더까지 전체 경로를 나타내 준다.

 

거기에 /index.html 파일을 더해주면

res.sendFile(__dirname + "/index.html");

 

 

서버가 어디에 있든 해당 파일을 받을 수 있고, 

파일 위치를 변경해도 알아서 찾아간다. 

calculator.js

 

브라우저

---

 path.js 

path.js 파일을 새로 만들고 

내용을 console.log(__dirname)만 적어서 저장을 한다. 

 

 

그리고서 콘솔에서 path.js를 node로 돌린다

그러면 현제 path.js 파일이 어디있는지 알수있다. 

 

 

이 파일을 다른 폴더로 옮기고 나서 

해당 폴더로 이동 후 node path.js를 돌리면 파일이 있는 위치가 나온다.

개발자가 일단 어느 폴더 안에 어디있는지는 알아야 함

그냥 home으로가서 pah.js 돌리면 모른다고 함.

 

 

 

---

 

POST  Request 하기 

숫자를 입력하고 calculator 버튼을 누르면 어떻게 될까?

 

 

 

크롬 디벨로퍼툴을 열어서 network로 들어가면 

index.html 의 status가 404(Not Found)가 나온다. 

이 말은 저장이나 계산은 되고 있지 않다는 말이다.

(내 크롬 디벨로퍼툴은 강의 때랑 지금이랑 크롬이 달라졌는지 status를 찾을 수 없었다..)

 

 

html

 

HTML에서 form 태그

 

method= "post"

input에 들어온 내용을 어딘가로 보낸다는 의미인데 

그 어딘가는 action에 적힌 곳으로 가게된다. 

 

action="/"

위의 코드는 서버가 아닌 index.html로 가게 해놓았는데 

이 설정은 서버로 가는 것이 아니다. 

 

그래서 서버의 home route 으로 가게 하려면

forward slash("/")로 써줘야한다.

 

여기서 action을 지워도 괜찮다.

현재 페이지로 가도록 기본 설정되어있다. 

 

하지만 404 에러가 나는 이유는 서버에서 post 요청이 들어왔을 때

어떻게 해야 한다는 내용이 서버에서 입력이 되지 않아서 이다. 

 

<button type="submit">을 해줘야 입력한 내용이 서버로 간다.

 

 

 

 

 

 

app.post()  post 요청이 들어왔을 때

"/"  결과를 home route에 보여주고 

익명함수  Thanks for posting that을 메세지를 띄워보자.

 

 

 

결과보기 

 

calculate을 눌렀더니 메인 화면이 아래 메세지로 바뀌었다.

 

---

 

body-parser 사용하기 

숫자를 입력하면 계산해서 그 결과를 브라우저에 보낼 수는 없을까?

이 때 npm package 에서 Body Parser가 필요하다.

 

<이 다음 포스트인 body Parser에서 좀 더 설명 되어 있음>

 

콘솔에 body-parser를 다운 받는다. 

body-parse는 또 따로 있으니

body-parser로 다운 받아야한다. 

npm install body-parser

 

body-parser: it allows you to go into any of your routes, and you can tap into(활용하다) sth called request.body. 

and this is the parsed version of tvhe HTTP request. 

 

 

1 body-parser 불러오기 

2 html 파일 분석

app.use(bodyParser.urlencoded());

body-parser는 express 위에서 동작하므로 

const app = express(); 아랫 줄에 위치해야한다. 

bodyParser는 몇개의 모드가 있는데

urlencoded를 사용하면 html form에서 오는 데이터를 parse(분석)한다. 

 

{extended:true}

nested object를 post 할 수 있게 한다. 

우리가 사용할 건 아니지만 적어줘야한다. (bodyParser가 declare 하라고 요구한다.)

 

3 계산기 숫자 입력시 첫 번째 숫자 콘솔에 나오게하기 

 

 

html

req.body.num1에서 num1은 html name attribute에서 왔다

num1을 n1으로 바꾸면 js에서도 바꿔줘야한다. 

 

 

 

결과보기 

첫 숫자 7

 

 

두 숫자 더한 값 나오게하기 

1. 입력값이 텍스트로 인식되었기 때문에 Number로 감싸줘서 숫자로 바꿔줘야한다. 

 

 

결과보기 

 

---

 

 

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 result of the calculation is " + result);

})

 

app.listen(3000, function() {

console.log("Server started on port 3000");

});