view 템플릿 ejs 그리고 jade 차이
안녕하세요.
고코더 입니다.
프로젝트 설치부터 서버 실행 까지 실습을 마무리 했습니다.
오늘은 잠깐 코드 실습에 들어가기 전에
꼭 알아야 할 view 모듈인
ejs와 jade를 알아 보는 시간을 갖겠습니다.
● 1. jade 란?
● 1-1. 이전 시간까지 따라온분들은
해당 폴더로 이동해서 index.jade 파일을 열어보세요.
D:\node\gocoder\views\index.jade
이게 뭔가 싶은 생각 듭니다. express 기본 옵션을 사용하여 프로젝트를 생성하면 view 모듈은 .jade(제이드)가 기본입니다.
● 1-2. jade란?
노드에서 만들어낸 새로운 view 템플릿 엔진입니다.
jade 문법으로 코드를 작성하면 이걸 다시 HTML로 반환합니다. 이 문법을 살펴보면 생각보다는 단순 합니다.
h1 은 '프로젝트 이름이 들어가고
p태그에는 welcom to '프로젝트 이름'을 들어가고
1 2 3 4 5 | extends layout block content h1= title p Welcome to #{title} | cs |
● 1-3. 노드는 자동으로 jade 문버을 HTML 태그로 해석합니다.
이론상으로는 디자인도 코드화 해서 쉽게 관리 할 수 있는 구조 입니다.
노드는 이걸 기본으로 옵션으로 제공합니다.
아래는 idex.jade가 해석된 HTML 코드 입니다.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html><html> <head> <title>Express</title> <link rel="stylesheet" href="/stylesheets/style.css"> </head> <body> <h1>Express</h1> <p> Welcome to Express </p> </body> </html> | cs |
● 1-4. 하지만 jade 템플릿을 쓸려면 디자이너들도 코드를 익혀야 합니다. 혼자 개발한다면 연습겸 할 수 있지만 퍼블리셔 디자이너에게 jade 문법으로 작성해달라고 하는건 무리가 있습니다. 노드에 바람과 달리 한국 현업에서는 거의 볼수 없는 구조입니다.
● 2. ejs란?
● 2-1. ejs 코드를 보면 HTML 구조에 <%%> 태그를 열어
소스코드를 집어넣는 우리가 많이 보아온 구조 입니다.
● 2-2. 익숙하고 디테일한 작업이 가능한 HTML로 되어 있기에 거의 모든 현업에서는 이걸 사용하게 됩니다.
그리고 기존에 있는 프론트 디자인도 그대로 사용할 수 있습니다. 제 강의에서는 ejs로 실습을 하겠습니다.
마무리
jade를 쓰다보면 유지보수와 개발이 편한 모듈입니다.
그럼 뭐하나요. 디자이너는 무슨 죄라고 그래서 ejs를 써야 합니다.
'IT_Developers > Node.js' 카테고리의 다른 글
| Node.js - nodemon 설치, 실행방법 / webstorm 연동 (2) | 2019.07.29 |
|---|---|
| Node.js - Webstorm으로 express 프로젝트 ejs로 생성하기 (0) | 2019.07.29 |
| Node.Js - Express 서버 실행 / hello Express(node) / Port 변경 (2) | 2019.07.28 |
| Node.Js - Express 프로젝트 생성하기 / package.json 설치 (0) | 2019.07.27 |
| Node.js - Express 프레임워크 설치하기 (0) | 2019.07.27 |
댓글