더 많은 포스팅 보기 자세히보기

프론트엔드/JS | TS

ejs

유도혁 2022. 3. 16. 02:18

ejs는 embedded javascript의 약자이다

주로 node.js 서버에서 웹 페이지를 구축할 때 사용한다.

 

view 데이터 넘기는 방법

module.exports = function(app, fs) {
  app.get('/', function(req, res) {
    res.render('index', {
      test: 'hello'
      testLength: 5
    })
  });
}

 

view에서 렌더링 방법

<% %>

요 안에다가 자바스크립트 코드를 작성하면 된다.

ejs 말 그대로 embedded 서버에서 보여줄 미리 실행되어 결과물 html만 들어오기 때문에

콘솔을 확인하려하더라도 개발자 모드로 없다 *(node.js - DevTools로는 확인 가능함)

 

<div>
 <%= test %>
</div>

%뒤쪽에 여러 선택자를 붙여 사용하지만 보통 안붙이거나, '='을 붙인다. 이것을 붙이면 데이터가 렌더링된다.

ex)
<div>
	hello
 </div>

 

for문 사용 예

<% for(let i = 0; i < testLength; i++){ %>
            <li>
                <%= i %>
            </li>
<% } %>

 

컴포넌트 분할 예

<% include ./filePath %>

이렇게 헤더와 푸터 head 태그의 정보 등을 분할할 수 있다.

'프론트엔드 > JS | TS' 카테고리의 다른 글

nvm으로 node 버전관리 하기  (0) 2022.03.25
TypeScript - Install  (0) 2020.05.13