Express Framework Tutorial (New Ver.)

1. Node.js 는 여러 종류의 웹 개발 framework를 제공한다!
Paypal이 내부 시스템을 대규모로 node.js로 전환하면서!
오픈소스화한 KarkenJs , Meteo 등 여러가지 framework가 있다!
!
그 중 가장 많이 사용되는 프레임워크는
EXPRESS!
!
Express 는 웹페이지 개발 및 REST API 개발에 !
최적화된 framework로서 매우 사용하기가 쉽다

2. EXPRESS
NEW VERSION TUTORIAL
Fast, unopinionated, minimalist web framework for Node.js
YNCA STUDY 2ND –EXPRESS
BY NHN NEXT 류우림
DIRECTOR.RYU

3. EXPRESS MODULE
http 모듈에 여러 기능을 추가해서
쉽게 사용할 수 있게 만든 모듈
작고 빠르다

4. EXPRESS FRAMEWORK
express 모듈로 만든 프레임워크
!
프로젝트를 손쉽게 만들어준다
기본적인 뷰 지원, 세션 지원
!

5. EXPRESS INSTALL
콘솔창에서 (Mac OS)!
$sudo npm install express -g!
[ sudo ] password for USER : ****
$ sudo npm install -g express-generator

6. DIRECTORY
디렉토리 생성하고,!
그 안에 express 응용 프로그램 생성하기!
[~] $ mkdir blackANDwhite
[~] $ cd blackANDwhite
[blackANDwhite] $ express blackANDwhite
--sessions --css stylus
&& cd blackANDwhite

7. DIRECTORY
세션에 대한 지원을 위해서 —sessions 옵션을 사용한다
!
—css 를 사용하면, Stylus CSS engine을 사용할 수 있다
default : vanilla CSS

8. [blackANDwhite] $ npm install
[blackANDwhite] $ DEBUG=blackANDwhite ./bin/www
!!!
[blackANDwhite] $ DEBUG=blackANDwhite ./bin/www
blackANDwhite Express server listening on port
3000 +0ms
GET / 304 273.620 ms - -
GET /stylesheets/style.css 200 79.352 ms - 110
GET /favicon.ico 404 24.240 ms - 1302

9. INSTALL THE DEPENDENCIES
FOR THE APP
$ npm install
응용프로그램에 의해 사용되는 모듈 무리 설치하기
- 응용프로그램의 기본은 준비가 되어있다
$ node app
Express server listening on port 3000

10. LOAD
IN YOUR BROWSER
HTTP://LOCALHOST:3000/

11. LOAD
IN YOUR BROWSER

12. HOW IT WORKS
how a request to an Express server flows
!
Route → Route Handler → Template → HTML
!

13. SETTING UP THE
ROUTES
우리의 응용 프로그램에 더 적합하게,
더 논리적이게,
익스프레스의 내부 동작 이해가 더 쉽도록,
!
생성된 익스프레스를 수정하자

14. 1. routes 폴더에 있는 index.js and user.js 를 지웁시다.
(터미널에서 open routes 하면 FINDER로 열림)
!
2. routes 폴더 안에 store.js 라는 파일을 새로 생성합시다.
!
3. 그리고 밑에 코드를 store.js 파일 안에 적어넣읍시다.
!
exports.home = function(req, res){
res.render('home', { title: 'Ninja Store' })
};
!
4. Rename the index.jade file in the views folder to home.jade.

15. APP.JS
MODIFICATION
app.js 코드를 다음과 같이 수정해줍니다
주석처리 : delete 할 부분
11번, 32번 줄을 추가해줄 부분
//var routes = require('./routes/index');
9 //var users = require('./routes/users');
10
11 var store = require(‘./routes/store');
!!
28
29 //app.use('/', routes);
30 //app.use('/users', users);
31
32 app.get('/', store.home);
!
=> 홈페이지에 대한 우리의 경로를 설정했다.

16. SERVER RESTART
[blackANDwhite] $ DEBUG=blackANDwhite ./bin/www
!!!!
localhost:3000

17. !
exports.home = function(req, res){
res.render('home', { title: 'Ninja Store' })
};
!
title 변수는
=title
!=title
#{title}
를 사용해서 접근할 수 있다
!
ex) p Welcome to #{title}
p= title
p!= title

18. ROUTES DIRECTORY
지금까지 우리는 응용프로그램에 대한 하나의 경로를 만들었다.
!
우리는 routes directory에서 이름있는 파일을 생성한다.
그 파일은 우리가 app.js에서 정의내린 route를 다룬다 (처리한다).
!
우리는 이 파일들을 우리의 app으로 import 하고,
다양한 경로를 처리하기 위해 그 파일들에 기능을 할당한다.
!

19. JADE
Node Template Engine
node.js용으로 만들어진 view 템플릿 엔진
!
!
Jade 문법에 맞게 작성하면 해당 내용을
html이나 자바스크립트로 만들어 준다

20. JADE FUNCTIONS
클라이언트 사이드 지원
뛰어난 가독성
유연한 띄어쓰기
블럭 확대(block-expansion)
믹스인(mixins, 섞어쓰는 것)
스태틱 인클루드(static includes)
속성 인터폴레이션(attribute
interpolation)
보안을 위해 코드는 기본적으로 이
스케이프 처리된다.
컴파일과 런타임시에 문맥에 맞는
에러 출력
커맨드 라인을 통해 jade 템플릿을
컴파일 할 수 있음
다이내믹과 스태틱 태그 클래스 조합
필터를 이용한 트리구조 파싱 parse tree
manipulation via filters
템플릿 상속
외부 모듈로 Express JS 지원
객체, 배열, 그리고 열거형이 아닌것들에 대해서도
each 를 이용하여 투명하게 이터레이션 지원
블럭 코멘트
tag를 이용한 접두어처리 없음
AST 필터
html 5 모드 (!!! 5 doctype)
선택적인 메모리 캐싱

21. ADD FUNCTIONS
1. 이름 입력받는 칸을 만들자
2. 해당 이름으로 로그인하는 ‘로그인 버튼’을 만들자
3. LOGO.PNG 파일을 등록해서 로고를 보여주자
4. FOOTER를 추가해서 COPYRIGHT 등 내용을 추가해주자
5. FOOTER에 ABOUT/CONTACT US 컨텐츠를 추가해주자
완성된 화면

22. ADD FUNCTIONS
home.jade 파일에 아래의 코드를 입력해줍시다.
!
extends layout
!
block content
#wrapper
#logo
img(src='/images/logo.png')
#display
#login
form(method='post')
| Enter your name if you want to be a ninja
div
input(type='text', name='username')
input(type='submit', value='Log In')
#footer
div Copyright © Ninja Store #{+new Date().getFullYear()}
a(href='/page?name=about') About
| |
a(href='/page?name=contact') Contact Us
로고 추가해주기
로그인 안내문구,
이름입력칸,
로그인 버튼

23. ADD FUNCTIONS
각자 원하는 로고를 logo.png 로 저장한 뒤,
/public/images/ 디렉토리에 저장해줍시다.
!
cd public
open public 해서 images 폴더로 들어간 뒤에, logo.png 를 넣어줍시다

24. ADD FUNCTIONS
/public/stylesheets/ 디렉토리로 들어가서,
style.styl 에 밑에 코드를 넣어줍시다.
(vi style.styl 써서 터미널에서 바로 수정 가능)
body
padding: 0
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
!
a
color: #0069FF
#wrapper
width: 450px
margin: 0 auto
padding: 40px 20px
background: #fff
!
#logo
text-align: center
!
#display
margin: 20px 0 50px
!
#userbar
margin-bottom: 10px

25. ADD FUNCTIONS
home.jade 에
link(rel='stylesheet', href='/stylesheets/style.css')
를 추가해줍시다
!
=> home.jade 가 stylesheets 를 사용하기 때문에,
css를 사용한다고 알려주는 부분
!

26. SERVER RESTART !
다시, 서버를 돌려봅시다 !
!
localhost : 3000

28. ERROR:
로그인을 하면, 에러가 나죠?
!
왜?
!
아까 app.js 파일에
app.get('/', store.home); 라고 썼죠
=> get 요청만 받고 있어요
!
But, 로그인 시 Post 요청을 하고 있죠
그래서 오류가 나요

29. GET / POST
GET
클라이언트로부터의 데이터를 이름과 값이 결합된 스트링 형태로 전달
!
POST
클라이언트와 서버간에 상호 정의되어 있는 형식대로 값을 인코딩한 다음 서
버로 전송
!

30. GET VS POST
!
GET 방식
- 기본적으로 데이터베이스에 대한 질의어 데이터와 같은 요청 자체를 위한 정보를
전송할 때 사용
- GET 방식을 사용하면 이를 초과하는 데이터가 절단
- GET 방식을 사용하면 데이터가 주소 입력란에 표시되므로 최소한의 보안도 유지되
지 않음
!
POST 방식
- 데이터베이스에 대한 갱신 작업과 같은 서버측에서의 정보 갱신 작업을 원할 때 사용
- 일정한 크기 이상의 데이터를 전송할 때에는 POST 방식을 사용
- POST 방식을 사용하면 GET 방식에 비해 상대적으로 처리 속도가 늦어짐
- 클라이언트측에서 데이터를 인코딩 → 서버측에서 디코딩

31. POST REQUEST
app.js 파일에 밑에 코드를 추가해줍시다
!
app.post('/', store.home_post_handler);
!
!
store.js 파일에 이 코드를 추가해줍시다
!
exports.home_post_handler = function(req, res) {
username = req.body.username || 'Anonymous';
req.session.username = username;
res.redirect('/');
};

32. SESSION PROBLEM
세션 문제가 발생하죠?
!
!
$sudo npm install express-session
!
를 터미널에 쳐줍시다 !

33. SESSION API
app.js 파일에 다음 코드를 추가해줘요
!
var express = require('express')
var session = require('express-session')
!
var app = express()
!
app.use(session({secret: 'keyboard cat'}))

34. STORE.JS
store.js 파일에 있는 exports.home 을 밑에 코드로 대체해줍니다
!
exports.home = function(req, res) {
if (typeof req.session.username == 'undefined')
res.render('home', { title: 'Ninja Store'});
else res.redirect('/items');
};

35. SERVER RESTART
서버를 실행해봅시다
!
에러 뜨죠 ?
!
jade를 우선 나눈 뒤에, 에러를 해결합시다

36. JADE INCLUDE
views 안에 footer.jade 파일을 새로 생성해줍니다
!
#footer
div Copyright © Ninja Store #{+new Date().getFullYear()}
a(href='/page?name=about') About
| |
a(href='/page?name=contact') Contact Us

37. JADE INCLUDE
views에 userbar.jade 파일을 생성해줍니다
!
#userbar
| Welcome
b #{username}
| |
a(href='/items') Items
| |
a(href='/logout') Log Out

38. JADE INCLUDE
home.jade 파일을 수정합니다.
!
extends layout
!
block content
#wrapper
#logo
a(href='/')
img(src='/images/logo.png')
#display
#login
form(method='post')
| Enter your name if you want to be a ninja
div
input(type='text', name='username')
input(type='submit', value='Log In')
include footer
수정된 부분

39. ADD
app.js 에 items와 item을 연결해줍시다
!
// display the list of item
app.get('/items', store.items);
// show individual item
app.get('/item/:id', store.item);

40. DATABASE
store.js 파일에 추가해줍니다
!
// our 'database'
var items = {
SKN:{name:'Shuriken', price:100},
ASK:{name:'Ashiko', price:690},
CGI:{name:'Chigiriki', price:250},
NGT:{name:'Naginata', price:900},
KTN:{name:'Katana', price:1000}
};

41. ADD
store.js 에 추가해줍니다
! // handler for displaying the items
exports.items = function(req, res) {
// don't let nameless people view the items, redirect them back to the homepage
if (typeof req.session.username == 'undefined') res.redirect('/');
else res.render('items', { title: 'Ninja Store - Items', username: req.session.username,
items:items });
};
! // handler for displaying individual items
exports.item = function(req, res) {
// don't let nameless people view the items, redirect them back to the homepage
if (typeof req.session.username == 'undefined') res.redirect('/');
else {
var name = items[req.params.id].name;
var price = items[req.params.id].price;
res.render('item', { title: 'Ninja Store - ' + name, username: req.session.username,
name:name, price:price });
}
};

42. views 에 items.jade 를 생성해줍니다
!
extends layout
!
block content
#wrapper
#logo
img(src='/images/logo.png')
#display
include userbar
-for (var id in items)
- var item = items[id]
div
a(href='/item/#{id}') #{item.name} - $#{item.price}
include footer

43. views 에 item.jade 를 생성해줍니다
!
extends layout
!
block content
#wrapper
#logo
img(src='/images/logo.png')
#display
include userbar
p The #{name.toLowerCase()} is one of the must-have items for
any aspiring ninja. It costs just $#{price} on our store.
p Buy it today!
include footer

44. LOGOUT
app.js 에 추가해줍니다.
!
app.get('/logout', function(req, res) {
delete req.session.username;
res.redirect('/');
});

45. SERVER RESTART !
다시, 서버를 돌려봅시다 !
!
localhost : 3000

46. VERY GOOD !!

47. 출처/참고
!
www.hacksparrow.com/express-js-tutorial.html를 바탕으로 번역 및 코드 버전업데이트를 했습니다.