728x90
ejs란?
- ejs는 Embedded JavaScript의 약자로, 자바스크립트가 내장되어 있는 html 파일을 의미한다
- html 파일과의 차이점은 html 안에 내장되어 있는 것과 바깥에서 건드리는 것의 차이이다.
- 즉, ejs는 html의 태그처럼 자바스크립트 내용을 삽입할 수 있다.
- 일반 html 파일은 무조건 <script> 태그를 이용해 분리를 시켜야하지만, ejs는 지정된 태그를 통해 스크립트 내용을 하나의 요소처럼 사용될 수 있게 한다.
- 또한 서버에서 보낸 변수를 가져와 사용할 수 있다
ejs에는 자바스크립트를 내장 시킬 수 있는 2가지의 태그가 있다.
<% %> 태그
- <% %>안에는 무조건 자바스크립트 코드가 들어가야한다.
- 그리고 줄바꿈을 하면 새로운 <% %>를 이용해야 한다.
<html>
<head>
<title>22222TESTESTEST22222</title>
</head>
<body>
<% for (var i = 0; i < 5; i++) { %>
<h1>안방으로 들어왔습니다.</h1>
<% } %>
</body>
</html><%= %> or <%- %> 태그
- 두 가지 표기법이 있지만 역할은 똑같다. 이 태그의 역할은 해당 태그 안의 변수 값을 그대로 코드처럼 옮겨주는 것.
- 동적으로 페이지를 만들 때 아주아주 편하게 해주는 기능이다.
- 이 태그를 썼을 때는 변수의 자료형 이런거 생각하지말고 그냥 코드로 들어가 있다고 생각해야된다.
<html>
<head>
<title>22222TESTESTEST22222</title>
</head>
<body>
<% for (var i = 0; i < 5; i++) { %>
<h1>안방으로 <%= i+1 %>번째 들어왔습니다.</h1>
<% } %>
</body>
</html>서버에서 넘겨준 변수 사용하기
<html>
<head>
<title>22222TESTESTEST22222</title>
</head>
<body>
<% for (var i = 0; i < 5; i++) { %>
<h1>안방으로 <%= i+1 %>번째 들어왔습니다.</h1>
<% } %>
<h1><%= one %></h1>
<h1><%= two %></h1>
</body>
</html><% %>, <%= %> 사용 시 유의점
1. <% %>로 변수 선언을 하면 스코프 적용이 된다. ejs 내 자바스크립트와 <% %>안의 변수명은 겹쳐도 따로 인식된다.
- 전역변수와 지역변수의 개념이 html 코드 안에서 똑같이 적용된다.
- 만약 <script> 태그 안의 코드와 <% %> 내 코드는 분리되어 처리된다.
2. <% %> 내 코드는 개발자 모드로 볼 수 없다.
Reference
[node.js][3] ejs 사용설명서
지난 글에서는.. express모듈의 GET과 POST 함수 사용법을 알아보았다. 이로써 주소창에 입력한 디렉토리 별로 페이지를 다르게 출력하고, 서버에 POST요청을 보낼 수도 있게 되었다. 이번 글에서는
yahohococo.tistory.com
반응형
