Node.js 공부하기) EJS

Embedded JavaScript, ejs는 자바스크립트가 내장되어있는 html 파일이다. html의 태그처럼 자바스크립트 내용을 삽입할 수 있다. 따라서 새싹에서 공부할때도 ejs로 배웠다. 또한 ejs는 서버에서 보낸 변수를 가져와서 사용할 수 있다. 

 

    <main>
        <!-- 이위치에 직접 값을 출력하지 않아서 =기호는 쓰지 않는다 -->
        <% if (prods.length > 0) { %>
        <h1>My Products</h1>
        <p>List of all the products...</p>
        <div class="grid">
            <% for(let product of prods) { %>
            <article class="card product-item">
                <header class="card__header">
                    <h1 class="product__title"><%= product.title %></h1>
                </header>
            </article>
            <% } %>
        </div>
        <% }else { %>
            <h1>No Product Found!</h1>
        <% } %>
    </main>
</body>
</html>

직접 값을 출력한다면 <%= %>, 그리고 값을 직접 출력하지 않는다면 <% %> 으로 =없이 사용한다. 

또한 pug와 달리 완전한 html구문을 사용하고, vanilla js처럼 if문도 필요시 사용할 수 있다. { }괄호를 ejs문을 안에 넣어주면 된다. (위의 코드 참고.)

 

 

다른거에비해 짧았는데, html의 연장선이라는 느낌이라서 사용하기에 어렵지 않았다. 사용하면서 더 익숙해지면 될듯 하다.