Express

express는 앞서 한 http 의 tcp 통신을 기반으로 만들어진 외부모듈로, 간단히 서버와 html을 통신하게 만드는 좋은 아이이다.

 

1. 실행 

$npm init -y
$npm install express nunjucks

인스톨을 통해서 express 와 nunjucks 를 다운받는다. 

 

const express = require("express");
const app = express();
const PORT = process.env.SERVER_PORT || 3000;

app.listen(PORT, () => {
    console.log(`server start`);
});

기본적으로 서버를 키는 방식은 비슷하다. express를 불러오고 변수에 express를 담아준다. 

서버를 여는 방식은 똑같다, 다만 host는 어차피 내 컴퓨터에서 여는 것이니 생략했다.

암기영역이다.

---

 

app.get(path, callback)

 

가장 기본적인 유형이다. path가 html이 요청한 값과 같으면 콜백 함수를 실행하게 된다. 

app.get("/", (req, res)=>{
	res.send("<h1>메인페이지</h1>")
})

---

app.use(path, callback)

 

use의 path기본 값은 "/" 이다 "/" 가 속한 아래에 있는 모든 path값을 열 때 use를 무조건 소환시킨다. 어떤것도 상관없이 일단 실행시키고 next() 가 있다면 다음 코드를 실행시킨다. next()만나지 않으면 얘만 실행한다.

전체적으로 적용시켜야 할 함수가 있다면 use에 적용시키는것이 좋다.

app.use("/", (req,rse,next)=>{
	console.log("찍힌다")
    next()
})

path = 경로

callback (

req = 요청 메세지

res = 응답 메세지

next = 다음 함수 실행 시키도록 해주는 것)

---

 

 

express.static(root)

 

express에 내장된 미들웨어 함수이다.

root에 내가 html을 생성해놓은 폴더를 지정함으로 그 폴더 안에 있는 파일을 제공해준다.

app.use에 사용하여 모든 get에 영향을 미칠 수 있다.

app.use(express.static("public"))

public 안에 있는 파일을 라우터로 만들어줌 
http://localhost:3000/css/index.css 등으로 만들어줌으로 실행이 가능하도록 만들어준다

내부적으로 next까지 실행이 된다.

 

root : 폴더명

---

 

res.render("filename")

 

html파일을 읽어서 public directory 안에 있는 html 파일을 읽어서 render 시켜주는 것.

res.render("filename")

---

 

app.post("path", (callback))

app.post("/user/join", (req, res) => {
    console.log(req.body);
    res.redirect("/user/welcome");
});

html 에서 submit으로 입력한 값을 post로 넘겼을 때 값을 받을 수 있다.

console.log(req.body) 를 찍어보면 undefined 가 뜬다.

server.use(express.urlencoded({ extended: false }));

이처리까지 해주게 되면 body가 객체로 값을 받아와서 찍힌다.

 

 

res.redirect(path)

 

post 제출시 redirect 로 되어있다.

빠르게 4번의 req, res가 일어난다.

redirect 는 server가 브라우저에게 redirect 값으로 다시 요청을 보내라는 res을 보내는 것이다.

브라우저는 이 응답을 읽고 빠르게 server에 redirect 값으로 요청을 보낸다.

서버는 이 요청에 대한 답변을 보낸다.

url이 짧은 시간에 2번 바뀌는 것 

 

redirect를 보냈던 페이지는 302 네트워크 상태가 되며, url이 redirect로 호출된 값으로 바뀐다. => location 으로 나오게 된다.