$$config title: [Node.js] Ejs keywords: - IT - ... $$ # Ejs(Embedded JavaScript)란? - 자바스크립트가 내장되어 있는 html 파일 # Ejs와 html에서 자바스크립트를 넣는것의 차이 - ejs는 html의 태그처럼 자바스크립트 내용을 삽입할 수 있다. 매우 큰 강점인데, 이것을 이용해 페이지를 동적으로 짜는 것이 수월해진다. 일반 html 파일은 무조건 script 태그를 이용해 분리를 시켜야하지만, ejs는 지정된 태그를 통해 스크립트 내용을 하나의 요소처럼 사용될 수 있게 한다. 또한 서버에서 보낸 변수를 가져와 사용할 수 있다 # 예시 ```js 22222TESTESTEST22222 <% for (var i = 0; i < 5; i++) { %>

안방으로 들어왔습니다.

<% } %> ``` # 결과 ![](https://ifh.cc/g/JJYfJt.jpg) # 서버에서 넘겨준 변수 사용하기 ```js 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를 써보면 된다. 방법은 간단하다. 그냥 넘겨진 변수명을 그대로 쓰면 된다. 22222TESTESTEST22222 <% for (var i = 0; i < 5; i++) { %>

안방으로 <%= i+1 %>번째 들어왔습니다.

<% } %>

<%= one %>

<%= two %>

``` # 결과 ![](https://ifh.cc/g/kKFZk0.jpg) # <% %>, <%= %> 사용 시 유의점 1. <% %>는 한줄로 쭉 써야된다. - <% %>안에 코드를 쓰다 개행을 하면 다시 <% %>를 써서 코드를 진행해야한다. 2. <% %>로 변수 선언을 하면 스코프 적용이 된다. ejs 내 자바스크립트와 <% %>안의 변수명은 겹쳐도 따로 인식된다. 3. <%= 문자열 변수 %>는 코드 해독 때 문자열로 인식되지 않는다. - <%= %> 태그는 해당 변수의 값을 그대로 코드로 박아넣는 것이기 때문에 변수형을 가리지 않는다. 선언되지 않은 변수이면 undefined라는 코드를 그대로 갖다 넣는다. 그렇기 때문에 문자열로 저장하려면 "<%= %>" 식으로 써야된다. 4. <% %> 내 코드는 개발자 모드로 볼 수 없다. - 내장된 <% %> 자바스크립트 코드는 개발자 모드로 봐도 안보인다. 위에 있는 안방에 들어왔습니다. 예시는 따라해보고 개발자 모드로 보면 h1 코드 5개만 달랑있을 것이다. <%= %>는 코드로 심어버리는 거라 보인다. 5. 괄호 여닫기를 똑바로 하자. - 어느 코드에나 해당되는 말이지만, ejs를 쓸 때 헷갈릴 수도 있다. <% %>태그 때문이다. 개행을 하면 <% %>를 새로 써야되기 때문에 중괄호를 열었다면 끝에 항상 <% } %>가 있는지 확인하자. ejs 코드가 길어지면 좀 어지럽다.