Express framework tutorial

Node.js 는 여러 종류의 웹 개발 framework를 제공한다!Paypal이 내부 시스템을 대규모로 node.js로 전환하면서!

오픈소스화한 KarkenJs , Meteo 등 여러가지 framework가 있다!!

그 중 가장 많이 사용되는 프레임워크는 EXPRESS!

!Express 는 웹페이지 개발 및 REST API 개발에 !최적화된 framework로서 매우 사용하기가 쉽다

EXPRESSNEW VERSION TUTORIAL

YNCA STUDY 2ND –EXPRESS

BY NHN NEXT 류우림 DIRECTOR.RYU

Fast, unopinionated, minimalist web framework for Node.js

작고 빠르다

http 모듈에 여러 기능을 추가해서

쉽게 사용할 수 있게 만든 모듈

EXPRESS MODULE

EXPRESS FRAMEWORK

express 모듈로 만든 프레임워크 !

프로젝트를 손쉽게 만들어준다 기본적인 뷰 지원, 세션 지원

!

EXPRESS INSTALL

콘솔창에서 (Mac OS)!

$sudo npm install express -g![ sudo ] password for USER : ****

$ sudo npm install -g express-generator

DIRECTORY

디렉토리 생성하고,!

그 안에 express 응용 프로그램 생성하기!

[~] $ mkdir blackANDwhite [~] $ cd blackANDwhite [blackANDwhite] $ express blackANDwhite --sessions --css stylus && cd blackANDwhite

세션에 대한 지원을 위해서 —sessions 옵션을 사용한다 !

—css 를 사용하면, Stylus CSS engine을 사용할 수 있다 default : vanilla CSS

DIRECTORY

[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

INSTALL THE DEPENDENCIES FOR THE APP

$ npm install

응용프로그램에 의해 사용되는 모듈 무리 설치하기 - 응용프로그램의 기본은 준비가 되어있다

$ node app Express server listening on port 3000

LOAD IN YOUR BROWSER

HTTP://LOCALHOST:3000/

LOAD IN YOUR BROWSER

HOW IT WORKS

how a request to an Express server flows !Route → Route Handler → Template → HTML !

SETTING UP THE ROUTES

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

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.

APP.JS MODIFICATION

//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);

!=> 홈페이지에 대한 우리의 경로를 설정했다.

app.js 코드를 다음과 같이 수정해줍니다 주석처리 : delete 할 부분 11번, 32번 줄을 추가해줄 부분

SERVER RESTART

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

!exports.home = function(req, res){

res.render('home', { title: 'Ninja Store' }) }; !

title 변수는 =title

!=title #{title}

를 사용해서 접근할 수 있다

!ex) p Welcome to #{title}

p= title p!= title

ROUTES DIRECTORY

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

JADE

Node Template Engine node.js용으로 만들어진 view 템플릿 엔진

!!

Jade 문법에 맞게 작성하면 해당 내용을 html이나 자바스크립트로 만들어 준다

JADE FUNCTIONS클라이언트 사이드 지원 뛰어난 가독성 유연한 띄어쓰기 블럭 확대(block-expansion) 믹스인(mixins, 섞어쓰는 것) 스태틱 인클루드(static includes) 속성 인터폴레이션(attribute interpolation) 보안을 위해 코드는 기본적으로 이스케이프 처리된다. 컴파일과 런타임시에 문맥에 맞는 에러 출력 커맨드 라인을 통해 jade 템플릿을 컴파일 할 수 있음

다이내믹과 스태틱 태그 클래스 조합 필터를 이용한 트리구조 파싱 parse tree manipulation via filters 템플릿 상속 외부 모듈로 Express JS 지원 객체, 배열, 그리고 열거형이 아닌것들에 대해서도 each 를 이용하여 투명하게 이터레이션 지원 블럭 코멘트 tag를 이용한 접두어처리 없음 AST 필터 html 5 모드 (!!! 5 doctype) 선택적인 메모리 캐싱

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

완성된 화면

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

ADD FUNCTIONS

로고 추가해주기

로그인 안내문구, 이름입력칸, 로그인 버튼

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

ADD FUNCTIONS

/public/stylesheets/ 디렉토리로 들어가서, style.styl 에 밑에 코드를 넣어줍시다. (vi style.styl 써서 터미널에서 바로 수정 가능)

ADD FUNCTIONS

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

home.jade 에

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

ADD FUNCTIONS

SERVER RESTART !

다시, 서버를 돌려봅시다 ! !

localhost : 3000

ERROR:

로그인을 하면, 에러가 나죠? !왜? !

아까 app.js 파일에 app.get('/', store.home); 라고 썼죠

=> get 요청만 받고 있어요 !

But, 로그인 시 Post 요청을 하고 있죠 그래서 오류가 나요

GET / POST

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

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

GET VS POST

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('/'); };

SESSION PROBLEM

세션 문제가 발생하죠? !!

$sudo npm install express-session !

를 터미널에 쳐줍시다 !

SESSION API

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

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'); };

SERVER RESTART

서버를 실행해봅시다 !

에러 뜨죠 ? !

jade를 우선 나눈 뒤에, 에러를 해결합시다

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

JADE INCLUDE

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

JADE INCLUDEhome.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

수정된 부분

ADD

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

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} };

ADDstore.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 }); } };

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

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

LOGOUT

app.js 에 추가해줍니다. !app.get('/logout', function(req, res) {

delete req.session.username; res.redirect('/'); });

SERVER RESTART !

다시, 서버를 돌려봅시다 ! !

localhost : 3000

VERY GOOD !!

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

출처/참고