- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
node.js 응용 [node.js 응용] ejs 사용설명서
2023.11.25 01:01
[node.js 응용] ejs 사용설명서
[3][0] ejs란?
ejs는 Embedded JavaScript의 약자로, 쉽게 말하면 자바스크립트가 내장되어 있는 html 파일이다. html에도 자바스크립트를 넣을 수 있지 않냐고? html 안에 내장되어 있는 것과 바깥에서 건드리는 것의 차이다. 볼품없는 그림으로 한 번 설명해드리겠다.
왼쪽은 ejs, 오른쪽은 html파일의 자바스크립트를 이용한 div여러개 만들기
ejs는 html의 태그처럼 자바스크립트 내용을 삽입할 수 있다. 매우 큰 강점인데, 이것을 이용해 페이지를 동적으로 짜는 것이 수월해진다. 일반 html 파일은 무조건 <script> 태그를 이용해 분리를 시켜야하지만, ejs는 지정된 태그를 통해 스크립트 내용을 하나의 요소처럼 사용될 수 있게 한다. 또한 서버에서 보낸 변수를 가져와 사용할 수 있다! 지난 글에서 살펴보면 변수를 넣을 수 있는 부분이 있었다! 하지만 예시에선 안 넣었지
[3][1] 코드를 내장시키자 - <% %> 태그
ejs에는 자바스크립트를 내장 시킬 수 있는 2가지의 태그가 있다. 가장 기본이 되는 것은 <% %> 이다. 저 사이에 원하는 자바스크립트 내용을 넣으면 된다. 예시로 보자면
<html>
<head>
<title>22222TESTESTEST22222</title>
</head>
<body>
<% for (var i = 0; i < 5; i++) { %>
<h1>안방으로 들어왔습니다.</h1>
<% } %>
</body>
</html>
test2.ejs를 수정한 것이다. 저렇게 하면 예상결과가 뻔하지 않은가? '안방으로 들어왔습니다.'가 5번 나올 것이다. app.js를 실행해 확인해보자.
좀 무섭다.
주의할 점은 <% %>안에는 무조건 자바스크립트 코드가 들어가야한다. 그리고 줄바꿈을 하면 새로운 <% %>를 이용해야 한다. 더 알아야할 사항이 있지만 그것들은 하나의 태그를 더 알아본 뒤 끝에 정리하겠다.
[3][2] 변수값을 내장시키자 - <%= %> or <%- %> 태그
<html>
<head>
<title>22222TESTESTEST22222</title>
</head>
<body>
<% for (var i = 0; i < 5; i++) { %>
<h1>안방으로 <%= i+1 %>번째 들어왔습니다.</h1>
<% } %>
</body>
</html>
아까의 test2.ejs를 수정한 것이다. 결과를 예측해보자. <% %>안 for문으로 묶인 공간 안에 <%= i + 1 %>를 넣었으니 i가 1부터 5까지 증가하면서 출력이 될 것이다. 이와 같이 <% %>로 묶은 범주안에 <%= %>를 쓰는 식으로 혼용해서 쓸 수도 있다.
아까보단 덜 무섭다.
위에서 말했듯 이 태그 안에 있는 변수는 그 값이 코드처럼 들어가게 된다. 그래서 변수의 자료형이 문자열이라고 실수를 해서는 안된다. 예를 들기 이전에 <% %>, <%= %> 태그는 ejs 안에 넣은 자바스크립트 코드에도 내장시킬 수 있다! 예를 들면,
<html>
<head>
<title>22222TESTESTEST22222</title>
</head>
<body>
<% for (var i = 0; i < 5; i++) { %>
<h1>안방으로 <%= i+1 %>번째 들어왔습니다.</h1>
<% } %>
</body>
<script>
var test = <%= "test1" %>;
alert(test);
</script>
</html>
이렇게 쓰면 안된다는 것이다. <%= "test1" %>은 예를 들기위해 쓴 것으로 저렇게 굳이 쓰지 않길 권장한다. <%= %> 태그 안의 값은 무조건 코드처럼 삽입 된다. 문자열이든 숫자이든 그냥 그대로 코드로 옮겨진다. 개발자모드로 보면 var test에 "test1"이 저장되는게 아니라 변수명 test1을 저장하라는 코드로 나타나있을 것이다.
그래서 코드로 삽입하면서 문자열 형식으로 나타내고 싶을 때는 "<%= %>" 식으로 치면 된다. 저 예시에서는
<html>
<head>
<title>22222TESTESTEST22222</title>
</head>
<body>
<% for (var i = 0; i < 5; i++) { %>
<h1>안방으로 <%= i+1 %>번째 들어왔습니다.</h1>
<% } %>
</body>
<script>
var test = |<%= "test1" %>";
alert(test);
</script>
</html>
이렇게 고치면 된다.
[3][3] 서버에서 넘겨준 변수 사용하기
const express = require("express"); const ejs = require("ejs"); const bodyParser = require('body-parser'); // body-parser 요청 const app = express(); app.set("view engine", "ejs"); app.use(bodyParser.urlencoded({extended: false})); // urlencoded app.use(bodyParser.json()); // json 타입으로 파싱하게 설정 app.use(express.static(__dirname + '/')); app.get("/", function(req, res){ res.render("test1", {}); }); app.get("/hello", function(req, res){ // 수정된 부분 res.render("test2", { one : "this is one", two : "this is two" }); // 수정된 부분 }); app.post("/postTest", function(req, res){ // postTest라는 주소로 POST요청이 들어오면 실행 console.log(req.body); // body에 있는 정보를 콘솔창에 출력. res.json({ok:true, name:req.body.name}); // 클라이언트에 성공했다고 신호를 보냄. }); app.listen(3000, function(){ console.log("실행중..."); });
이렇게하면 이제 test2.ejs로 변수 one과 two가 넘어가게 된다. 그러면 test2.ejs로 넘어가 one과 two를 써보면 된다. 방법은 간단하다. 그냥 넘겨진 변수명을 그대로 쓰면 된다.
<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>
안방에 몇 번 들어가는 걸까
별 다른 방법 없이 그냥 서버에서 넘긴 변수명을 쓰면 ejs에서 그대로 가져와 쓸 수 있다.
[3][4] <% %>, <%= %> 사용 시 유의점
가장 중요한 부분이다. 모른채로 직접 부딪혀 봐도 이해하는 데는 어렵지 않으나 미리 알고가면 더 좋다.
0. <% %>는 한줄로 쭉 써야된다.
말 그대로이다. 위에서 말했듯 <% %>안에 코드를 쓰다 개행을 하면 다시 <% %>를 써서 코드를 진행해야한다.
1. <% %>로 변수 선언을 하면 스코프 적용이 된다. ejs 내 자바스크립트와 <% %>안의 변수명은 겹쳐도 따로 인식된다.
전역변수와 지역변수의 개념이 html 코드 안에서 똑같이 적용된다. 만약 <script> 태그 안의 코드와 <% %>를 같이 쓰다가 변수명이 겹친더라도 걱정하지 말길. html 내 코드와 <% %> 내 코드는 분리되어 있다.
2. var a = <%= 1 %>;은 되지만 <% var a %> = 1;은 안된다.
내장된 코드의 값을 html 파일로 불러오는 것은 되지만 내장시킬 코드에 html 파일에 있는 값을 넣는 것은 불가능하다.
3. <%= 문자열 변수 %>는 코드 해독 때 문자열로 인식되지 않는다.
<%= %> 태그는 해당 변수의 값을 그대로 코드로 박아넣는 것이기 때문에 변수형을 가리지 않는다. 선언되지 않은 변수이면 undefined라는 코드를 그대로 갖다 넣는다. 그렇기 때문에 문자열로 저장하려면 "<%= %>" 식으로 써야된다.
4. <% %> 내 코드는 개발자 모드로 볼 수 없다.
내장된 <% %> 자바스크립트 코드는 개발자 모드로 봐도 안보인다. 위에 있는 안방에 들어왔습니다. 예시는 따라해보고 개발자 모드로 보면 <h1> 코드 5개만 달랑있을 것이다. <%= %>는 코드로 심어버리는 거라 보인다.
5. 괄호 여닫기를 똑바로 하자.
어느 코드에나 해당되는 말이지만, ejs를 쓸 때 헷갈릴 수도 있다. <% %>태그 때문이다. 개행을 하면 <% %>를 새로 써야되기 때문에 중괄호를 열었다면 끝에 항상 <% } %>가 있는지 확인하자. ejs 코드가 길어지면 좀 어지럽다.
[출처] https://yahohococo.tistory.com/43
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
