EJS 템플릿

• 템플릿 엔진?
  • 문법과 설정에 따라 파일을 html형식으로 변환시키는 모듈
• EJS?
  • Embedded JavaScript의 약자이다.
  • JS가 내장되어 있는 html파일을 의미하며 확장자는 .ejs
  • 간단히 그냥 html파일인데 js 문법을 사용할 수 있는 것으로 생각!
  • view를 동적으로 생성해주는 템플릿 언어이다.
• 얘도 설치가 필요하다.
  • npm install ejs 입력!
  • 이번에도 역시 package.json 파일에서 내용이 추가된 걸 볼 수 있다.
    

EJS 사용하기

▶️ EJS 템플릿 설정

• 설치가 되었으면 이제 EJS 템플릿을 사용하기 위한 코드를 작성한다.
• app.set()으로 Express에게 EJS를 사용할 것이라고 알려준다.

//set은 서버 객체를 설정해주는 메소드로 생각하자.
//인자는 두 개 넣을 수 있다.
//1) 바꾸싶은 설정이 가지고 있는 이름, 2) 변경 할 설정값
//app객체의 view engine 설정을 ejs로 변경하겠다.
app.set("view engine", "ejs");

//이렇게 설정이 되고 나면 새로운 express가 만들어지고
//앞으로 view engine을 사용할 때 express는 views나 템플릿이 views디렉토리 안에 있다고 가정하게 된다.
//간단히 ejs파일들이 views폴더에 모아서 담겨져 있다고 생각하면 된다!
//app객체의 view폴더 설정하게 되는 것. 아래가 기본값!
app.set("views", "./views");

//만약 ./view 폴더로 바꾸고 싶다면? 아래 형식으로 작성하면 된다.
app.set("views", "./view")

▶️ EJS 템플릿 렌더링 (파일 연결해서 가져오기)

• res.render(렌더링 할 파일 경로인 문자열) 사용해 파일이나 템플릿을 보낼 수 있다.
• 참고로 express 에서는 res.send 를 사용했다.
• http메소드 get 을 이용한다.
• render() 메소드는 이미 현재 위치의 views폴더에 ejs파일이 모여있다고 가정하기 때문에 파일 경로와 확장자는 적어주지 않아도 된다.

//폴더 구조가 [메인폴더 > ejs파일] 이고,
//[메인폴더 > test 폴더 > ejs파일]인 경우

//[메인폴더 > ejs파일] (test폴더 밖에 있는 ejs)
app.get("/ejs", function (req, res) {
  res.render("index.ejs");
});

//[메인폴더 > test 폴더 > ejs파일] (test폴더 안에 있는 ejs)
app.get("/ejs", function (req, res) {
  res.render("test/index");
});

▶️ EJS 템플릿 렌더링 (파일 연결해서 값을 내보내기)

• 이렇게 렌더링 할 수도 있다. 값을 내보낼 수 있다!
  • res.render("화면 이름", 화면에 전달할 값 {key : 'value'});
  • 어떤 차이냐면!
  • 위는 파일 자체를 렌더링해서 해당 주소로 들어가면 해당 파일이 보여지는 것이고
  • 아래 내용은 lily.ejs 라는 파일이 있다면. 그 파일에 값을 보낸다. 그리고 해당 주소를 웹브라우저에서 열었을 때, lily.ejs 기존에 작성되어있던 내용과 보내진 key 값들이 사용되어 화면에 나타난다.

app.get("/lily", function (req, res) {
  res.render("lily", {
    name: "lily",
    product: ["운동화", "후드", "슬리퍼"],
  });
});

//즉 lily.ejs 라는 파일에서 사용할 수 있는 값들을 보내준다고 보면 된다.

EJS 파일에서 사용하는 문법

• <% %>

  • JS코드가 들어가야 한다.

  • 한 줄로 작성해야 한다! 줄바꿈이 될 경우 <% %> 안에 넣어준다.

    //파일 A-----------------------------
    //product값은 res.render를 통해 아래 값이 파일B로 내보내졌다.
    app.get("/FileB", function (req, res) {
      res.render("FileB", {
        name: "lily",
        product: ["운동화", "후드", "슬리퍼"],
      });
    });
    
    //여기서 for문의 경우 중괄호가 줄바꿈이 되며 작성되었다.
    //첫 줄과 마지막 줄이 <% %>로 묶여있다.

• <%= %>

  • 값을 템플릿에 출력할 때 사용

    //파일 B-----------------------------
    <% for(let i = 0; i < product.length; i++) { %>
        <div>상품 <%=product[i] %></div>
    <% } %>
    
    //product[i]는 파일A에서 res.render를 통해 내보내진 값이다.
    //그 값을 사용하는 거기 때문에 <%= %>로 묶여있다.

• <%= %> 와 <%- %>

  • = 이 오면 뒤에 있는 값을 그대로 html로 노출시킨다. (html인식 x)

  • - 이 오면 html을 인식해서 노출시킨다.

    <%="hello" %>
    <%="<div>그대로 나온다</div>"%>
    <%-"<div>태그 안보이지</div>"%>

• <%- include(”view의 상대주소”) %>

  • 다른 view파일을 불러올 때 사용한다.

    <%-include("header.ejs") %>
    //header.ejs 라는 파일을 불러오겠다.

그래서 이걸 왜 사용해야 하는데?

• 상품목록을 모두 리스팅해서 업로드해야 한다고 생각해보자.
• 모든 상품을 다~ 입력한다면? html태그도 입력해줘야 하고 내용도 길어지고 구분하기도 힘들어진다.
• 그러니 이런 데이터들을 관련된 것들끼리 모아서 렌더링을 해주는 것! 데이터를 넘겨주고 EJS는 그걸 받아서 사용을 한다.
• EJS파일을 통해 아래처럼 작성하고 각 파일들을 렌더링한다면 관리하기에 더 깔끔하고 편하지 않을까?

<%-include("header.ejs") %>
<%-include("main.ejs") %>
<%-include("visualImage.ejs") %>
<%-include("footer.ejs") %>

• 굳이 js을 빼서 사용하는 것이 아니라 원하는 자리에 <% %> 를 통해 js 문법을 적용시킬 수 있다. 즉 원하는 공간에 js요소를 넣을 수 있으니 구조를 파악하기에도 좋을 것 같다.

---

💬

• 다행히 정리가 되었다! 수업을 들을 때에는 개념자체는 뭔가 알겠는데 연결이 안되었다. 그래서 왜 이게 나온거고 왜 사용해야하는지 모르겠는 느낌. 속도가 빠르다보니 아무래도 받아들이기만하고 머릿속에서는 정리가 안되니 뒤로 갈수록 놓쳐서 더 이해하기가 어려워지는 상황..! 그래도 차근차근 복습하고 진행해보니 이해가 되었다. 이렇게 이해하면 재밌는데 수업시간 호다닥 듣게되면 항상 멍해지는 현상이 나타난다. 그래도 나름 이해는 됐으니 이걸로 만족. 처음부터 쌩으로 나 혼자 할 수 있는가?는 절대 아니다.