이 문제는 JSLint나 JSHint를 통해 디버깅할 수 있다. WebStorm은 둘다 내장해서 inspections 설정을 통해 에러표시를 해준다.
근데 사실 이건 ExtJS개발하려고 하는 사람은 한번씩 겪어나 이미 악명(?)을 접했을 문제이고, 아주 개떡같은 문제를 하나 더 언급하겠다.
bootstrap.js 제거
bootstrap.js는 Extjs4에서 제공하는 모듈인데, 동일 패스에 있는 모듈들을 preloading을 한다. 그런데, 이를 사용할 경우 페이지가 로드 된 후 25~30초 뒤에 'events' is null or not an object 오류가 발생한다. 그냥 가만히 있어도 난다. 그래서 액션을 취하고 있는 경우 그 액션으로 인해 에러가 났다고 오해하기 쉽다. 내 경우에는 DnD오류라 생각하고 6시간쯤 허비했다. 콤마 유무를 확인한 후에도 이 에러가 난다면 다음을 확인해야 한다.
ext-base.js, bootstrap.js를 뺀다. ext-all.js만 있으면 되며, ext-base.js도 필요없다.
Sencha Forum에는 4.0.1이후 fixed된것 처럼 되어있지만, 4.0.7 를 사용중인데, bootstrap.js를 제거하지 않으면 동일한 문제가 발생한다. 이 에러는 Ext.cache[...].events가 없어서 나는 에러인데, ext-all.js의 문제만 해결된게 아닌가 싶다.
getContext('2d') 메서드를 호출하면 canvas Element는 2D 이미지를 그릴 수 있는 CanvasRenderingContext2D 객체를 반환한다.
이렇게 반환받은 CanvasRenderingContext2D 객체로 여기다가 드로잉 질을 할 수 있다. 노랑색으로 바탕색을 깔고 텍스트 하나를 그려주자.
ctx.fillStyle = '#ffffaa';
ctx.fillRect(0, 0, 300, 300);
var text = "This is text drawn in canvas ";
ctx.font = "15px serif";
ctx.fillStyle="#ff0000";
ctx.fillText(text, 50, 140);
그런데, 이 객체에는 벡터 방식의 드로잉 뿐만 아니라 외부에서 비트맵 이미지도 넣을 수 있다.
var img = new Image();
img.src = "some_image_URL";
img.addEventListener('load', function(){
ctx.drawImage(img, 10, 10, 200, 100);
});
이미지 로딩이 끝나고 캔버스에서 써야 하므로 load 이벤트 핸들러로 처리한다.
toDataURL()
자 이제 이걸 PNG 이미지로 빼보자.
var btn = document.getElementsByTagName("button")[0];
btn.addEventListener('click', function(){
var snapshotPNG = canvas.toDataURL();
window.open(snapshotPNG, 'snapshot', 'width=300, height=300');
});
Security Error
초간단 canvas 데모다.
자 그럼 이제부터 본론.. ctx.drawImage()로 canvas에 넣을 이미지의 도메인을 현재 페이지 도메인과 다른 도메인으로 바꿔보자.
img.src = "other_image_URL";
이러면 canvas.toDataURL()라인에서 console에 다음과 같은 오류가 난다.
Uncaught Error: SECURITY_ERR: DOM Exception 18
이는 '동일 원본 정책'위반으로 canvas는 현재 문서와 다른 도메인의 리소스가 들어가면 toDataURL()를 허용하지 않는다. cross-origin information leak 를 방지하기 위해서라나... 어쨌든 이건 생각보다 룰이 강력해서 canvas에 현재 보이는지 와는 관계 없다. 뭔 말인고 하니..
만약 drawImage()를 한 다음에 다시 싹 지워 버리면 어떨까? canvas는 Flash, SVG같은 retain mode가 아닌 immediate mode 라서 매번 pixel drawing이 일어나므로 뭘 그렸든 다시 위에 몽땅 덧칠을 해버린다. 그러면 상관없지 않을까?
요즘은 왠만한 오픈소스는 github.com 에 있다. jQuery도 여기에 메인 레파지토리로 github를 쓴다.
jQuery를 좀 까볼 속셈으로 https://github.com/jquery/jquery 들어가서 Fork를 하나 받았다.
적당한 폴더에 가서 fork 받은 repos에서 clone을 받는다.
오늘 모바일 웹 전략 & 개발 워크샵 2010라는 자리가 있었는데, 두시간 강의를 맞아서 다녀왔다.
원래 7월말로 예정되었던 기획 and 개발의 이틀짜리 행사였으나 이런 저런 이유료 DevDay는 한달 후인 오늘 열렸다.
컨퍼런스와 달리 워크샵이란 타이틀로 열린 행사로 참가자는 20명 정도로 적었지만, 두시간 정도 진행하면 느낀 감(?)은 뭔가 간절해 보였다. 뭔가 아웃풋은 뽑아야 하는데, 뭘 준비해야 하는지 모르는 간절함?
어쨌든 일정을 완전히 잊고 있다고 급히 정리한 것 치고는 제법 정리가 잘되었는데, 조금이라도 도움이 되었기를 바라며..
모바일 웹 개발을 해보면 다른건 다 피씨 웹 개발과 같지만 디버깅은 그렇지 않다. 종국에는 디바이스에서 직접 띄워봐야 하는데 스크립트 오류, CSS깨짐 등을 매번 확인하고 고치기가 무척 번거롭다. 마치 IE7이하에서 페이지 개발을 하는 기분. 모바일 개발에도 Firebug나 Chrome, Safari의 개발 인스펙터같은게 있으면 좋겠다 생각했는데, 있내? ㅎ
Weinre 란 툴인데 사이트 첫인상은.... Fiddler2와 비슷했다. 뭐야 이게? ㅡ ㅡ^ 디자이너를 제공해주고 싶은 기분.
Weiner는 Remote Web Debuger이다. 이 말은 A장비의 브라우저에 뜬 페이지를 B장비의 인스펙터에서 컨트롤 할 수 있다는 말이다. Web Inspector Project as Webkit의 부산물이며 무척 간단하다. 자바로 되어있으며 jetty로 실행된다.
설치
Github에서 파일을 다운 받는다. 맥용은 Browser Built-in이 아닌 전용 UI가 따로 있으나.. jar파일을 mac app으로 패키징 했을 뿐이다. 별거 없고, 그냥 jar버전을 받아도 상관 없을듯. 내 경우는 mac용을 받았으나 UI 버전 말고 페키지 안에 있는 jar를 바로 실행시켰다. 적당한 폴더에 풀면 된다. 설치는 없다.
기동
command line기준으로 설명하면 다음 처럼 실행하면 기동된다.
java -jar weinre.jar
아래 같은 콘솔이 뜨면 정상적으로 기동 된 것이다.
2011-08-24 19:16:49.298:INFO::jetty-7.x.y-SNAPSHOT
2011-08-24 19:16:49.371:INFO::Started SelectChannelConnector@localhost:8080
2011-08-24 19:16:49.371:INFO:weinre:HTTP server started at http://localhost:8080
만약 아래 처럼 뜨면 포트 충돌이다. 옵션을 주어서 포트를 바꾸자. 기본포트는 8080.
2011-08-24 19:16:41.770:WARN::FAILED SelectChannelConnector@localhost:8080: java.net.BindException: Address already in use
2011-08-24 19:16:41.770:WARN::FAILED org.eclipse.jetty.server.Server@5f70bea5: java.net.BindException: Address already in use
2011-08-24 19:16:41.771:WARN:weinre:exception launching server: java.net.BindException: Address already in use
2011-08-24 19:16:41.771:WARN:weinre:exiting...
java -jar weinre.jar --httpPort 8081
데모 and 사용법
8080에 띄웠다는 가정하에 브라우저를 띄워서 http://localhost:8080 를 띄운다. 다음 같은 페이지가 뜬다.
기본 페이지에 모든 정보가 있다. 사용할 Inspector의 주소는 http://localhost:8080/client/#anonymous 이다.
데모 페이지를 띄운다. http://localhost:8080/demo/weinre-demo-min.html#anonymous
그러면 이제 Chrome과 Safari에 있는 것과 동일한 Inspector를 사용할 수 있다. Element텝에서 요소 선택을 하면 데모페이지의 해당 요소가 활성화되고 변경하면 바로 반영되고, Console에 alert('Hello')를 띄우면 데모페이지에 뜬다. 아직 감이 없는 분을 위해 참부하면 아이패드 에뮬레이터에서 접근한 데모페이지를 Inspector로 컨트롤 할 수 있다.
실 페이지 세팅
데모 페이지 말고 실제 페이지는 어떻게 해야 할까?
해당 페이지에 타겟지정 태그를 붙이면 된다.
고급(?)활용
디버그 서버운영이 가능하다. 예를 들면 debug.zziuni.pe.kr도메인에 weinre를 띄워두고, debug.zziuni.pe.kr/client/#anonymous 를 접근해서 인스펙터를 띄우고, 다음 타겟코드를 넣은 페이지를 아이패드등에서 실행하면 된다. 그러면 테스트하려는 페이지나 웹 앱이 어디에 위치해있던 뜬다. (라고 되어있다. 아직 안해봄. )
결론
사이트에 멀티유저 관련내용도 있는 것으로 봐서 디버그 서버를 첨부터 고려한거 같다. 일단 첫 느낌이 좋다. 작동도 아주 좋고, 도메인 세팅과 IE에서 뜨나? 등은 안해봤지만 웹 앱 개발에서 아~~ 주 도움이 될듯.
vim는 vi의 확장판쯤 된다. 이전에는 운영서버에 붙어서 작업할 때 간단한 작업을 위해 소스를 내려 받고 올리고 하는 작업이 귀찮아서, 혹은 여의치 않아서 vi를 잘했으면 좋겠다는 생각을 했었는데, 요즘은 이게 정말 물건이란 생각이 들어서 더 잘 다루고 싶은 생각이 든다. 얼마전 누가 신들린듯 vi로 라이브 코딩 하는걸 봐서는 아니다. ㅋ
쓸만한 기본 명령어
search
/keyword 라고 하면 현재 커서 위치 아래로 keyword란 문자를 검색
?keyword 라고 하면 현재 커서 위치 위쪽으로 keyword란 문자를 검색.
n, N 으로 다음, 이전 검색결과 이동 가능.
더 잘 쓰기의 핵심은 대안이 없어서 쓰는 편집기가 아닌 메인 편집기로 쓰기 위해 알아야 할 것들이다
자동완성
ctrl + p 를 누르면 열린 파일중 입력 스트링과 시작이 같은 몰고이 뜬다. 메소드 인텔리전스 입력 대용으로 사용가능하다.
블럭 이동
{~~}로 블럭 으로 묶여있는 제어문은 [{ 와 }] 명령어로 블럭 시작과 끝을 이동할 수 있다. 블럭의 시작인 { 에서 ]}를 입력하면 블럭의 끝인 } 이동한다. 하지만 언어에 따라서 잘 안되기도 한다.
편집 중 나가기 (ctrl+z)
ctrl+z를 하면 :q나 :w류의 명령행을 실행하지 않고 컴멘트 라인으로 돌아 갈 수 있다. 장점은 편집중인 vi창을 닫은게 아니기 때문에 컴멘드 라인에서 볼일이 끝나고, fg라고 치면 언제든 다시 vim로 돌아온다. 윈도에서 alt+tab으로 탐색기 띄운 정도를 생각하면 된다.
창 나누기 (:split, :vs)
창은 가로혹은 세로로 원하는 만큼 나눌 수 있다. 세로 나누기는 :split 가로 나누기는 :vs 명령어를 쓴다. 명령어 뒤에 파일명을 적지 않으면 이미 열린 파일의 clone이 열리고 다른 파일을 열때는 :split ./readme.txt 라고 하면 된다. 파일명이 아닌 path를 적으면 파일을 고를 수 있는 ls 리스트가 뜬다. 분할된 창을 이동시에는 ctrl+ww 를, 분할창을 닫을 때는 :q를 사용한다.
탐색창 붙이기 (:20vs ./)
위의 :vs를 이용하면 UI 에디터 처럼 파일 탐색창이 붙은 에디터처럼 쓸 수 있다.
:20vs ./ 라고 하면 좌측에 탐색창이 생긴다. vs앞의 숫자는 분할 창 폭을 말한다.
이렇게 열린 창에서 파일선택을 enter로 하면 해당 창에 열리지만 shift + p 로 열면 옆에 창에 열린다. (vim 7 이전버전은 shirf + o ) 같은 짓을 :split ./ 로도 할 수 있다.
Tab 기능 (:tabnew)
vim에서도 Tab으로 파일을 열 수 있다. 실행할떄 -p 옵션으로 vim -p file1, file2 로 열수 있고 빈 텝 10개로 실행하려면 vim -p 10 하면 된다. 실행중에는 :tabnew filename 으로 열 수 있다.
Tab관련 명령어
:tan 다음 탭으로 이동
:tabp 이전 탭으로 이동
:tabfirst 처음 탭으로 이동
:tablast 마지막 탭으로 이동
:tabs 열린 텝 목록
소스 접기 (folding)
fold라고 하며 vim 은 .vimrc 에 foldmethod를 설정하면 소스 접고 펴기가 된다. stackoverflow
set foldmethod=syntax
set foldlevelstart=1
let javaScript_fold=1 " JavaScript
let perl_fold=1 " Perl
let php_folding=1 " PHP
let r_syntax_folding=1 " R
let ruby_fold=1 " Ruby
let sh_fold_enabled=1 " sh
let vimsyn_folding='af' " Vim script
let xml_syntax_folding=1 " XML
유닉스계열의 시스템에서 batch job을 돌릴때 사용한다.
어떤 작업을 하는 shell script 작성한 후에 crontab에 일정을 등록하면 정해진 시간에 자동으로 실행한다. mac command를 기준으로 작성한다. 서버 로그를 정리하는 작업이나, 시간이 오래걸리는 통계/정산 작업등을 등록할때도 사용할 수 있다.
간단한 명령어지만, 자주 사용하지 않는 기능이다 보니 쓸려면 생각이 안난다. 회사의 svn 서버를 windows server 에서 mac mini로 옮기면서 svn dump를 매일 떠야 하는데, srontab 이 생각이 안나서 정리해봤다.
현재 crontab에 등록된 리스트 보기
먼저 뭔가 돌고 있는지를 확인하자. 신규서버나 로컬이 아니면 이미 등록되어있는 '작업'이 있을 수 있다. 옵션 -l 를 통해 현재 등록되어있는 리스트 확인이 가능하다. 등록된 내용이 없으면 아무것도 나오지 않는다.
> crontab -l
0 4 * * * /respo/cron.sh
chrontab등록
옵션 -e 를 주면 crontab를 수정할 수 있게 vi 가 실행되는데, 등록된 것이 없으면 신규 파일이 뜬다. 작성하면 된다.
> crontab -e
crontab: no crontab for stonerain - using an empty one
작성하기
먼저 인자를 알아야 한다. crontab은 공백문자를 구분자로 해서 한 라인에 6개의 인자를 적어주면 끝이다. 인자는 순서대로 아래와 같다. 매주 월 수 금 새벽 4시에.. 라는 식의 스케줄을 아래 인자로 표현해 주면 된다.
Arg 1 : minute ( 0 – 59 )
Arg 2 : hour ( 0 – 23 )
Arg 3 : day of month ( 1 – 31 )
Arg 4 : month ( 1 – 12 )
Arg 5 : day of week ( 0 – 6 ) 0 : 일요일
Arg 6 : 명령어 or 실행파일 path
샘플
매일 새벽 4시 실행 : 0 4 * * * /repository/cron.sh
매주 수,토요일에 오전 8:20분 실행 : 20 8 * * 3,6 /repository/cron.sh
주제가 그냥 App소개다보니 사실 걱정이 많았다. 관심있는 이들은 이미 다 본거일테고, 관심없는 이들에겐 상관없는 내용이고, 안 본 걸 찾자니 소개할 가치가 없고, 숨은 걸 찾자니 쉽지가 않고... 하여튼 주제에 비해서 발표준비가 좀 빡쎘다.
2주 쯤 전에 연락을 받고, 관련 링크들을 200개 이상 클립핑을 하고 이를 분류작업을 했다.
주제별로도 해보고, 사용기술 별로도 해보면서 뭔가 일관된 의도를 가지고 전달할 수 있을 까를 찾아봤는데 그닥.. ㅎ
어쨌든 의도한데로 진행이 되었고, 시간도 정확히(!) 맞추어서 만족은 한다. 물론 로딩이긴 데모는 모두 스킵하고, WebGL inspector같은건 소개도 못했지만 ㅎㅎ
시간상 지루함이 심할때인데, 생각보다 참석하신 분들이 반응을 잘해주어서 더 잘 진행된듯. ㅎ
Comments List