Jade

Node.js에서 기본적으로 사용되는 view 템플릿 엔진입니다.

HTML 문서에 비해 축약형 문법이며, Tag를 일일이 열고 닫고 할 필요가 없이 들여쓰기를 통해 구분됩니다.

익숙해진다면 확실히 빠르고 편한 코딩이 가능한 엔진입니다.


사용법

우선 Express에서 기본적으로 제공하는 jade 파일을 통해 알아보도록 하겠습니다.

 Jade(layout.jade)

 HTML

doctype html

html

  head

    title= title

    link(rel='stylesheet', href='/stylesheets/style.css')

  body

    block content

<!DOCTYPE html>

<html>

  <head>

    <title></title>

    <link rel="stylesheet" href="/stylesheets/style.css">

  </head>

  <body>

  </body>

</html>

우선 가장 두드러진 차이점은 위에서 설명했다시피 Tag를 열고 닫지 않으며, 대신 들여쓰기로 구분하게 됩니다.

속성은 ()괄호를 이용하여 javascript와 비슷하게 (, )로 구분하여 설정합니다. 

index.js 

 router.get('/', function(req, res, next) {

  res.render('index', { title: 'Express' });

});


또한 자신을 호출한 index.js에서 인자로 넘겨받은 title 변수를 사용합니다.

그리고 또 하나의 편리한 점은 block을 통해 템플릿 상속이 가능하다는 것입니다.

아래처럼 extends 지시어를 통해 레이아웃을 확장할 수 있습니다.

 Jade(index.jade)

 HTML

 extends layout


block content

  h1= title

  p Welcome to #{title}

 <h1></h1>

<p>Welcome to</p>

Tag에 변수를 넣고 싶을 때는 =기호를 사용하고 문자열 사이에 넣고 싶을 때는 #{변수명}을 사용합니다.


이외의 자세한 문법은 여기를 참고하세요.

'Node.js' 카테고리의 다른 글

HTTP 요청, 응답 이해하기(Express 프로젝트 기준)  (0) 2017.02.01
socket.io server 만들기  (0) 2016.11.25
npm, express  (0) 2016.11.18

HTTP Server 객체 생성

HTTP Server 객체를 생성하기에 앞서 HTTP 객체를 생성합니다.

var http = require('http');

Express 설정 파일이 담겨있는 app.js 파일을 불러와 서버 객체를 생성합니다.

(app.js 등 express 구조에 대한 자세한 설명은 http://dutax.tistory.com/6)

var app = require('../app');

var server = http.createServer(app);

Server 객체의 listen() 함수를 호출하면 클라이언트의 요청을 수신할 수 있게 됩니다.

port는 따로 설정하지 않으면 3000번 포트로 설정됩니다.

server.listen(port);


요청 객체(Request)

클라이언트의 요청 데이터를 받아옵니다.

Request의 함수(Methods)

req.params : 이름 붙은 라우트 파라미터를 담는다. ex : app.post(’/:idx’)

req.params(name) : 이름 붙은 라우트 파라미터나 GET, POST 파라미터를 담는다. 하지만 여러가지 혼란을 줄 수 있어 사용하는 것을 지양해야한다.

req.query : GET 방식으로 넘어오는 쿼리 스트링 파라미터를 담고 있다.

req.body : POST 방식으로 넘어오는 파라미터를 담고있다. HTTP의 BODY 부분에 담겨져있는데, 이 부분을 파싱하기 위해 body-parser와 같은 패키지가 필요하다.

req.route : 현재 라우트에 관한 정보. 디버깅용.

req.cookies (req.signedCookies) : 클라이언트가 전달한 쿠키 값을 가진다.

req.headers : HTTP의 Header 정보를 가지고 있다.

req.accepts([types]) : 클라이언트가 해당하는 타입을 받을 수 있는지 확인하는 간단한 메서드.

req.ip : 클라이언트의 IP Address

req.path : 클라이언트가 요청한 경로. 프로토콜, 호스트, 포트, 쿼리스트링을 제외한 순수 요청 경로다.

req.host : 요청 호스트 이름을 반환하는 간단한 메서드. 조작될 수 있으므로 보안 목적으로는 사용하면 안된다.

req.xhr : 요청이 ajax 호출로 시작되었다면 true를 반환하는 프로퍼티

req.protocol : 현재 요청의 프로토콜 (http, https 등)

req.secure : 현재 요청이 보안 요청(SSL?) 이면 true를 반환

req.url (req.originalUrl) : URL 경로와 쿼리 스트링을 반환. 원본 요청을 logging하는 목적으로 많이 쓰임.

req.acceptedLanguages : 클라이언트가 선호하는 자연어 목록을 반환. header에서 파싱하면 다국어를 지원한는 어플리케이션이라면 초기 언어 선택에 도움을 줄 수 있음.


응답객체(Response)

클라이언트에게 데이터를 전송합니다.

Respone의 함수(Methods)

res.status(code) : HTTP 응답 코드를 설정한다. 응답 코드가 redirect(30x)라면 res.redirect를 쓰는게 낫다.

res.set(name, value) : 응답 헤더를 설정. 일반적으로 직접 쓸 일은 없다.

res.cookie(name, value, [options]) : 클라이언트에 저장될 쿠키를 설정하거나 제거한다. cookie-parser 패키지가 필요하다.

res.redirect([status], url) : redirect. 기본 응답 값은 302다.

res.send(body), res.send(status, body) : 클라이언트에 응답을 보냄. 상태 코드는 옵션. 기본 콘텐츠 타입은 text/html이므로 text/plain을 보내려면 res.set(‘Content-Type’, ‘text/plain’)을 먼저 호출 해야한다. JSON을 보낼거면 res.json을 쓰자.

res.json(json), res.json(status, json) : 클라이언트로 JSON 값을 보냄.

res.jsonp(json), res.jsonp(status, json) : 클라이언트로 JSONP 값을 보냄.

res.type(type) : Contents-Type 헤더를 설정할 수 있는 간단한 메서드.

res.format(object) : Accept 요청에 따라 다른 콘텐츠를 전송할 수 있는 메서드. 잘 안 쓸듯.

res.attachment([filename]), res.download(path, [filename], [callback]) : 클라이언트에게 파일을 표시하지 말고 다운로드 받으라고 전송함. filename을 주면 파일 이름이 명시되며, res.attachment는 헤더만 설정하므로 다운로드를 위한 node 코드가 따로 필요핟.

res.sendFile(path, [options], [callback]) : path의 파일을 읽고 해당 내용을 클라이언트로 전송한다.

res.links(links) : Links 응답 헤더를 설정한다. 별로 필요 없을 듯.

res.locals, res.render(view, [locals], callback) : res.locals는 뷰를 렌더링하는 기본 콘텍스트를 포함하는 객체다. res.render는 jade와 같은 템플릿 엔진을 사용하여 뷰를 렌더링한다. 뷰 렌더링 세계는 심오하므로 여기서는 자세히 쓰지 않는다.


출처: http://luckyyowu.tistory.com/346


'Node.js' 카테고리의 다른 글

Jade 이해하기  (0) 2017.02.02
socket.io server 만들기  (0) 2016.11.25
npm, express  (0) 2016.11.18

Socket.io

Javascript를 이용하여 실시간 어플리케이션을 구축할 수 있도록 하는 엔진.

양 방향의 이벤트 기반의 통신이 가능하고, 모든 플렛폼과 장치에서 동작



기본적인 socket.io 서버

socketio_server.js

// socketio_server.js
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
server.listen(80);

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/sample1.html');
});

io.on('connection', function(socket) {
  // 접속한 모든 클라이언트에 전달
  socket.emit('news', { hello: 'world' });

  // Client로 부터 수신받는 event
  socket.on('feedback', function(data) {
    console.log(data);
  });
});

sample1.html

<!-- sample1.html -->
<script src="/socket.io/socket.io.js"></script><p>
</p><script>
  var socket = io();

  socket.on('news', function(data) {
    document.write(JSON.stringify(data));
    socket.emit('feedback', { hello : 'world2' });
  });
</script>


socket.io를 이용한 간단한 채팅 서버

s_chat_server.js

// s_chat_server.js
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(80);

// 기본 접속 경로
app.get('/', function(req, res) {
  res.sendFile(__dirname + '/sample2.html');
});

// 첫번째 접속
var sock = undefined;
// 외부 접속시 처리
io.on('connection', function(socket) {
  // 접속한 모든 클라이언트에 전달
  socket.emit('news', { hello: 'world1' });

  if( !sock) {
    sock = socket;
  }

  // Broadcast
  socket.on('broadcast', function(data) {
    console.log('Broadcast: ' + data);
    socket.broadcast.emit('msg', data);
  });

  // Unicast
  socket.on('unicast', function(data) {
    console.log('Unicast: ' + data);
    socket.emit('msg', data);
  });

  // Send All!
  socket.on('sendall', function(data) {
    console.log('Sendall: ' + data);
    io.emit('msg', data);
  });
});

sample2.html

<!-- sample2.html -->
<html>
  <head>
    <title>Hello Pi!</title>
    <script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
    <script src='/socket.io/socket.io.js'></script>
    <script>
    $(function() {
      var socket = io();
      var id = 'Guest..' + Math.floor((Math.random() * 10) + 1);

      socket.on('msg', function(data) {
        $('#msgs').append($('<p>').text('ID: ' + data.id + ': ' + data.msg));
      });

      var sendMsg = function(type) {
        var msg = $('input').val();
        $('#msgs').append($('<p>').text('ME: ' + id + ': ' + msg));
        socket.emit(type, { id: id, msg: msg});
        $('input').val('');
      }

      $('#unicast').click(function() {
        sendMsg('unicast');
      });

      $('#broadcast').click(function() {
        sendMsg('broadcast');
      });

      $('#sendall').click(function() {
        sendMsg('sendall');
      });
    });
    </script>
  </head>
  <body>
    <input type='text' />
    <p/>
    <button id='unicast'>Unicast</button>
    <button id='broadcast'>Broadcast</button>
    <button id='sendall'>Sendall</button>
    <div id='msgs'/>
  </body>
</html>


'Node.js' 카테고리의 다른 글

Jade 이해하기  (0) 2017.02.02
HTTP 요청, 응답 이해하기(Express 프로젝트 기준)  (0) 2017.02.01
npm, express  (0) 2016.11.18


NPM(Node Packaged Modules)

Node.JS 에서 사용되는 모듈을 패키지로 모아놓은 것입니다.

초기 버전에서는 별로로 설치해줘야 했지만, 지금은 node 가 설치되면서 자동으로 npm 이 설치가 됩니다.


주로 사용되는 명령어

npm install 패키지명 : 패키지 파일을 찾아서 설치를 합니다.

npm list installed : 현재 설치되어 있는 패키지를 보여줍니다.

npm update 패키지명 : 설치된 패키지를 최신버전으로 업데이트 합니다.



Express.JS

Node.JS 에서 가장 많이 사용하는 웹 어플리케이션 프레임워크입니다.

쉽고 빠른 API 구성을 위한 HTTP 기능 및 미들웨어를 가지고 있습니다.


설치

$ node --version
$ npm --version

Express를 설치하기에 앞서 node와 npm 설치 유무를 확인합니다.

$ npm install express -g

npm을 명령어를 이용하여 Express를 설치합니다.

-g 옵션을 추가하면 글로벌(global)로 모듈을 설치한다는 의미입니다.

$ npm install -g express-generator

만약 Express 명령어를 찾을 수 없다고 나온다면, expresss-generator를 설치합니다.

$ express my-app

Express 설치를 완료하면 간단하게 위의 명령어를 통해 my-app 폴더를 생성하고 서버 구동에 필요한 파일들이 설치됩니다.


구조


package.json : 프로그램 이름, 버전 등 노드 프로그램의 정보를 기술합니다. 또한 필요에 따라 다양한 모듈과 함께 사용하는데 이러한 모듈들의 목록을 package.json에 나열합니다. npm은 이 정보를 참고하여 필요한 모듈을 모두 설치할 수 있는 것입니다.

bin/www : 서버 구동을 위한 코드가 기록되어 있습니다. 익스프레스 서버 설정 코드가 기록된 app.js 파일을 가져와 노드의 HTTP 객체와 연동하는 작업이 이루어집니다.

app.js : bin/www 에서 사용되는 이 파일은 익스프레스 설정 파일이 담겨있는 핵심 코드입니다. 아래는 주요 설정 코드입니다.

  • morgan : 클라이언트의 HTTP 요청 정보를 로깅하기 위한 모듈

  • body-parser : 클라이언트의 HTTP 요청 중 POST 요청의 바디 데이터에 접근하기 위한 모듈

  • cookie-parser : 접속한 클라이언트의 쿠키 정보에 접근하기 위한 모듈

  • express.static() : 정적 파일 호스팅을 위한 경로 설정

  • app.use('/', routes) : 라우팅 설정. 세부 라우팅은 /routes 폴더에 구현됨

/routes : 라우팅을 위한 폴더입니다. 라우팅 리소스 별로 모듈을 만들어 라우팅 로직을 각 파일에 구현합니다.

/views/index.jade : 템플릿 파일인 제이드(Jade) 파일입니다. 이 파일을 제이드 엔진을 통해 HTML 코드로 변환됩니다. 라우팅 로직 중 render() 함수에서 파라미터로 이 파일을 사용합니다.

/public : 정적 파일을 위한 폴더로서 자바스크립트 파일, 이미지 파일, 스타일시트 등을 포함합니다. HTML 파일에서 해당 파일을 호출하면 내려주는 역할을 합니다.


프로젝트 폴더 생성

$ express my-app

express 명령어를 사용하여 my-app 프로젝트 폴더를 생성합니다.

/my-app$ npm install

package.json에 기술되어 있는 dependencies 값을 이용하여 의존성 모듈을 설치합니다. 다운로드 된 모듈들은 node_modules 폴더에 저장됩니다.

/my-app$ npm start

별도의 설정이 없다면 /bin/www 에 기술되어 있는 3000번 포트를 통해 웹 페이지를 구동합니다.

'Node.js' 카테고리의 다른 글

Jade 이해하기  (0) 2017.02.02
HTTP 요청, 응답 이해하기(Express 프로젝트 기준)  (0) 2017.02.01
socket.io server 만들기  (0) 2016.11.25

+ Recent posts

티스토리툴바