웹사이트 서버 기본 세팅
회색 하이라이트는 터미널에서 실행
파랑 하이라이트는 코드에디터에서 실행
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 파일 만들기
계산기 뼈대 만들기
GET request 하기
calculator.js에서 get요청하고 파일로 받기
1. sendFile()메소드를 이용한다
여기서 파일 주소를 파일명으로 적어준다
하지만 파일명 "index.html"으로만 적어주었을 때는
내 컴퓨터 안에 서버가 있는 경우는 괜찮치만
서버가 클라우드나 다른 컴퓨터에 있다면
이 경로는 찾을 수가 없게된다.
2. 그래서 __dirname(언더스코어2개)을 붙여주면
/Users/mira/Desktop/코딩/calculator
이 폴더까지 전체 경로를 나타내 준다.
거기에 /index.html 파일을 더해주면
res.sendFile(__dirname + "/index.html");
서버가 어디에 있든 해당 파일을 받을 수 있고,
파일 위치를 변경해도 알아서 찾아간다.
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에서 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 계산기 숫자 입력시 첫 번째 숫자 콘솔에 나오게하기
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");
});
'Node.js > Node.js | Express.js' 카테고리의 다른 글
POST 요청 (0) | 2021.09.28 |
---|---|
Get 요청 | sendFile() | __dirname (0) | 2021.09.28 |
서버 기본 세팅 work flow (0) | 2021.09.24 |
Nodemon 설치하기 | rs (0) | 2021.09.24 |
request, response | GET 요청하기 (0) | 2021.09.24 |
댓글