오늘은 ejs에 대해서 공부했고, 그 내용을 정리해볼까 한다.
ejs는 템플릿 모듈 엔진이라고 하는데 내 기준에서는 node js에서 화면을 뿌릴 때 도움을 주는 패키지라고 이해했다. 지금으로서는 차이를 정확하게 모르겠지만 아마도 react랑 비슷한 기능을 하는 게 아닐지...
npm install ejs여타 패키지처럼 npm 명령어를 통해서 ejs를 먼저 설치해주고,
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));위의 코드를 main.js 파일에 적어줘서
1. view engine을 ejs로 설정할 것이고,
2. views 폴더의 경로를 지정해서 ejs 파일들이 들어갈 위치를 선언해준다. 여기서 __dirname 은 현재 디렉토리의 경로를 담은 예약어이다. 이렇게 말하는 게 아마 맞을 것 같다.
참고로 express를 사용중이어서 app에는 이미 express(); 함수가 실행되어 express 객체가 지정되어 있는 상태이다.
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));요런 상태가 된다.
main.js와 형제 관계에 있는 views 폴더 안에는 클라이언트 화면에 출력하고 싶은 내용을 담은 ejs 확장자로 작성된 파일들이 있는데, 그 형식이 html 파일과 거의 흡사하다.
위 그림이 ejs 파일의 내용인데 거의 일반 html 파일과 흡사하다.
흡사하다는 것은 ejs파일 내에서 우리가 아는 모든 html 코드가 동일한 방식으로 작동한다는 뜻이다. 즉, 익숙한 맛을 그대로 낼 수 있다는 것.
다만,
<%= author.name%>
<% for (const post of posts) { %>
...
<% } %>위와 같은 ejs의 문법이 파일 중간중간에 보일 것이다.
위와 같은 문법을 통해서 html파일에서 javascript를 사용할 수 있다. 주로 동일한 컴포넌트 등을 반복적으로 뿌릴 때 반복문 등을 통해서 번거로움을 줄이는 등의 작업을 하더라. 근데 아마 react의 목적도 이와 비슷하다고 하지 않았던가 생각해보면 react가 이런 아이디어를 보다 더 편하게 만든 느낌인 게 아닌가 생각한다. (아직 react를 써보지 않아서 드는 생각.)
위의 ejs 파일인 posts-list.ejs 파일을 포함해서 ejs 파일들은 반드시 views 폴더 내에 위치한다. 이 폴더 내에 위치해야 view engine이 필요한 파일(클라이언트가 보고싶어 하는 화면)을 잘 찾아서 화면에 뿌려줄 수 있다.
이 파일을 화면에 뿌려주려면 main.js 파일에서 app.get() method의 response에 render method를 활용해서 ejs파일을 클라이언트에 보내줘야 한다.
js폴더로 돌아와서 app.get() 을 통해서 요청에 따라 어떤 ejs파일을 보내줄 지 설정하면 완료! views 폴더 안에서 찾아 보내주기 때문에 ejs 확장자는 붙이지 않고 파일명만 적어줘도 된다.
그래서 대충 구조를 그려보면,
이런 순서로 진행된다고 볼 수 있다.
마지막으로, ejs 파일에서는 js파일처럼 변수를 사용할 수 있는데 ejs파일에서 사용하는 변수는 메인이 되는 js파일에서 res.render() method의 옵션으로 ejs 파일에서 사용할 변수값을 같이 입력해서 보내줘야 한다.
예를 들어서 아까 예로 들었던 위의 ejs 파일을 보면 html 태그인 option 태그 안에 ejs 문법을 통해서 author에서 _id와 name 이라는 key의 value를 가져오고 있는 모습이다. 그렇다면 여기서 요청되는 author라는 객체는 사전에 res.render() method의 option으로 전달되어야만 한다.
전달하고 싶은 변수나 함수, 그게 무엇이든 res.render() 안에 두 번째 인자로 객체를 생성하고 그 안에 key와 value를 통해 전달할 수 있다. 보통은 key와 value값으로 같은 변수명이 전달되는 경우가 많지만, 설명을 위해 변수명이 식별되도록 작성했다.
객체 내의 key값은 ejs파일 내에서 사용될 변수명으로 작성되어야 한다. ejs 파일에서 author._id 혹은 author.name 등 author라는 객체를 참조하고 있기 때문에 res.render() 내의 객체에서도 반드시 author로 입력되어야 한다. 물론 다른 변수명을 사용하고 ejs 파일에서 새로 입력한 변수명을 사용해도 된다. 주요 아이디어는 res.render() 내에 입력되는 객체의 key 값과 ejs 파일 내의 변수 이름이 반드시 일치해야 한다는 것이다.
혹시 내가 까먹으면 다시 보고 따라하려고 작성한 글이라서 아직은 두서없이 작성되었다는 느낌을 지울 수가 없지만, 그래도 뭐 매일 쓰다보면 나아지지 않을까...?
