express 에서 jade 를 통한 웹구현

express 의 경우 기본 템플릿은 jade 로 설정되어 있습니다. 기본인 만큼 간편하면서 강력한 템플릿 엔진인 jade!

간단한 예제로 쭈욱! 살펴 보겠습니다. 

1. 먼저 express 명령어를 이용하여 jade 프로젝트를 생성합니다. 아래의 명령어를 실행면 express_jade 폴더가 생성됩니다. 

2. 생성된 express_jade 폴더로 이동후

npm 명령어를 통해 관련 모듈을 설치해 줍니다.

3. 실행! 참고로 기본 포트가 3000으로 되어 있습니다.(이경우 당연히 app.js 에서 바꿔주면 되겠지요?)

http://127.0.0.1:3000

express의 구조는 다음과 같습니다. 

   + node_moudles : 이 프로젝트용 모듈 설치 디렉 토리

   + public : 이미지, css , javascript 파일

   + routes : 페이지 모델 부분 소스들 

   + views : view 소스들 

   app.js : 서버 소스

으로 되어 있습니다. 

3. 먼저 routes 폴더를 보시면 해당 페이지가 로드 될때 넘겨 주는 데이터 부분을 관장합니다.

현재 디폴트로 생성된 routes 의 파일은 index.js 와 uers.js  입니다. 여기서 index.js 를 열어 봅니다. 

기본소스는 다음과 같습니다. 

여기서 title 의 'Express' 데이터가 화면에 출력되는것입니다. 여기서 추가로 name:'uiandwe' 을 한다음 view 부분을 고쳐 봅니다. (소스 수정후 는 아래)

4.  views 폴더의  index.jade 을 열어 봅니다. 아래와 같이 소스가 되어 있을 겁니다. extends 는 layout.jade 의 확장을 block 는 layout 에서의 content 부분의 연결을 의미합니다. (이부분은 아래에 설명하겠습니다.)

먼저 우리는 파라미터로 데이터를  하나더 받기로 했습니다. name 의 uiandwe 데이터 이지요?

아래의 소스에선 p Welcom to #{title} 부분이 바로 데이터를 받는 부분인것을 쉽게 알수 있습니다. 아래에 소스를 추가해 보도록 하겠습니다. 

5. 실행 해볼까요? 따란~ 우리가 원하던 데이터(name:uiandwe)가 정상적으로 출력됩니다. 

jade 의 문법은 하위 구조가 탭으로 계층이 구분됩니다. 처음엔 어색할지 몰라도 view 소스가 간단해 집니다.

(단 jade 파일 내의 javascript 의 경우 계층이 아닌 문법은 오직 한줄안에서 표현되어야 합니다!! 아니면 에러가 납니다!)

jade 의 기본적인 문법과 설명은 여기를 참조 하시기 바랍니다. http://jade-lang.com

6. jade가 탬플릿 엔진인 만큼 layout.jade 와 index.jade 에서 확장하여 footer.jade 를 더한 예제를 보겠습니다. 

아래의 소스들은 views폴더의 파일을 수정하거나  새로 생성하시면 됩니다. 

layout.jade 소스

footer.jade 소스

7. 해당 화면으로 들어가 보면 footer.jade 파일이 하단에 붙어서 출력되는것을 확인할수 있습니다. 

8. header.jade 도 넣어볼까요? 이번엔 index.jade 파일에 넣어 보겠습니다. 

index.jade 소스

header.jade 파일 소스

9. 해당 소스를 실행 해보면 아래와 같이 화면이 나오게 됩니다. 탬플릿모듈인 만큼 반복되는 페이지들은 이처럼 쉽고 간편하게 넣을수 있습니다. 여기에 javascript 로 경우에 따라 페이지들을 조절하면 우리가 보는 웹페이지를 만들수 있습니다. 

 - 혹시 jade 문법이 어려울 경우 html 로 먼저 완성뒤 http://html2jade.aaron-powell.com 에서 변환하셔도 됩니다.