블로그 이미지
ssun++

카테고리

[전체] (73)
Android (7)
JavaScript (9)
CI (5)
Language (14)
ETC (38)
Total314,893
Today21
Yesterday23
[시작]
어디서든 처음 예제는 hello, world 입니다.


[동작]
하나의 input과 2개의 버튼이 있습니다.
'Call fortyTwo()' 버튼 클릭 시 42가 alert으로 출력되고
'Call reverseText()' 버튼 클릭 시 input 값이 뒤집혀서 출력됩니다.

[분석]
버튼을 클릭하여 모듈로 메세지를 보내면 모듈에서는 'message' 이벤트에 데이터를 실어서 보냅니다.
모듈로부터 받은 데이터는 이벤트 리스너로 등록된 handleMessage() 함수를 통해  alert으로 출력됩니다.
정확하게 그렸는지는 자신이 없지만 대략적인 동작은 아래 sequence diagram과 같습니다.
 


[끝]
'비동기로 동작한다'는 정도만 보면 될 것 같습니다.
Posted by ssun++

댓글을 달아 주세요

[시작]
단순히 tutorial 쫓아가는 포스트입니다.
hello world 정도의 예제입니다.

[Basics]
NaCl 웹앱은 최소 세가지 요소로 구성됩니다.
  • HTML 페이지
  • NaCl 모듈 : C/C++로 작성합니다. Pepper API를 사용합니다. 컴파일하면 .nexe 파일이 생성됩니다.
  • manifest 파일(.nmf) : 어떤 NaCl 모듈을 로드할지 명시합니다.

이 예제에서 확인할 수 있는 것들
  • 어떻게 웹페이지에서 NaCl 모듈을 로드하는가
  • 어떻게 브라우저와 NaCl 모듈간에 메세지를 주고 받는가 

[Step 1] SDK 설치하고 Python 서버 구동하기
  • SDK를 설치합니다.
  • Chrome에서 NaCl을 사용가능 하게 설정합니다.
  • Python 2.x 버전을 설치합니다.
  • Python 서버를 실행합니다. SDK의 examples 디렉토리에서 python httpd.py 5103 커맨드를 입력합니다.
     
[Step 2] NaCl이 동작하는지 확인합니다.
http://localhost:5103으로 이동해서 NaCl 예제가 보인다면 정상

[Step 3] Python 스크립트로 템플릿 파일 생성
SDK의 project_templates 디렉토리에 있는 init_project.py 스크립트로 간단한 NaCl 프로젝트를 생성할 수 있습니다.

스크립트는 아래와 같은 파일을 생성합니다.
  • build.scons : build instruction
  • [프로젝트명].html : NaCl 모듈을 로드할 페이지
  • [프로젝트명].cc (or .c) : NaCl 모듈의 소스코드
  • scons (or scons.bat) : 빌드 스크립트
 
init_project.py는 아래와 같은 옵션을 사용할 수 있습니다.
  • -n : 프로젝트명 
  • -d : 프로젝트 경로
  • -c : C로 작성 (default는 C++)
아래와 같이 스크립트를 실행합니다.

python init_project.py -d ../examples -n hello_tutorial


[Step 4] 웹페이지가 모듈을 로드하고 모듈과 통신하도록 하기
웹페이지 hello_tutorial.html이 브라우저에 로드되면 컴파일된 NaCl 모듈(hello_tutorial.nexe)가 로드됩니다.
<embed> 엘리먼트가 NaCl 모듈이 로드되는 곳입니다.

moduleDidLoad() 함수에 NaCl 모듈로 메세지를 보내도록 코드를 추가합니다.

function moduleDidLoad() {

    HelloTutorialModule = document.getElementById('hello_tutorial');

    HelloTutorialModule.addEventListener('message', handleMessage, false);

    updateStatus('SUCCESS');

    //Send a message to the NaCl module.

    HelloTutorialModule.postMessage('hello');

}


[Step 5] NaCl 모듈의 message handler 구현하기
이 단계의 목표는 아래와 같습니다.
  • HandleMessage() 함수 구현
  • 브라우저로 메세지를 보내기 위해 PostMessage() 함수 사용  
아래 라인을 적당히 추가합니다.

namespace {

    const char* const kHelloString = "hello";

    const char* const kReplyString = "hello from NaCl";

}


HandleMessage() 함수에 아래 라인을 추가합니다.

virtual void HandleMessage(const pp::Var& var_message) {  

   if (!var_message.is_string()) {

      return;

    }

    std::string message = var_message.AsString();

    pp::Var var_reply;

    if (message == kHelloString)

      var_reply = pp::Var(kReplyString);

    PostMessage(var_reply);

  }

};


[Step 6] NaCl 모듈 컴파일하기
scons 스크립트 (또는 scons.bat)를 실행합니다.
x86_32/x86_64 용 실행가능한 NaCl 모듈과 manifest 파일이 생성됩니다.
(manifest 파일은 사용자의 CPU에 맞는 모듈을 구동하도록 함)

[Step 7] 실행해보기
크롬에 아래와 같이 입력합니다.

http://localhost:5103/hello_tutorial/hello_tutorial.html

alert 창에 "hello from NaCl" 메세지가 뜨면 성공

[마침] 
NaCl 모듈을 사용하는 대략적인 구조 파악과 함께.
컴파일된 모듈을 사용하는 것을(인터프리팅하는 형태가 아니라) 확인할 수 있었습니다.
Posted by ssun++

댓글을 달아 주세요

Native Client 맛보기

ETC/WebKit / 2011.08.15 21:36
[시작]
크롬 최신판, '구글판 액티브X' 품다 ZDNet에 이런 기사가 있어서 살펴보았습니다.
요지는 '일반 프로그래밍 언어로 작성한 코드를 웹에서 실행시킨다'인 것 같습니다.

기사에서는 크롬 14버전에 포함될 예정이라고 하는데
현재 크롬 카나리아 버전(15.0.849.0)에서는 실행 가능합니다.
따라서 아래 내용은 카나리아 버전 기준으로 진행하겠습니다.

[환경 설정]
카나리아 버전이라도 곧바로는 예제 코드 실행이 불가능 합니다.


Native Client를 실행하기 위해서는 옵션 변경이 필요합니다.
1. about:flags에서 'Native Client' (또는 '기본 클라이언트') 항목을 '사용'으로


2. about:plugins에서 'Chrome NaCl' (또는 'Native Client') 항목을 '사용'으로
 

(플러그인 형태로 동작하는 것이 중요해 보입니다.)

옵션 변경 후에는 크롬을 재시작 합니다.

[예제 실행]
Native Client 예제 페이지로 갑니다.
위의 빨간 박스가 보이면 환경 설정이 잘못된 것입니다.
아래와 같은 파란 박스가 보여야 합니다.
 


몇가지 예제가 있는데 실행 방법이나 결과는 생략하겠습니다.

[소스 확인]
위에서 플러그인 형태로 동작하는 것은 언급하였습니다.
html 소스만 확인해보면 <embed> 엘리먼트가 있고, src는 .nmf 파일, type은 "application/x-nacl" 입니다.
C/C++ 소스를 컴파일 해서 .nmf 파일을 사용할 수 있는 것 같습니다.

[끝]
뉴스 제목을 '구글판 액티브 X'라고 뽑을 정도니 파급효과는 지켜봐야 할 것 같습니다.
브라우저에서 컴파일해야 하니까 성능 이슈도 있지 않을까 싶구요.
(줄여서 'NaCl'이라고 하는거 마음에 드네요 :D)
Posted by ssun++

댓글을 달아 주세요

[들어가기전]
지난 포스팅에서 Inspector의 'Script' 탭에서 디버깅하는 방법을 살펴보았습니다.
이번에는 'Console' 탭을 이용해서 디버깅하는 방법을 간단하게 확인할 예정입니다.

[console object]
크롬(&사파리)에서는 javascript에서 console이라는 object를 사용할 수 있습니다.
 console object는 아래와 같은 method를 가지고 있으며, Inspector의 Console 탭에 로그를 출력합니다.


1. debug() / info() / log() : 단순 출력
method 이름은 다르지만 내부적으로 동일한 동작을 합니다.
코드 : console.debug("debug입니다");


2. warn() : 단순 출력

코드 : console.warn("warn입니다");


3. error() : 단순 출력

코드 : console.error("error입니다");


4. dir() : object의 정보 출력
코드 : console.dir(new Car());

Car 정의




5. dirxml() : element의 정보 출력
아래 캡쳐보다 많은 항목들이 출력됩니다.
코드 : console.dirxml(document.getElementById("myDiv"));


6. trace() : 호출시의 콜스택 출력
코드 : onload()함수 -> callTrace()함수 -> console.trace() 호출


7. assert() : 조건이 false인 경우 로그 출력(error()와 같은 level)
코드 : console.assert(0>1);


8. count() : 해당코드를 호출한 횟수를 출력
코드 : console.count("카운트"); // for 문으로 3회반복


9. profile() / profileEnd() : Time Profile 생성 (Pair 호출)
"Profile XX" 텍스트를 클릭하면 구간에 대한 profile을 확인할 수 있습니다.
코드 : console.profile(); /* 코드 */ console.profileEnd();


10. time() / timeEnd() : 시간 측정 (Pair 호출)
time() 호출시 출력내용은 없고, timeEnd() 호출시 측정값이 출력됩니다.
코드 : time(); /* 코드 */ timeEnd();


11. group() / groupCollapsed() / groupEnd() : 출력내용 묶음 (Pair 호출)
group() 또는 groupCollapsed()와 groupEnd() pair 호출입니다. (하위항목 펼침/접음)
코드 : group("groupA"); /* 코드 */ groupEnd();

코드 : groupCollapsed("groupB"); /* 코드 */ groupEnd();


12. markTimeline()
정체불명. 아시는 분 있으시면 가르쳐주세요.

[마침]
'Scripts' 탭에서는 코드 실행중의 흐름 제어가 가능했다면
'Console' 탭에서는 원하는 내용의 출력을 통해서 동작을 확인할 수 있습니다.
필요에 따라서 적절하게 사용하면 될 것 같습니다. 
Posted by ssun++

댓글을 달아 주세요

[Inspector]
웹킷 기반 브라우저에는 Inspector가 있습니다.
크롬에서는 오른 클릭해서 '요소 검사'. 사파리에서는 오른 클릭해서 '구성 요소 점검'.
을 선택하면 브라우저 하단에 등장하는 '그것' 입니다.

기본으로는 'Elements'탭이 선택되어있고.
오른 클릭한 위치의 Element에 대한 정보를 확인/수정해볼 수 있습니다.

[자바스크립트 디버깅]
Inspector에서 'Scripts' 탭을 선택해서 자바스크립트 디버깅을 할 수 있습니다.
 
 

1. 디버깅할 파일을 선택
스크립트가 포함된 html 파일, js 파일을 선택할 수 있습니다.

2. Break point 설정, 흐름 제어
라인 넘버 클릭시 break point 설정/해제가 가능합니다.
설정된 라인은 파란색으로 표시되고, 현재 실행중인 라인은 화살표가 붙습니다.
오른쪽의 버튼은 순서대로 <계속실행>, <라인단위 실행>, <함수 내부로 들어가기>, <함수 밖으로 나가기>, <모든 break point 해제> 입니다.

3. 값, 호출스택 확인
<Watch Expression>은 'Add'로 추가한 식의 값을 확인할 수 있습니다.
<Call Stack>은 말 그대로 호출 스택입니다.
<Scope Variables>는 지역, 전역 변수 값을 확인할 수 있습니다.
그밖에 break point 위치를 확인할 수 있고, 이벤트 리스너에도 break point를 설정하는 등등의 기능이 있습니다.
 
[마침]
alert 창을 띄우거나 컨텐츠 내부에 동작 확인을 위한 코드를 넣을 필요없이
컨텐츠 외부에서 동작을 확인할 수 있는 점이 좋은 것 같습니다 :)
Posted by ssun++

댓글을 달아 주세요

[시작]
크롬 카나리아 빌드 설치 시 언어 설정이 영어로 되어있어서 귀찮은 경우가 있습니다.
디폴트 인코딩이 ISO-8859-1로 되어있어서 한글이 깨져보인다거나.

메뉴가 영어로 나온다거나. 등등.


[바꿔봅시다]
※ 크롬 12.0.720.0 기준입니다. 이전, 이후 버전에서는 다를 수도 있습니다.

1. 메뉴에서 [Options]를 선택합니다.



2. [Under the Hood] 카테고리에서 [Language and spell-checker settings]를 선택합니다.

 

3. 영어만 보일겁니다. [Add]를 선택합니다.



4. [Korean - 한국어]를 선택합니다.



5. [Korean]이 선택된 상태에서 [Display Google Chrome in this language]를 클릭합니다.



6. 크롬을 재시작합니다.
메뉴 버튼을 눌러보면 한국어로 메뉴가 나오는 것을 볼 수 있습니다.



[끝]
메뉴 사용할 일은 그렇게 많지 않기 때문에.
디폴트 인코딩 변경에 의미를 두는 설정입니다.
Posted by ssun++

댓글을 달아 주세요

[시작]
브라우징 속도 못지않게 버전 넘버 올라가는 속도도 빠른 크롬.
크롬 카나리아 빌드 사용에 대해 살펴보았습니다.

[크롬 릴리즈 채널]
크롬의 기초가 되는 크로미움 프로젝트에 들어가보면 몇가지 릴리즈 채널이 있습니다.
Stable Channel : 일반적으로 설치되는 버전
Beta Channel : 최신 기능을 사용할 수 있는 버전
Dev Channel : 새로운 아이디어가 테스트되는 버전
Canary Channel : 잦은 업데이트. 테스트되지 않고 릴리즈.

안정적인 순서 : Stable > Beta > Dev > Canary
업데이트 되는 순서 : Canary > Dev > Beta > Stable 입니다.

[크롬 카나리아 빌드]
Stable 이외의 빌드 사용시 더 높은 버전의 크롬을 사용할 수 있겠죠.
그러나 Beta, Dev 빌드와 Canary 빌드의 차이가 있습니다.

Beta, Dev 빌드를 설치하는 경우에는 크롬 기본 브라우저로 설치됩니다.
Stable 빌드가 있는 경우에 덮어써버립니다.

Canary 빌드를 설치하는 경우에는 기존 크롬과 별개로 설치 됩니다.
Stable/Beta/Dev 빌드가 있는 경우 크롬이 두벌 설치되는 것을 볼 수 있습니다.

 Stable / Beta / Dev 빌드 아이콘 Canary 빌드 아이콘


크로미움 프로젝트의 설명을 보면.
Canary 빌드는 테스트를 도와서 개발에 기여하고 싶은 분들을 위한 빌드.

디폴트 브라우저로 쓸수는 없어서 다른 빌드에 추가로 설치되고.
크래시 리포트와 사용 통계가 구글로 전송(OFF 가능)된다고 되어있습니다.

[끝]
필수/권장사항은 아니구요.
호기심 많은 사용자들이 시도해볼만한 팁이네요. :) 

Posted by ssun++

댓글을 달아 주세요

  1. 2011.04.01 19:43 신고 이선웅  댓글주소  수정/삭제  댓글쓰기

    선철아 아이콘 바꼈어 ㅋ

  2. 2011.04.11 02:59 신고 Favicon of http://xtales.tistory.com/ Tanny Tales  댓글주소  수정/삭제  댓글쓰기

    그것이 언어 & 스펠링 체크 기능 이었군요,
    대충 보다보니 스펠링 체크만 해주는줄 알고 있었는데 거기에 언어 지정..
    이해에 많은 도움이 되었습니다 ^^

  3. 2011.04.15 20:33 신고 Favicon of http://bslime.tistory.com bslime  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다 :)
    포스트를 블로그에 담아갔습니다. 문제가 된다면 삭제하겠습니다.
    즐거운 하루되세요!

최근에 달린 댓글

최근에 받은 트랙백

글 보관함