One Day Code-Lab- AngularJS 와 Express 로 하루만에 쇼핑몰 만들기 -

webFrameworks.kr

Express 맛보기

NodeJS 란 ?

• 서버사이드 자바스크립트 프레임워크• Event loop 을 이용하여 이벤트 기반으로 동작하며 , Non-blocking I/O 방식

Event Queue

EventLoop

Thread Pool

File-system

network

process

other

NodeJS 설치• https://nodejs.org/ 에서 install• $ node --version• $ npm --version // node package manager

Express 란 ?

• Node.js 기반의 가장 인기 있는 웹프레임워크• 가볍고 유연함• 빠른 속도• 미들웨어 (Middleware) 구조

설치 – express install• $ npm install express -g • $ npm install express-generator -g • $ npm install supervisor –g* 전역모드 설치시 에러가 나는 경우 sudo( 권리자 권한 ) 를 사용한다 .• $ express code-lab // 기본적인 구조의 express app 이 생성• $ npm install• $ npm start

설치 - git• https://git-scm.com/download/win

설치 – quick start• $ git clone https://github.com/KoreaHTML5/quickstart-

expressjs.git( 깃헙 사이트에서 압축파일 다운로드도 가능 )

• $ npm install• $ supervisor app 혹은 npm start

Express 의 폴더구조 (1)

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

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

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

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

Express 의 폴더구조 (2)

app.js: bin/www 에서 사용되는 이 파일은 익스프레스 설정 파일이 담겨있는 핵심 코드입니다 ./routes: 라우팅을 위한 폴더입니다 . 라우팅 리소스 별로 모듈을 만들어 라우팅 로직을 각 파일에 구현 합니다 .

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

REST API

* REST = REpresentational safe transfer (REST)

* Why?- 자원의 식별- 메시지를 통한 리소스의 조작- 자기 서술적 메시지- 애플리케이션의 상태에 대한 엔진으로서의 하이퍼미디어* ExampleItem 을 등록하기 => (POST) /items3 번 Item 을 조회하기 => (GET) /items/33 번 Item 삭제하기 => (DELETE) /items/33 번 Item 수정하기 => (UPDATE) /items/3

( 참고 ) HTTP Method 를 아래의 행위와 매칭하면 이해하기 쉽습니다 . POST = 생성 / GET = 조회 / DELETE = 삭제 / UPDATE = 수정

Express 의 라우팅과 REST URI

* 라우트란 ? 클라이언트의 요청을 위한 URL 스키마를 라우트라고 합니다 . 이미 설명한 GET / 을 예로 들면 클라이언트가 GET 메소드를 이용해 / URI 에 해당하는 서버자원을 요청한다는 의미로 해석합니다 . 만약 POST 메소드를 사용한다면 서버에 자원을 생성하는 요청입니다 . 이렇게 URL 스키마는 서버와 클라이언트간의 통신 인터페이스를 제공해 주는 역할을 합니다 .* 구현할 REST URI(GET) /items?q=XXXXXX // item 검색 (POST) /items/:itemId // item 구매 (GET) /items/:itemId // item 세부정보 * 프로토콜의 메소드에 따른 라우트의 객체 함수GET: router.get()POST: router.post()PUT: router.put()DELETE: router.delete()

/routes – sample code

Request 구성하기• 라우트 객체의 두번째 파라매터는 콜백으로 설정하는데 URL 에 접속했을때 실행되는 함수입니다 .• 함수의 첫번째 파라매터 request 는 클라이언트 응답에 대한 정보를 담는 객체입니다 . 이 객체는 req.params, req.param(), req.body 등의 함수 혹은 객체를 이용하여 클라이언트로 부터 요청하는 데이터에 접근 할 수 있다 .

* Request 파라미터 접근- req.params : 파라미터 경로에 매핑된 값들을 포함하는 객체로

/user/:name 일 경우 req.params.name 으로 접근 가능- req.query : 쿼리문자열을 포함하고 있는 객체 . 예로 /items?

q=“abc” 이면 req.query.q 로 접근 가능- req.param(name) : 파라미터에 name 값이 존재하는 경우 반환 . 쿼피문자열 , 포스트 등 동일하게 사용된다 . - req.body : body 에 담겨온 request parameter 값을 획득한다 .

Request Sample* 구현할 REST URI(GET) /items?q=XXXXXX => req.query.q(POST) /items/:itemId => req.params.itemId, req.body( 폼에서 넘어오는 값들 )(GET) /items/:itemId => req.params.itemId// routerrouter.get('/:itemId', controller.get);router.post('/:itemId', controller.buy);router.get('/', controller.index);

// controller(POST) /items/:itemIdvar itemId = req.params.itemId, buyerId = req.body.userId, qty = parseInt(req.body.qty,10), deliveryFee = parseInt(req.body.deliveryFee,10), address1 = req.body.address1, address2 = req.body.address2, recvMobile = req.body.recvMobile, recvName = req.body.recvName;(GET) /items/:itemIdvar itemId = req.params.itemId;(GET) /items?q=XXXXvar q = req.query.q;

Response 구성하기* Response 함수 종류- res.send(): 문자열로 응답- res.json(): 제이슨 (Json) 객체로 응답- res.render(): 제이드 템플릿을 렌더링- res.sendfile(): 파일 다운로드

• Response 파라매터는 클라이언트로 응답을 위한 객체입니다 . res.send() 함수를 이용해 문자열로 응답할 수 있습니다 . 이 외에도 응답을 위한 몇 가지 함수를 더 사용할 수 있습니다 .

* Response sample

“meta”: { errCode: 0 msg: “”}“data”: {}

Response Sample Code* Response 함수 종류- res.send(): 문자열로 응답- res.json(): 제이슨 (Json) 객체로 응답- res.render(): 제이드 템플릿을 렌더링- res.sendfile(): 파일 다운로드exports.result = function(res, statusCode, errCode, msg, data) { var output = { meta: { errCode: errCode, msg: msg }, data: data }; res.status(statusCode).json(output);}; /lib/apiResponse.js

DATABASE 연동• 데이터를 관리하기 위하여 MySQL 데이터베이스와 연동• Mysql 모듈 설치 확인 package.json

* Sample Database 환경- HOST: 54.64.145.4 - PORT: 3306- USERNAME: dev01- PASSWORD: a20150829- SCHEMA: codelab

내용추가 예정

dbHelpers Componentvar mysql = require('mysql');var state = { pool: null};

exports.connect = function() { state.pool = mysql.createPool({ .. });};

exports.query = function(q, cb){ if(!state.pool) new Error(); state.pool.getConnection(function(err, conn){ if (err) cb(err, ''); conn.query(q, function (err, results) { // error will be an Error if one occurred during the query // results will contain the results of the query conn.release(); if (err) { cb(err, ''); } cb(null, results); }) });}

Main Application File - app.js'use strict';

// Set default node environment to developmentprocess.env.NODE_ENV = process.env.NODE_ENV || 'development';

var express = require('express');var config = require('./config/environment');// Setup servervar app = express();var server = require('http').createServer(app);require('./config/express')(app);require('./routes')(app);require('./components/dbHelpers').connect();

// Start serverserver.listen(config.port, config.ip, function () { console.log('Express server listening on %d, in %s mode', config.port, app.get('env'));});

// Expose appexports = module.exports = app;

DATABASE Sample Codevar d = require("../../components/dbHelpers");

var q = (req.query.q) ? 'select * from codelab.item where title like "%' + req.query.q + '%"' : 'select * from codelab.item ';d.query(q, function (err, data){

// logic after DB-Job

});

AngularJS 와 통합

?

Angular-Full-Stackhttps://github.com/DaftMonk/generator-angular-fullstack

Angular-Full-Stackhttps://github.com/DaftMonk/generator-angular-fullstack

Angular-Full-Stack : CLI (1)(APP) $ yo angular-fullstack(API) $ yo angular-fullstack:endpoint message

> server/api/message/index.js> server/api/message/message.spec.js> server/api/message/message.controller.js

(ROUTE) $ yo angular-fullstack:route myroute> client/app/myroute/myroute.js> client/app/myroute/myroute.controller.js> client/app/myroute/myroute.controller.spec.js> client/app/myroute/myroute.html> client/app/myroute/myroute.scss

(CONTROLLER) $ yo angular-fullstack:controller user> client/app/user/user.controller.js> client/app/user/user.controller.spec.js

(DIRECTIVE) $ yo angular-fullstack:directive myDirective> client/app/myDirective/myDirective.directive.js> client/app/myDirective/myDirective.directive.spec.js> client/app/myDirective/myDirective.html> client/app/myDirective/myDirective.scss

Angular-Full-Stack : CLI (2)(FILTER) $ yo angular-fullstack:filter myFilter

> client/app/myFilter/myFilter.filter.js> client/app/myFilter/myFilter.filter.spec.js

(SERVICE) $ yo angular-fullstack:service myService> client/app/myService/myService.service.js> client/app/myService/myService.service.spec.js

(DECORATOR) $ yo angular-fullstack:decorator serviceName> client/app/serviceName/serviceName.decorator.js

Angular-Full-Stack 으로 시작하기• Node 설치• Angular-Full-Stack 다운로드받기 또는 git clone• API 설계하기• Response 포멧 설계하기• 데이터베이스를 이용하기 위한 컴포넌트 만들기• 실제 개발 시작 !

One Day CodeLab Samplehttps://github.com/KoreaHTML5/one-day-codelab