파파스머프의 블로그: 11월 2014

2014년 11월 25일 화요일

2014년 11월 13일 닷넷 오픈

http://www.microsoft.com/ko-kr/news/141105.aspx

마이크로소프트, .NET 오픈소스 및 크로스 플랫폼 지원 강화한 비주얼 스튜디오 2015 등 개발자용 솔루션 발표 2014년 11월 13일 – 마이크로소프트는 12일(현지시간) 뉴욕에서 진행된 개발자 행사(Connect();)에서 서버 단의 .NET(닷넷) 스택을 오픈 소스화하고 리눅스 및 맥 OS 플랫폼에서의 .NET 지원을 추가하는 등 크로스 플랫폼 개발자 지원을 확대한다고 발표했다. .NET 서버 스택 오픈 소스로 제공, 비주얼 스튜디오 무료 에디션 버전 ‘비주얼 스튜디오 커뮤니티 2013’ 발표 ‘모바일 퍼스트 클라우드 퍼스트 시대’ 앱 개발에 맞춘 새로운 개발 툴 프리뷰 버전 발표 2014년 11월 13일 – 마이크로소프트는 12일(현지시간) 뉴욕에서 진행된 개발자 행사(Connect();)에서 서버 단의 .NET(닷넷) 스택을 오픈 소스화하고 리눅스 및 맥 OS 플랫폼에서의 .NET 지원을 추가하는 등 크로스 플랫폼 개발자 지원을 확대한다고 발표했다. ‘모바일 퍼스트, 클라우드 퍼스트’ 시대의 생산성 및 플랫폼 기업으로서 마이크로소프트는 플랫폼과 디바이스에 관계 없이 개발자들을 지원하기 위해 ‘오픈 소스와 크로스 플랫폼’ 개발자 전략을 강조해 왔다. 이러한 전략의 일환으로 마이크로소프트는 비주얼 스튜디오(Visual Studio)의 무료 에디션 버전인 ‘비주얼 스튜디오 커뮤니티 2013(Visual Studio Community 2013)’을 발표했으며 크로스 플랫폼 및 모바일 개발 기능을 강화한 ‘비주얼 스튜디오 2015 프리뷰(Visual Studio 2015 Preview)’ 및 ‘.NET 2015 프리뷰(.NET 2015 Preview)’도 함께 선보였다.

마이크로소프트 개발자 부서의 소마세거(S. Somasegar) 부사장은 “오늘날 시장에는 수십 억 개의 디바이스가 있으며, 개발자들은 매우 다양한 폼 팩터 및 플랫폼에 맞춘 툴을 필요로 한다”라며 “비주얼 스튜디오 및 .NET을 통해 마이크로소프트는 개발자들이 다양한 디바이스 및 플랫폼들에서 애플리케이션을 개발하고 관리하는 포괄적인 엔드 투 엔드 솔루션을 제공할 수 있게 됐다”고 밝혔다. 개방성과 접근성 향상, 크로스 플랫폼 지원 마이크로소프트는 전체 .NET 서버 스택을 오픈소스로 제공함으로써 크로스 플랫폼 개발을 지원하게 됐다. 오픈 소스로 제공되는 스택에는 ASP.NET, .NET 컴파일러, .NET 코어 런타임, 프레임워크, 라이브러리 등이 모두 포함되어 이를 통해 개발자들은 윈도우, 맥, 리눅스 플랫폼에서 모두 .NET을 활용할 수 있게 됐다. 마이크로소프트는 향후 .NET 기능 향상을 위해 .NET 재단(.NET Foundation)과 협업하는 등 오픈소스 커뮤니티와 긴밀하게 협력할 예정이다. 그루폰의 CTO인 브라이언 맥캘리스터(Brian McCallister)는 “오픈소스, 크로스 플랫폼 CLR(공용언어 런타임)으로 대규모 서버 기반 시스템 구축에 획기적으로 새로운 옵션들을 선택할 수 있게 됐다”라며 “옵션 선택의 폭이 넓어짐으로써 개발자들은 문제 해결에 더 적합한 툴을 찾아 선택할 수 있다.

2014년 11월 24일 월요일

node.js를 설치해서 간단한게 사용해 봅니다.

node.js를 설치해서 간단한게 사용해 봅니다.	조회 : 37

나의 폴더 > ASP.NET MVC \| 2014-01-16 (Thu) 15:06	http://blog.dreamwiz.com/papasmf1/14018697

1. http://nodejs.org/ 주소에서 설치본을 받는다. 약 5메가 정도의 파일을 받으면 된다.

2. 도스창을 열어서 c:\program files\nodejs폴더로 이동한다. 여기에

Node node.basic.js파일을 실행하면 된다.

(node.basic.js)

console.log(‘hello world’);

3. 이번에는 웹 서버를 만들어 본다.

(node.server.js파일로 저장한다.)

//모듈을 추출한다.

var http = require('http');

//웹 서버를 생성 및 실행한다.

http.createServer(function (request, response) {

response.writeHead(200, { 'Content-Type': 'text/html' });

response.end('<h1>Hello world</h1>');

}).listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273/');

});

4. 실행하면 아래와 같이 실행된다. 도스창에서 node node.server.js로 실행한다.

비주얼스튜디오 2013 웹 익스프레스(Visual Studio 2013 Web Express) 와 node.js를 사용한 개발 #1

비주얼스튜디오 2013 웹 익스프레스(Visual Studio 2013 Web Express) 와 node.js를 사용한 개발 #1	조회 : 604

나의 폴더 > ASP.NET MVC \| 2014-01-21 (Tue) 11:00	http://blog.dreamwiz.com/papasmf1/14019757

자바스크립트의 속도 혁명은 2008년 시작되었다. 2008년 9월에 구글은 크롬 웹 브라우져를 발표하면서 V8 자바스크립트 엔진을 C++로 개발해서 발표했다. 자바스크립트 코드를 기반으로 머신 코드를 생성하여 실행하므로 어떠한 자바스크립트 엔지보다 속도가 빨랐다.라이언 달은 CommonJS표준과 V8 자바스크립트 엔진을 기반으로 node.js를 개발했다. Node.js는 브라우져가 아닌 서버 환경에서 자바스크립트를 사용하고자 노력했던 결과물이다. 비주얼스튜디오 2013 웹 익스프레스(Visual Studio 2013 Web Express)와 node.js를 사용한 개발을 한다면 어떨까? 하는 생각이 든다. 무료 개발툴과 오픈소스를 통해 웹서버측과 웹클라이언트측을 모두 개발한다면 재미있는 결과를 얻을 수 있을 것 같다.

개인적으로 비주얼스튜디오가 더 익숙해서 위와 같이 무료로 제공되는 개발들을 다운로드 받았다.

http://nodejs.org/ 주소에서 설치본을 받는다. 약 5메가 정도의 파일을 받으면 된다.

도스창을 열어서 c:\program files\nodejs폴더로 이동한다. 여기에

Node node.basic.js파일을 실행하면 된다.

(node.basic.js)

console.log(‘hello world’);

이번에는 웹 서버를 만들어 본다.

(node.server.js파일로 저장한다.)

//모듈을 추출한다.

var http = require('http');

//웹 서버를 생성 및 실행한다.

http.createServer(function (request, response) {

response.writeHead(200, { 'Content-Type': 'text/html' });

response.end('<h1>Hello world</h1>');

}).listen(52273, function () {

console.log('Server running at http://127.0.0.1:52273/');

});

node node.server.js로 실행해서 서비스 되는지 확인해 본다.

비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #3

비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #3	조회 : 69

나의 폴더 > ASP.NET MVC \| 2014-01-21 (Tue) 14:55	http://blog.dreamwiz.com/papasmf1/14019801

이번에는 app.js로 파일을 저장하고 아래와 같이 실행해 본다.
//모듈을 추출
var mysql = require('mysql');

//데이터베이스와 연결

var client = mysql.createConnection({

    user: 'root',

    password: '1234'

});

//데이터베이스 쿼리를 사용

client.query('USE Company');

client.query('select * from products', function (error, result, fields) {

    if (error) {

        console.log('쿼리 문장에 오류가 있다');

    } else {

        console.log(result);

    }

});

비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #4

비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #4	조회 : 233

나의 폴더 > ASP.NET MVC \| 2014-01-21 (Tue) 14:57	http://blog.dreamwiz.com/papasmf1/14019803

RESTful한 웹서비스를 만들어 보도록 한다.
앞에서 설치하고 생성한 mySQL의 Company데이터베이스에 접속해서 products테이블의 리스트를 출력하고
수정과 삭제가 가능하도록 CRUD메서드를 준비한다.
다음과 같은 파일들이 필요한다.

app.js      edit.html     insert.html list.html 파일들이 필요하다.

혹시 작업하는 폴더에서 모듈에서 에러가 나면 npm link mysql npm link ejsnpm link express를 실행해 주면 된다.
(app.js로 저장한다.)
//모듈을 추출한다.
var fs = require('fs');
var ejs = require('ejs');
var http = require('http');
var mysql = require('mysql');
var express = require('express');

//데이터베이스와 연결한다.
var client = mysql.createConnection({
    user: 'root',
    password: '1234',
    database: 'Company'
});;

//서버를 생성한다.
var app = express();
app.use(app.router);

//서버를 실행한다.
http.createServer(app).listen(52273, function () {
    console.log('Server running at http://127.0.0.1:52273');
});

//라우트를 실행한다.
app.get('/', function (request, response) {
    //파일을 읽는다.
    fs.readFile('list.html', 'utf8', function (error, data) {
        //데이터베이스 쿼리를 실행한다.
        client.query('select * from products', function (error, results) {
            //응답한다.
            response.send(ejs.render(data, {
                data: results
            }));
        });
    });
});
app.get('/delete/:id', function (request, response) {
    //데이터베이스 쿼리를 실행한다.
    client.query('delete from products where id=?', [request.param('id')], function () {
        //응답한다.
        response.redirect('/');
    });
});
app.get('/insert', function (request, response) { });
app.post('insert', function (request, response) { });
app.get('/edit/:id', function (request, response) { });
app.post('/edit/:id', function (request, response) { });

(list.html파일로 저장한다.)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <h1>List Page</h1>
    <a href="/insert">INSERT DATA</a>
    <hr />
    <table width="100%" border="1">
        <tr>
            <th>DELETE</th>
            <th>EDIT</th>
            <th>id</th>
            <th>name</th>
            <th>model number</th>
            <th>series</th>
        </tr>
        <% data.forEach(function (item, index) { %>
        <tr>
            <td><a href="/delete/<%= item.id%>">DELETE</a></td>
            <td><a href="/edit/<%= item.id%>">EDIT</a></td>
            <td><%= item.id %></td>
            <td><%= item.name %></td>
            <td><%= item.modelnumber %></td>
            <td><%= item.series %></td>
        </tr>
        <% }); %>
    </table>
</body>
</html>
실행하면 아래와 같은 형태로 실행된다.

Canvas를 직접 사용하지 않고 애니메이션과 게임 개발에 사용 가능한 JS

Canvas를 직접 사용하지 않고 애니메이션과 게임 개발에 사용 가능한 JS	조회 : 132

나의 폴더 > ASP.NET MVC \| 2014-03-20 (Thu) 19:52	http://blog.dreamwiz.com/papasmf1/14033018

collie.js 를 많이 사용합니다.

http://jindo.dev.naver.com/collie에 접속하시면 라이브 데모를 볼 수 있습니다.

HTML5에서 지원되는 요소와 CSS3, 기능들에 대한 비교표를 보고 싶다면...

HTML5에서 지원되는 요소와 CSS3, 기능들에 대한 비교표를 보고 싶다면...	조회 : 69

나의 폴더 > ASP.NET MVC \| 2014-07-17 (Thu) 11:47	http://blog.dreamwiz.com/papasmf1/14055656

http://www.w3schools.com에서 확인하면 된다.
특정 브라우져에서 벤더별로 구현한 기능들도 잘 비교되어 있다.

HTML5에서 지원되는 요소와 CSS3, 기능들에 대한 비교표를 보고 싶다면...

HTML5에서 지원되는 요소와 CSS3, 기능들에 대한 비교표를 보고 싶다면...	조회 : 69

나의 폴더 > ASP.NET MVC \| 2014-07-17 (Thu) 11:47	http://blog.dreamwiz.com/papasmf1/14055656

http://www.w3schools.com에서 확인하면 된다.
특정 브라우져에서 벤더별로 구현한 기능들도 잘 비교되어 있다.

Canvas를 직접 사용하지 않고 애니메이션과 게임 개발에 사용 가능한 JS

Canvas를 직접 사용하지 않고 애니메이션과 게임 개발에 사용 가능한 JS	조회 : 132

나의 폴더 > ASP.NET MVC \| 2014-03-20 (Thu) 19:52	http://blog.dreamwiz.com/papasmf1/14033018

collie.js 를 많이 사용합니다.

http://jindo.dev.naver.com/collie에 접속하시면 라이브 데모를 볼 수 있습니다.

비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #4

비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #4	조회 : 233

나의 폴더 > ASP.NET MVC \| 2014-01-21 (Tue) 14:57	http://blog.dreamwiz.com/papasmf1/14019803

비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #3

비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #3	조회 : 69

나의 폴더 > ASP.NET MVC \| 2014-01-21 (Tue) 14:55	http://blog.dreamwiz.com/papasmf1/14019801

비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #2

비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #2	조회 : 118

나의 폴더 > ASP.NET MVC \| 2014-01-21 (Tue) 14:53	http://blog.dreamwiz.com/papasmf1/14019800

57. Mysql 을 설치하고 Company란 데이터베이스를 생성해서 사용하도록 한다. 워크벤치를 사용해서 아래와 같이 접속해서 작업을 수행한다. Products란 테이블을 생성한다.
--해당 데이터베이스로 이동한다.
use company;
--테이블 스키마 보기
describe products
--데이터 검색
select * from products
--데이터 입력
insert into products (name, modelnumber, series)
values ("moon", "01011", "Programmer");
insert into products (name, modelnumber, series)
values ("koo", "01011", "Programmer");

-- 특정 위치에 있는 데이터 선택
select * from products limit 2

-- 데이터 수정
Update products
set name='bbb' where id = 4;
-- 데이터 삭제
Delete from products where id = 5;

mysql을 설치해서 nodejs와 같이 사용해 봅니다.

mysql을 설치해서 nodejs와 같이 사용해 봅니다.	조회 : 96

나의 폴더 > ASP.NET MVC \| 2014-01-16 (Thu) 15:08	http://blog.dreamwiz.com/papasmf1/14018698

1. MySQL의 경우 http://mysql.org에서 커뮤니티 버전을 받으면 된다. download탭에 있는 Community버전을 받으면 된다. 약 240메가로 워크밴치가 포함되어 있다.

이중에 msi로 되어 있는 버전을 받아서 설치하면 된다. root계정에 암호 “1234”를 입력하고 계정을 하나 추가하면 된다. 설치는 비교적 간단한다.

2. 워크벤치에서 database메뉴에서 연결을 하고 아래의 명령들을 실행한다.

create database Company;

use Company

create table products (

id int not null auto_increment primary key,

name varchar(50) not null,

modelnumber varchar(15) not null,

series varchar(30) not null

);

describe products;

insert into products (name, modelnumber, series) values

('Eric Clapton', '0112223344', 'Artist');

insert into products (name, modelnumber, series) values

('kim', '0112223344', 'Artist'),

('park', '0112223344', 'Artist'),

('lee', '0112223344', 'Artist');

select * from products;

3. 일반 도스창에서 아래와 같이 명령어를 입력해서 mysql에 연결하기 위한 모듈들을 받는다.

npm install mysql

4. mySQL과 연결은 아래와 같이 해서 실행하면 된다.

(mysql01.js로 저장해서 실행한다.)

var mysql = require('mysql');

//데이터베이스와 연결

var client = mysql.createClient({

user: 'root',

password: '1234'

});

//데이터베이스 쿼리를 사용

client.query('USE Company');

client.query('Select * From products', function (error, result, fields) {

if (error) {

console.log('쿼리 문장에 오류가 있습니다');

} else {

console.log(result);

}

});

MongoDB를 설치해 봅니다.

MongoDB를 설치해 봅니다.	조회 : 46

나의 폴더 > ASP.NET MVC \| 2014-01-16 (Thu) 14:38	http://blog.dreamwiz.com/papasmf1/14018694

요즘 Microsoft의 기술이 아닌 외부 기술들도 많이 테스트 하고 있습니다. 오픈 소스형태의 NOSQL로 제공되는 Mongodb를 설치해서 테스트 해 보았습니다.

1. www.mongodb.org사이트에서 윈도우용을 받는다.

2. 압축 파일을 풀어서 c:\data폴더를 만들어서 복사한다. 여기에 db폴더도 추가로 생성한다. 32비트와 64비트가 별도로 있으므로 윈도우 7에 알맞은 프로그램을 설치하도록 한다.

3. 도스창을 오픈해서 cd c:\data\bin에 가서 mongod를 실행한다.

4. 다른 도스창을 하나 더 오픈해서 cd c:\data\bin에 가서 mongo를 실행한다.

5. 다음과 같은 명령어들을 실행해 본다.

> 300+10

310

> var a = 0;

> for (var i=0;i<10;i++) { a += i; }

> a

> db

test

> use node

switched to db node

> db

Node

(저장하기 위한 공간을 만든다.)

> db.createCollection('products')

{ "ok" : 1 }

(아래와 같이 저장한다.)

> db.products.save({ name: 'pencil', price: 500})

> db.products.find()

{ "_id" : ObjectId("52d768de57f0ba28083d6221"), "name" : "pencil", "price" : 500

}

> db.products.save({ name: 'eraser', price:500 });

> db.products.save({ name: 'notebook', price:2000 });

> db.products.save({ name: 'glue', price:700 });

> db.products.save({ name: 'stapler', price:3000 });

> db.products.save({ name: 'brush', price:2000 });

> db.products.save({ name: 'protractor', price: 500 });

> db.products.find()

{ "_id" : ObjectId("52d768de57f0ba28083d6221"), "name" : "pencil", "price" : 500

}

{ "_id" : ObjectId("52d7690257f0ba28083d6222"), "name" : "eraser", "price" : 500

}

{ "_id" : ObjectId("52d7693457f0ba28083d6223"), "name" : "notebook", "price" : 2

000 }

{ "_id" : ObjectId("52d7694657f0ba28083d6224"), "name" : "glue", "price" : 700 }

{ "_id" : ObjectId("52d7695757f0ba28083d6225"), "name" : "stapler", "price" : 30

00 }

{ "_id" : ObjectId("52d7696957f0ba28083d6226"), "name" : "brush", "price" : 2000

}

{ "_id" : ObjectId("52d7697757f0ba28083d6227"), "name" : "protractor", "price" :

500 }

6. 다른 명령어들을 실행해 보면 아래와 같다.

> db.products.find({}, { _id: false})

{ "name" : "pencil", "price" : 500 }

{ "name" : "eraser", "price" : 500 }

{ "name" : "notebook", "price" : 2000 }

{ "name" : "glue", "price" : 700 }

{ "name" : "stapler", "price" : 3000 }

{ "name" : "brush", "price" : 2000 }

{ "name" : "protractor", "price" : 500 }

> db.products.find({ price: 500}, { _id: false })

{ "name" : "pencil", "price" : 500 }

{ "name" : "eraser", "price" : 500 }

{ "name" : "protractor", "price" : 500 }

> db.products.findOne()

{

"_id" : ObjectId("52d768de57f0ba28083d6221"),

"name" : "pencil",

"price" : 500

}

> db.products.find({ price:500}, { _id: false}).sort({ name: 1})

{ "name" : "eraser", "price" : 500 }

{ "name" : "pencil", "price" : 500 }

{ "name" : "protractor", "price" : 500 }

> db.products.find({ price:500}, { _id: false}).sort({ name: -1})

{ "name" : "protractor", "price" : 500 }

{ "name" : "pencil", "price" : 500 }

{ "name" : "eraser", "price" : 500 }

> db.products.find().sort({ price: 1}).limit(3)

{ "_id" : ObjectId("52d768de57f0ba28083d6221"), "name" : "pencil", "price" : 500

}

{ "_id" : ObjectId("52d7690257f0ba28083d6222"), "name" : "eraser", "price" : 500

}

{ "_id" : ObjectId("52d7697757f0ba28083d6227"), "name" : "protractor", "price" :

500 }

> db.products.find().sort({ price: 1}).skip(3).limit(2)

{ "_id" : ObjectId("52d7694657f0ba28083d6224"), "name" : "glue", "price" : 700 }

{ "_id" : ObjectId("52d7693457f0ba28083d6223"), "name" : "notebook", "price" : 2

000 }

(수정할 경우)

> var temp = db.products.findOne({ name: 'eraser'})

> temp

{

"_id" : ObjectId("52d7690257f0ba28083d6222"),

"name" : "eraser",

"price" : 500

}

> temp.price = 700

700

> db.products.save(temp)

> db.products.find()

{ "_id" : ObjectId("52d768de57f0ba28083d6221"), "name" : "pencil", "price" : 500

}

{ "_id" : ObjectId("52d7690257f0ba28083d6222"), "name" : "eraser", "price" : 700

}

{ "_id" : ObjectId("52d7693457f0ba28083d6223"), "name" : "notebook", "price" : 2

000 }

{ "_id" : ObjectId("52d7694657f0ba28083d6224"), "name" : "glue", "price" : 700 }

{ "_id" : ObjectId("52d7695757f0ba28083d6225"), "name" : "stapler", "price" : 30

00 }

{ "_id" : ObjectId("52d7696957f0ba28083d6226"), "name" : "brush", "price" : 2000

}

{ "_id" : ObjectId("52d7697757f0ba28083d6227"), "name" : "protractor", "price" :

500 }

(한건씩 삭제할 경우)

> db.products.remove({ name: 'notebook'})

(전체를 삭제할 경우)

> db.products.remove()