저번주 토요일에 FRENDS 모임이 있었다. 요즘 이런저런 바쁜일이 많아서 사실 발표할 꺼리를 만드는게 쉽지 않았는데, 발표는 해야겠기에 간단히 툴 소개 하는 차원에서 2 Pomodoro(1시간) 만에 급조해서 슬라이드를 하나 만들었다.

블로그에서 한 차례 소개 했던 툴이고 8페이지짜리로 내용이 거의 없지만. 그런거 치곤 반응(?)이 괜찮았고 일단 공유했던 자료라 올린다.

원격 웹 디버거 weinre

모바일 웹 개발을 해보면 다른건 다 피씨 웹 개발과 같지만 디버깅은 그렇지 않다. 종국에는 디바이스에서 직접 띄워봐야 하는데 스크립트 오류, 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 으로 다음, 이전 검색결과 이동 가능.

replace

:s/previousText/nextText/g previousText를 nextText로 몽땅 바꿔버림.

undo, redo

명령 모드에서 u 가 undo. ctrl+r 은 redo 이다.

폼나는 중급 명령어

더 잘 쓰기의 핵심은 대안이 없어서 쓰는 편집기가 아닌 메인 편집기로 쓰기 위해 알아야 할 것들이다

자동완성

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

명령어 모드의 단축키 상세

• zi - 접는기능 사용 토글
• zv - 커서 줄 보기
• zo - 부분 펴기
• zc - 부분 접기
• zM - 모두 접기
• zR - 모두 펴기
• zd - folding 영역 삭제

syntax로 fold가능한 언어 확인

/usr/share/vim/vim73/syntax/ 에서 해당 언어.vim 파일에 fold관련 정의가 있는지 확인. (/fold 로 검색)

div#container>ul.userlist>li*2

<div id="container">
  <ul class="userlist">
    <li></li>
    <li></li>
  </ul>
</div>