초보몽키의 개발공부로그

Express-템플릿 엔진 (Jade)

18 Feb 2017 | nodejs Express jade template engine

Express-템플릿 엔진 (Jade)

생활코딩 Node.js 강의
템플릿 엔진의 개념과 템플릿 엔진의 한 종류인 Jade를 사용하는 방법을 알아본다.

jade의 이름이 pug로 변경되었다. 참고

소개

  • 템플릿 엔진이란 동적인 파일과 정적인 파일의 장단점을 잘 결합한 형태의 새로운 체계이다.
  • jade는 node.js용으로 만들어진 view 템플릿 엔진이다.
  • jade 문법에 맞게 작성하면 해당 내용을 html이나 자바스크립트로 만들어 준다.
  • jade syntax 참고

템플릿 엔진 사용하기

  1. 템플릿 엔진 어플리케이션 설치 (Jade)
    • express 자체는 템플릿 엔진의 기능을 갖고 있지 않기 때문에, 템플릿 엔진을 따로 설치할 필요가 있다. 
      // 템플릿 엔진 jade 설치 (터미널)
npm install jade --save
  2. Jade와 express 연결
    • express가 jade를 렌더링 하려면 아래와 같은 2가지 어플리케이션 설정이 필요하다.
    • express에게 template view engine을 알려주는 설정
      app.set('view engine', 'jade')
    • express에게 template 파일이 모여있는 디렉토리를 알려주는 설정
      app.set('views', './views') 
      // app.js (main file)
app.set('view engine', 'jade')
// 사용할 view engine을 express에게 알려주는 코드
// express 프레임워크와 jade 엔진을 연결!
app.set('views', './views')
// 템플릿이 있는 디렉토리를 express에게 알려주는 코드 (생략가능, 디폴트 경로 ./views)
  3. 템플릿 렌더링
    • 템플릿 엔진이 적용된 페이지의 라우터를 추가한다. 
      app.get('/template', function(req, res){
 res.render('temp');
})
// 템플릿 엔진의 소스코드를 가지고 와서 웹페이지를 만들어 내는 res 객체의 메소드
  4. 렌더링된 페이지 확인
    • http://localhost:3000/template 경로로 get방식으로 접속한 사용자에게 fucntion이 실행이 되면서 ‘temp’라는 템플릿 파일을 렌더링해서 웹페이지로 전송한다.

템플릿 엔진 Jade의 사용법과 문법

기본문법

  • jade syntax 참고
  • /views/temp.jade 파일 작성
  • 코드내용 (temp.jade) 
      html
    head
      title= _title
    body
      h1 hello Jade
      ul
        -for (var i=0; i<5; i++)
          li coding
      div= time
  • 렌더링 결과 
      <html>
  <head>
    <title>Jade</title>
  </head>
  <body>
    <h1>hello Jade</h1>
    <ul>
      <li>coding</li>
      <li>coding</li>
      <li>coding</li>
      <li>coding</li>
      <li>coding</li>
    </ul>
    <div>Sat Feb 18 2017 17:50:48 GMT+0900 (KST)</div>
  </body>
  </html>

변수 사용방법

  • 변수의 정의는 jade 밖의 jade를 사용하는 express 에서 선언 
    // app.js
app.get('/template', function(req, res){
  res.render('temp', {time: Date(), _title: 'Jade'});
  //.reder() 매소드의 2번째 인자로 템플릿 파일에서 사용할 변수를 객체에 담아서 정의
})
  • 변수의 사용은 jade 파일 내에서 아래와 같이 입력 
    body
  p #{time}
  p #{_title}
  • 참고) 렌더링된 html 파일이 편하게 출력되게 하려면 아래 코드 추가
    (구글 검색 키워드 : express jade html pretty) 
    // app.js
app.locals.pretty = true;

Express-동적파일을 서비스 하는 법

18 Feb 2017 | nodejs Express static

Express-웹페이지를 표현하는 방법

생활코딩 Node.js 강의
웹페이지를 정적으로 만드는 방법과 동적으로 만드는 방법의 장점과 단점을 살펴본다.

정적인(static) 파일을 전달하는 방법

  • express에게 정적인 파일이 모여있는 디렉토리 경로를 알려준다. app.use(express.static('public'));
  • 정적인 파일의 디렉토리로 설정한 public 폴더 내에 static.html 파일을 작성한다.
  • 해당 페이지는 http://localhost:3000/static.html 경로를 통해서 접근 가능하다.
  • 정적인 파일의 변경사항은 node application의 재기동 (터미널에서 node app.js 입력) 없이도 바로 반영시킬 수 있다.

동적인(dynamic) 파일을 전달하는 방법

  • app.js 파일 (main file) 내에 라우터를 추가한다. 
    app.get('/dynamic', function(req, res){
  var lis = '';
  for(var i = 0; i <5; i++){
      lis += '<li>coding ' + i + '</li>';
  }
  // 자바스크립트 새로운 표준 formatted text 기능
  // ` `(grave accent) 사용을 통해서 JS에서 여려줄의 코드를 넣을 수 없는 문제를 해결
  var output =
  `<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
      hello Dynamic html~~!
          <ul>
              ${lis} <!--문자열 내에서 변수 사용-->
          </ul>
    </body>
  </html>`;
  res.send(output);
});
  • 터미널에 node app.js 입력 후, http://localhost:3000/dynamic 경로를 통해서 결과 확인한다.
  • 동적인 파일의 변경사항은 node application의 재기동이 필요하다.

장단점

정적인 파일 (static)

  • 장점
    • 작성이 편리하다
    • 변경내용 적용을 위해 node application의 재기동이 필요하지 않다.
    • app.js에 라우터 설정이 필요없다. (http://localhost:3000/sample.html 처럼 파일명으로 바로 접속 가능)
  • 단점
    • 반복, 변수 등의 프로그래밍적인 요소를 사용할 수 없다.

동적인 파일 (dynamic)

  • 장점
    • 반복, 변수 등의 프로그래밍적인 요소를 사용할 수 있다.
  • 단점
    • js안에서 html작성이 까다롭다.

템플릿 엔진

  • 정적인 것의 장점과 동적인 것의 장점을 합친 방법
  • 라우터 설정 필요, html 작성 편리, 변수 사용 가능, 수정 후 재기동 불필요
  • 템플릿 엔진 jade 알아보기

Express-정적파일을 서비스 하는 법

18 Feb 2017 | nodejs Express

Express-정적파일을 서비스하는 법

생활코딩 Node.js 강의
이미지나 텍스트 파일와 같은 정적인 파일을 서비스하는 방법을 다룬다.

Express에서 정적 파일 제공

  • 가이드 문서 참고
  • 서버를 시작하는 코드 내에 아래 코드 추가 
    app.use(express.static('public'));
// public : **정적인 파일이 위치할 디렉토리의 이름**
  • public 폴더 내에 bento.png 이미지 파일 생성
  • http://localhost:3000/bento.png 로 접속하면 이미지 출력
  • http://localhost:3000/bento 로 접속했을때 bento.png 이미지가 출력되도록 하는 코드 
    app.get('/bento', function(req, res){
  res.send('hello bento! <img src="/bento.png">')
})

정적인 파일이 접근할 라우터 path 설정

express.static 함수를 통해 제공되는 파일에 대한 가상 경로

app.use('/users', express.static('uploads'));
  • 이를 통해서 /users 경로를 통해 uploads 디렉토리에 포함된 파일을 로드할 수 있음
    (ex. http://localhost:3000/users/siwa.png)

Express-간단한 웹에플리케이션 만들기

18 Feb 2017 | nodejs Express

Express-간단한 웹에플리케이션 만들기

생활코딩 Node.js 강의
Express 프레임워크를 사용하여 간단한 nodejs 웹에플리케이션을 만든다.

예시 - 코드작성

  • entry app 만들기 (app.js) express 가이드 참고
  • main(entry) app, main(entry) file
    가장 최초로 실행되는, 진입점이 되는 어플리케이션
  • app.js 코드작성
    • 앱은 서버를 시작하며 3000번 포트에서 연결을 청취 app.listen(포트번호)
    • 앱은 루트 URL(/) 또는 라우트에 대한 요청에 res.send(응답내용)으로 응답
  • 예시 코드에 익숙해질 필요가 있음
var express = require('express');
var app = express();

app.get('/',function(req, res){
// 사용자가 root 디렉토리 (/)에 접속했을때!
// 여기서 get을 라우터라고 한다 (라우팅 : 길찾기)
	res.send('hello siwa!');
});
app.get('/login',function(req, res){
	res.send('<h1>login please siwa!</h1>');
});

app.listen(3000, function(){
	console.log('connected 3000 port!');
});

예시 - 코드실행

  • 터미널에서 node app.js 입력하여 파일을 실행
  • 브라우저에 http://localhost:3000, http://localhost:3000/login 로 접속하여 결과 확인

Express-도입 및 설치

18 Feb 2017 | nodejs Express

Express-도입 및 설치

생활코딩 Node.js 강의
Nodejs로 웹에플리케이션을 직접 만드는 방법을 다시 한번 살펴보고 Express를 사용하는 이유에 대해서 살짝 살펴본다.

간단한 정의

  • 노드를 사용해서 직접 웹어플리케이션을 만드는 것은 손이 많이 감
  • 이를 간단하게 만들어주는 다양한 도구들이 있음
  • 그 중에 하나가 express 라는 노드를 사용하여 만든 프레임워크

설치

  • express 홈페이지 참고
    • 터미널에서 npm init을 통해 해당 프로젝트 폴더를 npm 패키지로 만든다.
    • npm install express --save –save 옵션을 통해서 package.json파일 의존성을 명시한다.
    • node_modules 폴더에 파일이 설치되고 완료!