JArchive 프로그래밍 일기

jade 템플릿을 사용법을 정리해본다. 

jade를 설치하고 jade를 express에 사용할 템플릿 엔진으로 설정한다. 

app.set() 함수를  이용한다. (코드 11번 라인)

관습적으로 jade 템플릿 코드는 views 이름의 디렉토리에 저장한다. 

템플릿 코드 파일명을 temp.jade로 하고 views 디렉토리 하위에 만든다. 

/template 경로로 들어오면 아까 만든 'temp.jade' 템플릿을 기반으로 내용을 화면에 뿌려준다.

이를 랜더링한다고 하여 res.render() 함수를 이용하여 템플릿 코드명을 안에 써준다. 

추가로 넘겨줄 객체가 있다면, 파일명 다음에 써준다. 

time 이라는 이름으로 'hello'라는 문자열이 넘어가는 코드다. 

jade 에서 html 태그를 사용할때 개행과 들여쓰기가 중요하다. 

html 태그를 여러개 쓸 때, '줄바꿈'을 하면 새 태그로 인지한다. 

그리고 들여쓰기를 해서 태그의 열고 닫음을 구분한다. 

자바스크립트 코드를 넣고 싶으면 - 마이너스를 하나 넣고 코드를 삽입한다 

jade 템플릿 코드에서 html  태그 끼리 줄바꿈을 안한다면 ?

이처럼 html head body 태그가 제대로 적용이 안된다. 

템플릿에 객체를 주입하고 싶다면? 

Date() 객체를 time이라는 이름으로 넘기고, 'Jade title' 문자열을 _title 이름으로 넘기고 싶다면.

app.js 의 app.get() 함수 내부의 코드를 수정한다. 

res.render() 안에 {} 로 감싸서 여러개의 객체를 넘길 수 있다. 

jade 템플릿에서는

title 태그 옆에 _title 이라는 변수 명을 써주고, 

div 태그 옆에 time 이라는 변수 명을 써준다. 

이 때, 주의할 점은 태그 다음에 '=' 를 꼭 써줘야 한다! 

title태그 = _title변수명

div태그 = time변수명

더 알고 싶다면! Jade template engine 홈페이지를 참조하자. 

튜토리얼 티쳐에 Jade 튜토리얼 페이지도 있다.