[Node.js] ejs 사용법
ejs(Embedded Java Script)는 자바스크립트가 내장되어 있는 html이다. html에도 자바스크립트를 심을 수 있다. 하지만 ejs는 html 태그처럼 자바스크립트 코드를 삽입할 수 있다. 동적인 페이지(Dynamic Web)를 만들기 훨씬 수월해진다. ejs는 지정된 형식을 사용하면 스크립트 내용을 하나의 요소처럼 사용할 수 있다.
가장 중요한 ejs를 (내가) 사용하는 이유는, 서버(노드)에서 보낸 변수를 html에서 사용할 수 있다는 것이다.
가장 중요한 ejs를 (내가) 사용하는 이유는, 서버(노드)에서 보낸 변수를 html에서 사용할 수 있다는 것이다.
ejs 뷰엔진 사용 설정하기
ejs 모듈을 설치하고(cmd에서 npm i ejs --save) require 메소드로 호출한다.
이제 뷰 엔진을 ejs로 설정하였다. views 폴더를 프로젝트 폴더에 만들고 index.ejs, main.ejs 등 파일을 작성하면 된다.
var ejs = require("ejs");
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
| cs |
<% %> 태그 사용하기
태그라고 생각하면 쉽다. <% %> 사이에 원하는 자바스크립트 코드를 넣으면 된다. for문도 넣을 수 있고, 내 머리에서 떠오르는 자바스크립트들은 다 되었다.
<body>
<% for (var i=0; i<5; i++) { %>
<h3>hi zini</h3>
<% } %>
</body>
| cs |
결과는 뻔하게 hi zini가 5번 출력된다. 처음에 ejs를 접하고 꽤 신기했다. 이 태그를 이용하면 자바스크립트 코드를 html에서 유동적으로 사용할 수 있다.
한가지 주의할 점은 줄바꿈을 하면 새로운 <% %> 태그를 이용해야 한다는 것이다.
그리고 이 태그 안에는 무조건 자바스크립트 코드만 들어가야 한다.
<%= %> 태그 사용하기
변수값을 코드로 옮겨준다. 사실 이 기능을 가장 많이 활용한다. 변수의 자료형을 생각할 필요 없이 사용할 수 있다.
<body>
<% for (var i=0; i<5; i++) { %>
<h3><%= i+1 %>hi zini</h3>
<% } %>
</body>
| cs |
서버에서 변수값 넘기기
ejs 페이지 렌더링 설정을 모두 했다는 가정하에 response 객체의 render 메소드를 사용해서 데이터를 넘겨줄 수 있다. 그냥 옵션에 변수값만 넘기면 되기 때문에 정말 쉽다.
서버측 app.js 파일에서 다음과 같이 렌더링하면 된다.
res.render("index", {
firstData: "hello zini",
secondData: "bye zini"
});
| cs |
html 파일 안에는 <%= firstData %>, <%= secondData %>가 있을 것이고 렌더링하는 순간 변수와 함께 코드에 심어질 것이다. 따라서 개발자 모드로 ejs 페이지를 보더라도 완성된 코드로 보이기 때문에 ejs 코드를 볼 수 없다.
ejs의 사용법을 어느정도 알아보았는데, 필수적인 사용법만 적어놨기 때문에 다른 글들을 더 찾아보면 좋을 것이다. 정말 쓸모가 많다.
댓글 없음: