MEAN 스택을 사용한 IoT 개발 예제를 설명합니다.
* MEAN 스택 기본 내용 소개
* Node.js와 Express를 활용한 간단한 CRUD 서버 작성 방법(아주 단순하지만 (인증을 제외한 나머지) RESTful 서버의 기본 내용을 구현함)
* MongoDB와 Mongoose ODM를 사용한 영속적인 자료 저장 방법
* AngularJS를 사용한 아주 간단한 모니터링 도구 구현(하지만 의존성 주입, 양방향 자료 결합, 라우팅 활용 방법이 모두 들어 있음)
* 모든 예제는 bitbucket(git 호스팅 서비스)에 공개되어 있음
Adied 2014, 봄싹 세미나에서 발표한 `Resource Handling in Spring MVC`의 발표자료입니다.
주요 내용으로 Spring MVC에서 정적 자원(css, js, etc)을 다루는 방법을 다루고 있습니다.
데모 코드 : https://github.com/arawn/resource-handling-in-springmvc
Adied 2014, 봄싹 세미나에서 발표한 `Resource Handling in Spring MVC`의 발표자료입니다.
주요 내용으로 Spring MVC에서 정적 자원(css, js, etc)을 다루는 방법을 다루고 있습니다.
데모 코드 : https://github.com/arawn/resource-handling-in-springmvc
AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다.
AngularJS 2를 실무환경에 적용함으로 얻는 이점.
AngularJS 2와 1의 차이점과 성능.
그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다.
마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다.
해당 자료는 XECon 2016에 발표되었습니다.
AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다.
AngularJS 2를 실무환경에 적용함으로 얻는 이점.
AngularJS 2와 1의 차이점과 성능.
그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다.
마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다.
해당 자료는 XECon 2016에 발표되었습니다.
제 14회 한국 자바 개발자 컨퍼런스의 커뮤니티 세션에서 공유한 `overview of spring4` 의 발표 자료
스프링 프레임워크는 2004년에 출시된 이후 지금까지 많은 변화를 겪어왔습니다. 기억에 남아 있는 굴직한 변화를 더듬어 보면 버전 2.0은 XML 네임스페이스와 AspectJ 지원, 버전 2.5부터 애노테이션을 활용한 프로그래밍 기능이 추가되었습니다. 그리고 버전 3.0으로 올라가며 Java 5+ 기반으로 코드 구조가 바뀌고 자바 코드 기반 설정 기능이 추가되었습니다. 2013년 12월 13일에 버전 4.0 발표이 발표되었습니다. 주목할 변화는 바로 Java 8 지원과 제거 대상(@Deprecated)으로 선언되었던 많은 클래스와 메소드들이 삭제되었다는 것입니다. 이 외에도 많은 변화가 있습니다. 이번 시간에는 조금 높은 곳에서 내려다보는 느낌으로 무엇이 추가되었고, 어떤게 바뀌었는지 살펴보려고 합니다.
예제코드 : https://github.com/arawn/overview-of-spring4
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)LanarkSeung
프로덕션 환경에서 클라이언트 사이드 렌더링을 고집하기란 힘든 일입니다. 서버를 통해 웹사이트를 제공하면서도 React의 편리함을 누리려면 서버 사이드 렌더링(SSR)을 구현해야 하는데요. Create-React-App을 그대로 유지하면서 SSR을 구현하는 과정을 보여드리고자 합니다. TypeScript로도 가능합니다!
[IoT] MAKE with Open H/W + Node.JS - 3rdPark Jonggun
IoT 시대에 Opensource H/W 와 NodeJS 를 이용하여 누구나 나만의 H/W + S/W + Service 를 만들기 위한 교육 과정을 만들어 보았습니다.
상상했던 아이디어를 Raspberry Pi 기반으로 나만의 IoT 제품을 현실로 만들어 보세요.
Lesson 1 - Introduction : IoT개요, Opensource H/W, 라즈베리파이 기초
Lesson 2 - Linux : Raspberry Pi 에서 리눅스 활용하기
Lesson 3 - Node.JS : Raspberry Pi 에서 Node.JS 로 프로그래밍 하기
Lesson 4 - Sensor : GPIO 를 Node.JS 로 동작시켜 센서 제어하기
Lesson 5 - Project : Raspberry Pi 로 스마트폰 + 무선 IoT 오디오 제작
챕터가 완성되는대로 추가적으로 공유하겠습니다.
Circulus Site - http://www.circul.us
Circulus Group - http://group.circul.us
탑크리에듀교육센터(www.topcredu.co.kr)제공
스프링프레임워크 & 마이바티스(Spring Framework, MyBatis)
17번째 자료입니다. 참고하시어 많은 도움되셨길 바랍니다.
교육 및 수강문의/기타문의사항은 홈페이지(www.topcredu.co.kr)를 통하여 하실 수 있습니다.^^
탑크리에듀교육센터(www.topcredu.co.kr)제공
15번째 스프링프레임워크 & 마이바티스(Spring Framework, MyBatis)자료입니다.
Spring JDBC에서 DB 접근하는 방법, Spring JDBC에서 DB 접근하는 방법 – jdbcTemplate, Maven, Gradle에서 오라클 설정에 대해 설명한 자료이니 많은 참고 바랍니다.
14. +
Node.js인 이유는?(2)
n 개발 시간과 성능의 조화
n 아무리 성능이 좋더라도 개발 시간이 오래 걸릴 경우 생산성이 떨어진다
n 주의: 1행을 작성하는 시간은 어셈블리나 SQL이나 비슷하다
n 스크립트 언어의 경우 빨리 개발은 가능하지만 성능이 떨어진다
n 자바스크립트를 사용한 Node.js는 개발과 성능 양쪽 모두 뛰어나다
n 스타트업 vs 기업
n 스타트업은 빨리 변화하는 생태계에서 살아남기 위해 필연적으로 오픈
소스에 매진한다
n 대기업은 유지보수와 안정성, 그리고 성능에 관심이 많다
n Node.js는 양쪽 모두를 만족시킨다(오픈 소스 기반, 자바와 같은 강력한
생태계)
15. +
Node.js인 이유는?(3)
n 뛰어난 성능
n 월마트는 블랙 프라이데이에 Node.js로 전제 모바일 사이트 오픈
n 초당 두 배 요청을 받아들이고 응답시간을 35%(200ms) 줄임
n 서버 CPU 사용량이 2%, 200만 명 온라인 접속 방어
n 이벤트 아키텍처
n 스레드가 아닌 단일 프로세스
n 대신 동기식 차단이 아닌 비동기식 I/O
n 웹 브라우저 특성상 이미 자바스크립트는 콜백을 사용하는 이벤트 구
동 방식을 지원(비동기식 코드에 대한 표현력이 강함)
32. +
Node.js 모듈 내용 변경(1): /routes/
lamps.js
var Lamp = require('../models/lamp');
exports.addLamp = function (req, res, next) {
var lamp = new Lamp({
lampname: req.body.lampname,
status: req.body.status
});
lamp.save(function (err, lamp) {
if (err) { return next(err); }
res.status(201).json(lamp);
});
};
33. +
Node.js 모듈 내용 변경(2): /routes/
lamps.js
exports.updateLamp = function (req, res, next) {
Lamp.findOne({ _id: req.params.id }, function (err, lamp) {
if (err) { return next(err); }
lamp.status = req.body.status;
lamp.save(function (err, lamp) {
if (err) { return next(err); }
res.status(201).json(lamp);
});
});
};
exports.deleteLamp = function (req, res, next) {
Lamp.remove({ _id: req.params.id }, function (err, lamp) {
if (err) { return next(err); }
res.status(201).json(lamp);
});
};
34. +
Node.js 모듈 내용 변경(3): /routes/
lamps.js
exports.findAll = function (req, res, next) {
Lamp.find(function (err, lamps) {
if (err) { return next(err); }
res.status(201).json(lamps);
});
};
exports.findById = function (req, res, next) {
Lamp.findOne({ _id: req.params.id }, function (err, lamp)
{
if (err) { return next(err); }
res.status(201).json(lamp);
});
};
35. +
CRUD 전체 정의를 위한 변경: /
server.js
var express = require('express'),
bodyParser = require('body-parser'),
lamps = require('./routes/lamps.js');
var app = express();
app.use(bodyParser.json());
app.post('/lamps', lamps.addLamp);
app.get('/lamps', lamps.findAll);
app.get('/lamps/:id', lamps.findById);
app.put('/lamps/:id', lamps.updateLamp);
app.delete('/lamps/:id', lamps.deleteLamp);
app.listen(3000);
console.log('Listening on port 3000...');
36. +
서버 시작
n 서버 시작
n $ node server
n 주의: 서버 시작에 앞서 지역 호스트(localhost)에 몽고DB를 설치
하고 시작했는지 반드시 확인하자!
37. +
단말 쪽 프로그래밍
n REST 방식으로 API를 호출하면 된다
n 단말 조건: TCP/IP 스택이 설치되어 있으며, REST 클라이언트 라이브러
리를 사용할 수 있어야 한다.
n 만일 리눅스 기반으로 동작하는 단말인 경우 뒤에 테스트 예제에서
설명하는 curl을 system으로 호출하면 아주 쉽게 구현 가능하다.
n C 언어로 개발할 경우 libcurl을 사용할 수도 있다.
n 스크립트 언어로 개발할 경우 스크립트 언어의 REST 클라이언트 패
키지를 사용하면 몇 줄로 서버 쪽에 자신의 상태를 전달할 수 있다.
n 이어지는 테스트 예제를 보며 CRUD 전달 방식을 확인하자.
38. +
CRUD 테스트: POSTMAN vs curl
크롬 확장: REST 클라이언트
http://curl.haxx.se/ (홈페이지)
http://www.confusedbycode.com/curl/ (윈도우 32비트/64비트)
참고: 여기서는 설명의 편의를 위해 cURL을 사용한다!
55. +
HTTP 서버 사용하기
n Node용 간이 http 서버 설치
n npm install http-server –g
n AngularJS를 서비스 하기 위한 HTTP 서버 시작
n cd angular-app
n http-server
실시간 미
리 보기
또는 Brackets에서
58. +
도전 과제
n socket.io를 사용해 polling하지 않고서 추가/변경/삭제되는 Lamp
목록을 보여준다.
n hard coded된 notice 문구 대신, 특정 Lamp에 문제가 생겼을 경
우 서버에서 경고를 받아 출력한다.
n Action을 추가해, Lamp를 켜고/끄게 만든다.
n bower를 사용해 AngularJS 개발 과정에서 복잡한 프론트엔드 의
존성을 자동으로 관리하게 만든다.