2013년 03월 17일
eclipse zencoding 한글은 안되냐?
작성자 : 김민석 ( lemonfish at g m a i l dot com )
zencoding 이라는 프로젝트가 있다.
* 이클립스용은 별도 프로젝트가 존재한다. emmet 이라는 프로젝트 인데. zencoding을 만든 개발자가 심경의 변화가 있었는지... 원래 zencoding 이름을 버리고 새로 이름을 붙인 프로젝트다. 그래서 원래 zencoding의 이름으로 제공되던 update site 의 주소도 변경되었다.... 귀찮게 시리.... 쩝.
암튼 zencoding은 디게 쌈박한 프로젝트인데.
zen + codingzen -> gen -> generate -> generatinggenerating or generator + coding -> code generating or code generator ?
이렇게 생각하면 쉬우려나? 개발자에게 재미를 주는 이런 프로젝트 정말 강추다.
table>tr*3>td*2 라고 치고 CTRL+E 혹은 탭을 뙇! 치면 아래와 같이 짜잔.!!!
<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
이렇게 코드가 생성된다. 올~ (^-^)b 짱인데? 문서의 구조를 머릿속으로 굴리고 굴려서 한방에 완성! 멋지다.
거기다 더 좋은건. 저렇게 코드를 생성하는 기능 이외에 snippet 기능도 있다는 건데.
물론 이클립스에도 snippet 기능은 있다. 하지만, snippet 안에 사용자가 채워야 하거나 변경해야 하는 부분을 변수로 지정하여 자동완성 되고 난 이후에 왔다리 갔다리 하면서 값을 채우는 기능은 zencoding에서 지원하는 snippet에만 있는 기능!
예를 들자면 이런거다.
alertmsg 명으로 snippet 을 아래 와 같이 많들 었다고 치자.
alert("${cursor}");${cursor}
그러면 에디터에서 alertmsg 라고 치고 탭을 탁! 치면
alert("|");${cursor}
자동완성이 되면서 위와 같이 커서가 snippet에서 보았던 alert 안의 ${cursor} 위치에 가 있는다. 거기에 지정 문구를 타이핑 한다음 탭을 치면 다음행의 ${cursor}위치로 커서가 이동한다.
단순한 예는 이렇지만. snippet 이 복잡하면 복잡할 수록. 자동완성을 한 이후에 마우스나, 방향키를 이용한 커서 이동 없이 내용을 완성할 수 있는 아주 유용한 기능임을 알게 된다.
그런데! 역시나. 해외의 프로젝트인지라 한글이 제대로 지원되지 않는다. 매우 안타깝다. 나는 한글 변수도 자주 쓰는데.
아~스키.. 지도 러시아 사람이면서 아스키만 지원하네... ㅡ_ㅡ;;; 러시아어에 나오는 문자도 아스키에는 없는디...
그래서 이번 포스팅은 zencoding 한글 지원하게 만들기! (너무 쉽다. 너무 쉬워.)
일단 깃허브에서 소스를 받니 어쩌니 하는 과정은 필요없다. 그것이 쉬운 이유!
1. 이클립스의 plugins 폴더를 들어가면 zencoding을 위한 jar 파일이 딸랑 하나 있을 터. 옛날 에 받았으면 ru.zencoding.eclipse_XXXXX.jar 라는 이름 일거고, 최근에 받았으면 io.emmet.eclipse_XXXXXX.jar 라는 이름일 것이다.
2. 일단 그 파일을 아무곳에나 복사를 하자.
3. jar 는 zip형식이므로 압축 프로그램으로 열어 본다. (다시 압축하기 귀찮으면 압축파일을 풀지말고 그냥 열어서 내용을 볼 수 있는 형태로 열어 본다. 유틸은 7z 강추. )
4. 이러케


5. ru.zen...jar 와 io.emmet...jar 는 이름은 틀리지만 거의 내부 형태가 유사하다. 각각에 맞게 js 파일을 찾으면 되는데.
뜬금 없이 js 파일 즉, 자바스크립트파일을 찾는게 좀 의아할 수 있겠다. 설명을 하자면 eclipse 용 zencoding은 모질라의 자바스크립트 엔진인 rhino 를 이용한다. 핵심적인 로직은 js 파일에 있다는 말씀!
ru.zen...jar 를 쓰고 있다면 ru\zencoding\ 에 위치한 zencoding.js 을 찾고,
io.emmet...jar 를 쓰고 있다면 io\emmet\ 에 있는 emmet-app.js 파일을 찾자.
찾았으면 또 어딘가에 복사를 해놓자.
6. 그럼 복사한 각 파일에서 isAllowedChar 라는 함수의 구현부를 찾아가자. 동일한 이름의 함수가 두개가 있을 텐데. char_code 혹은 charCode라는 변수가 등장하는 함수가 고쳐야하는 함수다.
7. isAllowedChar 라는 함수를 통과해야 자동완성이 트리깅(탭이나 CTRL+E를 통해)되었을 때 snippet 등이 제대로 동작하게 된다. 함수를 잠깐만 봐도 감이 올 사람은 올텐데. 한글이 입력으로 들어올 경우 이 함수를 통과하지 못한다.
8. 그래서 자바스크립트에서 한글의 범위를 해당 조건문에 추가해줘야 된다.
9. zencoding.js 의 경우 아래와 같은 코드가 추가된다. emmet-app.js 은 변수명만 다르고 동일하다.
|| (char_code > 0x3130 && char_code < 0x318F) //korean|| (char_code > 0xABFF && char_code < 0xD7A4) //korean
10. js 파일 수정이 끝났으면, 원래의 jar 파일을 열어 원본에 있던 js 파일을 수정된 녀석으로 덮어 쓴다.
11. 끝~~~~~ 이제 플러긴을 수정된 jar 파일로 덮어 쓰고 이클립스를 다시 시작하면
12. 한글이 잘 먹는다.
13. 유후~
# by | 2013/03/17 23:07 | 도구 | 트랙백 | 덧글(1)



