뷰의 동적 콘텐츠

view 단을 따로 뽑아낸 작업은 다음과 같은 효용성이 있다.

server에서 원하는 데이터를 동적으로 페이지에 삽입해줄 수 있다는 것이다.
about 페이지에서 새로고침을 할 때마다 다른 포츈 쿠키 데이터를 보여준다고 가정하자.

아래와 같은 문법을 통해 client는 서버로 부터 새로고침을 할 때마다 조금씩 다른 동적 콘텐츠를 받게 된다.

// server.js에서

const fortunes=[
	"Conquer your fears or they will conquer you.",
	"Rivers need springs.",
	"Do not fear what you don't know.",
	"You will have a pleasant surprise.",
	"Whenever possible, keep it simple"
]
...

app.get('/about',(req,res)=>{
	const randomFortune = fortunes[Math.floor(Math.random()*fortunes.length)]
	res.render('about',{fortune:randomFortune})
})

<h1>About page!</h1>
{{#if fortune}}
<p>your fortune  for the day: </p>
<blockquote>{{fortune}}</blockquote>
{{/if}}

{{#if fortuen}}의 뜻은 res.render('about', {fortune:randomFortune})에서 넘겨준 데이터를 if(fortune)처럼 해석하라는 뜻이다 이는 react와 매우 비슷하다.

이렇게 view 단을 동적으로 변경할 수 있다는 것을 알았다는 것이 중요하다.