이번 시간에는 express 단에서 ejs 부분으로 변수를 전달하는 방법을 설명드리겠습니다.
express-generator 로 express 앱을 생성하신 분들은 자동으로 index.ejs 파일이 생성되 있을 겁니다.
만약 express 앱 만드는 방법을 이해하지 못하셨다면 아래 글을 참고하셔서 express 앱을 만들어 주시거나 따로 파일을 만들어 주시기 바랍니다.
오른쪽에 있는 res.render 부분에 보면 (‘index’) 라고 쓰여져 있는 부분에 {} 괄호를 사용하여 변수를 ejs 파일로 전송할 수 있습니다.
위의 그림을 참고하면 index.ejs 파일에는 <%= title %> 이라고 써있는 태그가 보이실 겁니다. 저게 바로 오른쪽에 보이는 { title : ‘Express’ } 부분에서 렌더링 이 되는 것이죠. 이 결과를 출력해 보면
Express
Welcome to Express 라는 문구가 표시됩니다. 그러면 오른쪽에 있는 값을 변경해 보겠습니다.
저는 Express 값을 지우고 Myblog 로 변경했습니다. 이렇게 변경하면 ?
사진과 같이 변하는 것이죠. 그럼 다른 변수도 추가해 보겠습니다.
이렇게 위 사진과 같이 변경하였습니다. 오른쪽 ejs 랜더링 부분에는 아래쪽에 내용을 지우고 des 변수로 대체하였고 오른쪽의 라우터쪽 파일은
des 라는 변수에 내용을 추가해 줬습니다.
결과는 사진과 같이 잘 출력되는 모습을 볼 수 있습니다. 요렇게 많은 변수들을 추가하여 동적인 페이지를 만들 수 있습니다!
그런데 만약 오른쪽에 있는 index.js 부분에서 { } 괄호안에 있는 내용을 지우면 어떻게 될까요?
위 사진과 같이 지우면
랜더링 오류가 나고 title is not defined 라고 표시되는걸 볼 수 있습니다.
다음시간에는 이렇게 변수를 ejs 파일에서 렌더링 하지 못했을때 오류 핸들링을 해주는 방법을 알려드리겠습니다.
감사합니다!