node_express와 뷰와 레이아웃 2

main layout인 main.handlebars에 들어갈 내용을 작성하자

이전에 SSR에서 사용할 뷰 엔진인 핸들바와 view layout을 생성하였다.

client에서 요청이 들어오면 route를 타서 해당하는 화면을 보여주어야 하는데 layout에 들어갈 각 view 단을 생성해주도록 하자.

directory path는 views/yourHandlebars.handlebars

layout은 이미 main.handlebars에 작성되어 있으므로 {{{body}}}에 들어갈 부분만을 HTML로 작성해주면 된다.

예를 들어

<!--h1 tag will import in main.handlebars in {{{body}}}-->
<h1>hello handlebars</h1>

이제 각 route에 대한 view단이 완성되었으므로 server의 app.get 함수에 대한 설정을 변경해주면 된다.

app.get('/',(req,res)=>res.render('home'))

위 코드는 URI의 요청이 '/' 인 경우 response로 views/home.handlebars 파일을 render 해서 돌려주라는 이야기이다.

이 때 main.handlebars 내부에 home.handlebars를 삽입해서 돌려주게 된다. node는 파일 시스템에 접근이 가능하기 때문에 express는 기본적으로 해당 위치를 자동으로 찾아가게 된다.

전체 코드는 이런식이다.

const express = require('express')
const expressHandlebars = require('express-handlebars')
const app = express()
const port = process.env.PORT || 3000



app.engine('handlebars', expressHandlebars({
	defaultLayout:'main'
}))
app.set('view engine','handlebars')

app.use(express.static(__dirname+'/public'))

app.get('/',(req,res)=>{
	res.render('home')
})
app.get('/about',(req,res)=>{
	res.render('about')
})
app.use((req,res)=>{ // error 처리 route를 아무것도 못타게 되면 여기로 온다.
	res.status(404)
	res.render('404')
})
app.use((err,req,res,next)=>{ // http 에러의 경우 여기로 온다.
	console.error(err.message)
	res.status(500)
	res.render('500')
})


app.listen(port,()=>console.log('Express started'));