221214 - Node Express 기초

오늘 내가 배운 것

1. req, res

2. bodyParser

3. static

4. template engine

5. request method POST

6. redirect

 

이것을 express로!!!

#package.json 생성
npm init -y

# template engine 이 많이 있는데, 그중에 nunjucks 를 이용할 예정이다. 
# node modules 생성됨
npm install express nunjucks

git을 사용하게 되면 .gitignore에 node_modules를 넣어준다.
npm으로 설치할 수 있는 쉽게 설치할 수 있기 때문에 굳이 이 폴더 자체를 같이 올릴 필요는 없다.

 

서버 열기

const express = require('express')
const app = express()   // tcp에서 const server = net.createServer()
const PORT = process.env.SERVER_PORT || 3000

//tcp의 server.listen() /express에선 인자값 2개 - port와 콜백
app.listen(PORT, ()=>{  
    console.log('server start')
})

 

req, res

//요청이 들어오면 무엇을 처리할지 알려주기 때문에 '라우터'라고 한다.
//라우터만들기 - 1.path / 2. callback(req, res)

app.get('/', (req, res)=>{
    //만약에 http://localhost:3000/?name=baek 을 출력하고 싶으면?
    console.log(req.query.name)
    res.send('hello world!!!!')
})

인자 값으로 들어간 callback함수를 하나하나를 미들웨어라고 한다.

app.get(
    '/', 
    (req, res, next)=>{
    console.log(req.query.name)
    next()
    },
    (req, res)=>{
        console.log(되나요?)
        res.send('hello world')
    }
)

콜백 함수를 더 넣어서 get 한 번에 여러 가지 일을 처리할 수 있다. 

인자 값에 next가 들어가야 한다. 그리고 함수 안에서 next() 호출해준다.

콜백 함수가 실행되다가 next를 만나면 밑에 있는 함수도 실행이 된다.

 

app.use

use에 원래 get, post 같은 method가 들어가지만 use는 method를 구분하지 않고 실행을 시킬 수 있다. path만 확인해서 실행이 된다.

app.use('/', (req, res)=>{
    console.log('이건 use에서 실행이 되었다.')
    res.send('hello world!!')
})
app.get('/',(req, res)=>{
    console.log("되나요?")
    res.send('hello world')
})

use도 있고 get도 있으면 실행이 어떻게 될까?

 실행은 use에 대해서만 실행이 된다. 만약 next가 있었으면 밑에 조건도 실행되지만 지금 같은 상황에서는 use만 실행이 된다.

만약 path를 안 적으면 실행이 되나?

실행 가능하다.

다른 조건 없이 무조건 실행이 된다.

(TCP 통신에서 조건 없이 client에게 data를 받으면 무조건 실행시키는 상황.)

const callback = (req, res, next)=>{
    console.log("hello!!!")
    next()
}
app.use(callback)

app.get('/',(req, res)=>{
    console.log("되나요?")
    res.send('hello world')
})

callback을 변수로 빼서 변수를 인자 값으로 넣어도 문법적으로 오류가 없다.

실행 가능하고 callback이 대입될 때, path값이 없으므로 무조건 실행이 되면서,

next가 있기 때문에 다음에 나오는 라우터 중 조건이 맞는 라우터가 또 실행이 된다.

 

static 정적 파일 연결하기

express가 제공하는 메서드 실행하면 된다.

express.static() - 인자 값 1개 : 어떤 폴더를 기준으로 할 것인지 정해야 한다.
express.static('public')

//정적 페이지 (css, js파일 연결 가능하게 됐다.)
app.use(express.static('public'))

express.static은 어떤 파일을 읽을 때 사용하는데, 원하는 값을 public이라는 폴더에서 불러온다는 뜻이다.
불러오는 모든 파일의 src는 public이 된다는 것이다.

그러면 html 파일을 읽다가 index.css파일을 요청하게 되면, 자동으로 public 폴더에서 찾아온다.

 

template engine(템플릿 엔진)

템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어
템플릿 엔진의 종류도 많고 방식도 많은데,
'nunjucks'라는 것을 사용할 것이다.

//(암기의 영역) 선언의 느낌
//nunjucks를 사용하기 위해서 불러오고 
const nunjucks = require('nunjucks')

//템플릿엔진을 쓸 땐 꼭 쓸 것.. 기억해놓자.
app.set('view engin', 'html')

//configure(경로,객체)
//객체는 무슨언어를 쓰는지 변수가 무엇인지 적어준다.
nunjucks.configure('views',{
    express:app
})

템플릿 엔진을 사용하게 되면 파일을 호출할 때 기존엔 readfile이었는데, 이것을 render로 바꾼다.
render을 통해서 body 영역을 만들고 그것을 응답으로 준다.

//res.readFile('index.html')
res.render('index.html')

//템플릿 엔진에 데이터를 넘겨주는 방법
//인자값으로 객체를 대입하여준다. 
const name = req.query.name
res.render('index.html',{name:name})

//주소창에 http://localhost:3000?name=baek 으로 연결해보기

 

bodyParser

요청을 바디로 보낼 수 있어야 한다.
express는 기본적으로 bodyParser가 없기 때문에, req.body를 출력해도 출력되지 않는다. (undefined)

body가 처음부터 없었던 것이 아니고 body가 있어도 읽을 수 있는 방법이 없었던 것이다.

// body부분을 만들어서 보내준다.
//content-type : application/x-www-form-urlencoded와 같다.
app.use(express.urlencoded({extended:false})) 

app.post("/user/join", (req, res)=>{
    console.log(req.body) //undefined
    res.send('hello~~')
})
//rec
app.get("/user/join", (req, res)=>{
    res.render("user/join.html")
})

[Object: null prototype] { userid: '1', userpw: '1', username: '1' }가 출력되는 모습을 볼 수 있다.

 

redirect

Client가 POST 요청을 보냈을 때 응답을 redirect로 처리하여 재요청을 해달라고 응답을 보내는 방식
client는 이 응답을 받고 바로 url을 바꿔서 재요청을 한다.

(response의 속성중에 location이라고 있다.)

//res.send 대신 res.redirect를 적고 사용하면 된다.
app.post("/user/join", (req, res)=>{
    console.log(req.body) //undefined
    // res.send('hello~~')
    // 이 부분이 바뀐다.바디부분을 읽으면서 redirect하기 때문에
    res.redirect("/user/welcome")//welcome으로 요청을 한다.
})

//그리고 요청을 한 welcome 페이지를 다시 보여줘야한다.
app.get ("/user/welcome", (req,res)=>{
    res.send('회원가입 성공!!')
})

post를 요청하면서 redirect가 일어나기 때문에 실제로는 2번 왔다 갔다 한 상황이지만,

그 속도가 빨라서 사용자가 느끼기에 1번만 페이지가 바뀐 것이라고 생각할 수 있다.

Location 속성

 

---