Nodejs - Nunjucks

Nunjucks

• 정의
  Nunjucks는 템플릿 엔진중 하나로 자바스크립트를 사용해서 HTML를 렌더링할 수 있게 해줍니다.
  HTML이 하는 역할 부분과 , express가 하는역할을 구분하기 위해서 사용합니다.

• 설치 및 셋팅

1. 터미널에서 npm install nunjucks로 설치해주고

2. package.json에 nunjucks가 생성되었는지 확인

3. server.js에서 nunjucks 가져오고 셋팅까지 (그냥 외우기..)

Nunjucks 사용해보기

• nunjucks 라우터영역
  리퀘스트 메소드와 url내용을 확인해서 실행시켜준다.

• 리퀘스트 메소드
  리퀘스트 메소드에는 Get과 Post이 있습니다.

( Get 요청 )
1. views 폴더 생성후 render할 index.html파일 생성

2. server.js 파일에서 res.send()가 아닌 res.render()로 브라우저가 요청한 url을 nunjucks가 html로 만들어서 express가 브라우저로 응답한다.

위에서는 html 파일에 {{num}} 부분이 100으로 이미 할당되있기 때문에 숫자 100이 같이 적혀있다.

3. 빈칸에 아이디와 패스워드를 적기

빈칸에 아이디와 패스워드를 입력하게 되면 name 값이 할당되어 위처럼 숫자 100옆에 name도 같이 표기된다.
Get 요청이기 때문에 입력한 값이 uri에 끝에 querystring이 추가되어있는것을 알 수 있다.
살펴보면 ?이후부터 querystring이 추가되어있고 입력한 값들을 확인할 수 있고 &로 구분되어있다는것을 알 수 있다.

server.js에 console.log(req.query)를 사용해서 입력한 내용을 객체 형태로 받을 수 있다.

( Post 요청 )
1. 같은 html파일에 form태그안에 있는 method값만 post로 변경하고 post 요청을 처리하는 라우터를 만들었다.

2. 빈칸에 아이디와 패스워드를 적기

post요청으로 바뀌었기 때문에 get요청과 다르게 uri 뒤에 querystring이 추가되지 않았습니다.

get요청과 다르게 console.log(req.body) 를 사용하여 입력한 값들을 객체형태로 받을 수 있다.
이때 app.use(express.urlencoded({extended:true,})) 를 사용하여야 post로 받는 body영역을 해석할 수 있습니다.