Node.js #2 server

지난 글을 마지막까지 수행했다면 현재 js의 코드는 다음과 같다.

 

const express = require('express')
const app = express()
const nunjucks = require('nunjucks')

app.set('view engine', 'html')
nunjucks.configure('views', {express:app})

app.listen(3000, () => {
    console.log('서버 구동')
})

app.use('/', (req, res) => {
    let i = 1000;
    let j = 2000;
    res.render('index.html', {
        num:i,
    })
})

app.use('/ab', (req, res) => {
    res.send('<h2> hello 2 </h2>')
})

 

1. 요청(데이터 전송) - 응답(데이터 출력)

이제 내가 호스트에 요청을 보내면 그에 응답해 내용을 출력하도록 만들어보자.

 

우선 js를 다음과 같이 수정해보자.

 

app.use('/', (req, res) => {
	let name= req.body.name // name을 새로 정의 (자세한 건 후술)
    	let  i = 1000;
    	res.render('index.html', {
    		num:i,
        	name:name
        })
})

 

html에서도 <h3> element를 다음과 같이 수정해보자.

 

<h3> {{num}}, {{name}} </h3>

 

우리가 입력한 값을 name이라는 변수로 받아, 그걸 html에서 출력할 것이다.

 

여기까지 하고 브라우저에서 불러와보면 에러가 난다.

 

TypeError: Cannot read properties of undefined (reading 'name')

name이라는 변수가 정의되지 않았다는 메시지를 출력하는데,

 

이는 우리가 입력해 submit한 데이터가 현재 인식할 수 없는 형태이기 때문이다.

 

브라우저에서 개발자 도구 > 네트워크 > 헤더 탭을 보면 요청 헤더와 응답 헤더가 있다.

 

우리가 데이터를 입력하고 submit을 누르면 name:value, pw:value값을 객체 형태로 보내는데, 

 

이렇게 보내는 데이터들이 요청의 body가 된다.

 

그래서 좀 전에 name이라는 변수를 선언할때 req라는 객체의 body (req.body)를 지정하고,

 

그 객체의 하위 요소인 req.body.name을 name에 대입하려고 했던 것이다.

 

 

하지만 이 요청하는 body의 데이터 형식이 사용자에 따라 일정하지 않기 때문에

 

(예를 들어 Json일수도 있고, queryString일수도 있다.)

 

해석하기 위해 추가적인 변환이 필요할 때가 있다.

 

그 때 사용하는 것이 body-parser이다. 

 

2. body-parser

body-parser는 데이터 해석을 보완해주는 역할을 하는 라이브러리라고 볼 수 있다.

 

body-parser를 사용해 텍스트 형식의 body도 추가적으로 해석할 수 있다.

 

nunjucks와 마찬가지로 라이브러리의 하나이므로 npm을 이용해 설치할 수 있다.

 

다음과 같이 터미널에 입력하고 잘 설치되었는지 package.json을 보고 확인하면 된다.

 

npm install body-parser

 

이제 js에서 body-parser 라이브러리를 셋업해준다.

 

const bodyParser = require('body-parser')

app.use(bodyParser.urlencoded({extended:true}))

 

아랫줄의 의미는 일단 여기서는 신경쓰지 말고 넘어가자.

 

이제 다시 name과 pw를 입력하고 submit하면 입력한 name의 value가 출력되는 것을 확인할 수 있을 것이다.

 

 

3. CSS 적용

마지막으로 CSS를 적용해보자.