[Sublime Text] 유용한 10가지 플러그인

Sublime Text는 그 자체로도 가볍고 쓸만한 편집기지만 다양한 Plugin을 설치해주면 더욱 막강한 편집기로 재탄생 시킬 수 있다. 또한 관심을 조금 더 기울인다면 나에게 딱 알맞은 편집기를 만들 수가 있다. 다른 사용자에게 맞는 Plugin이 나에게는 맞지 않거나 불필요한 경우도 많기 때문에 사용자는 능동적으로 자신의 개발 환경에 맞는 Plugin을 찾아서 설치하면 된다.

이 글에 필자가 사용하는 Sublime Text의 Plugin을 설명할 것이고, 앞으로도 틈틈히 쓸만한 Plugin의 설명을 추가할 예정이니, 참고해서 자신의 Sublime을 intelligence하게 만들어 보길 권한다.

먼저 Plugin을 설치하기 위해서는 Sublime Text, Package Control이 설치되어 있어야 하며, 혹시 설치가 아직 안되어 있는 분들은 이전 글 "Sublime Text3 설치 및 설정"을 참고하거나 검색해서 설치하면 되겠다.

설치하는 방법은 아래의 순서대로 명령어를 입력하고, 팝업이 뜨면 원하는 Plugin을 입력해서 선택하면 설치가 시작된다.
ctrl + shift + p > Package Control : Install Package > Enter

1. AngularJS
- link : https://github.com/angular-ui/AngularJS-sublime-package
필자가 요즘 주로 사용하는 Javascript MVC Framework가 AngularJS여서 소개를 해본다. AngularJS로 프로젝트를 진행하는 개발자라면 필수 Plugin이 되겠다. 설치가 완료되면 아래처럼 AnglarJS 관련 지시어나 서비스들이 팝업되면서 코딩에 많은 도움을 받을 수 있다.

2. Sublime CodeIntel
- link : https://github.com/SublimeCodeIntel/SublimeCodeIntel
웹 개발에 쓰이는 거의 모든 언어(JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP)를 지원하고, 개발 시에 코드에서 변수명을 ALT+Click, CTRL+F3 누르면 변수가 지정된 파일로 자동 이동하며, 그 외에 다양한 많은 기능들을 제공하고 있다.

3. SideBar Enhancements
- link : https://github.com/titoBouzout/SideBarEnhancements
최초 Sublime text를 설치하고 Sidebar의 File, Folder에서 팝업을 띄우면 간단한 메뉴가 몇 개 나타난다. 이 Plugin을 설치하면 유용한 메뉴들이 추가 된다. 설치가 완료되어 오른쪽 팝업을 띄우면 아래처럼 다양한 메뉴가 나온다.

4. Sublime Linter
- link : https://github.com/SublimeLinter/SublimeLinter
개발을 하다보면 타이핑을 잘못하거나, 코딩에 오류가 발생되는 경우가 있는데, 이런 상황에서 유용한 plugin이로서 자동으로 잘못된 코딩을 알려준다.
해당 기능을 사용하기 위해서는 먼저 node.js가 설치되어 있어야 한다.

5. JSLint
- link : https://github.com/fbzhong/sublime-jslint
JSLint는 컴파일러 검증을 받지 못하는 언어의 단점을 어느 정도 극복해 준다. JSLint은 분석을 수행하여 개발자로부터 배포 또는 디버깅 전에 매번 수작업하는 수고를 줄여 준다.

6. DocBlockr
- link : https://github.com/spadgos/sublime-jsdocs
Java로 프로젝트를 하면, 정해진 규칙에 의해서 철저히 주석을 다는 반면에, javascript에서는 소홀하게 생각하는 경우가 많다. javascript로 점점 복잡하게 프로그램을 작성하는 경우가 많아지고 있는 상황에서, 이 plugin을 이용하면 효율적인 주석을 달 수 있다.
/** 입력하고 Enter를 치면 아래처럼 자동 주석이 달린다.

7. Git
- link : https://github.com/kemayo/sublime-text-git/wiki
Sublime에서 작성한 Source를 다른 사람과 협업하기 위해서 또는 다른 장비나 다른 편집기에서도 동일한 Source를 보기 위해서 필요한 Plugin이다. 요즘은 Source를 머지하기 위해서 SVN 말고도 Git를 많이 사용하기 때문에 이것도 꼭 필요한 Plugin이 되시겠다.
공개, 비공개 git를 사용하려면 이전 글 "Github로 소스 관리하기", "Bitbucket 무료 비공개 저장소 만들기" 참고하시고, 먼저 원격 소스 저장소를 만저 만들어야 한다.
설치를 완료하면 기존에는 없던 메뉴들이 곳곳에서 보이게 된다.

8. Emmet
- link : https://github.com/sergeche/emmet-sublime
이전의 ZenCoding이 HTML뿐만 아니라 CSS 지원, 더 많은 단축키를 제공하며 emmet으로 이름을 바꾸었다. copy&paste 신공도 좋지만 emmet을 손에 익히면 순식간에 많은 양의 코딩을 진행하면서 효율적으로 프로그램을 할 수 있다.

9. Prefixr
- link : http://wbond.net/sublime_packages/prefixr
CSS cross browser 지원을 위한 plugin이다. 하나의 CSS를 작성하면 자동으로 cross browser에 맞게 css를 생성해 준다.

10. Bracket Highlighter
- link : https://github.com/facelessuser/BracketHighlighter
{},[],<>,"",'',() 와 같이 열리고 닫히는 기호가 쌍으로 존재해야 하는 코드를 하이라이트 처리해주는 확장 기능이다.
아래처럼 하이라이트 된다.

AngularJS 이해하기

요즘은 Javascript로 다양한 Web Application을 제작하는 경우가 많은 것 같다. 그 중에는 훌륭한 프로그램들이 많이 있는데, 그 만큼 개발의 복잡도도 많이 증가하고 있다. 순수하게 Javascript만을 이용해서 객체지향적으로 Web Application을 작성해도 되겠지만, 생각처럼 작성하기 쉽지 않고, 더불어 테스트, 유지보수, 확장성 등을 고려한다면 더더욱 Javascript만을 가지고 프로그램을 하기가 만만치 않다.

개인적으로 Web Application 작성을 위해서 Spine, Backbone를 더 많이 접해 보았지만, 이번에는 Google이 만들고 있는 AgnularJS에 대해서 알아보려고 한다. AngularJS 는 아래와 같은 특징들이 있다.

1. MVC Pattern
최근까지 Client측 프로그램을 위해서 MVC을 잘 사용하지는 않았다. 점점 더 요구 사항이 다양화되고, 프로그램이 복잡해 지면서 자연스럽게 Client측 프로그램도 MVC 패턴이 필요하게 되었다. 기존 응용프로그램 개발에 많이 이용되던 언어인 Java, C++은 기본적으로 MVC 패턴을 이용해서 프로그램이 가능하고, 그렇게 해야만 프로그램의 유지보수 및 확장이 용이하기 때문이다.

MVC는 데이터(model) 관리, 애플리케이션 로직(controller)관리, 데이터 표현(view)를 명확하게 분리하는 것이 주된 목적이다. View는 Model에서 데이터를 가져와 사용자에게 표시하고, Controller는 사용자가 어떤 동작을 취하면 Model의 데이터를 변경한다. 또 Model이 변경되면 다시 View가 그 변경사항을 화면에 표시하게 된다. AngularJS에서는 View는 DOM(Document Object Model), Controller는 Javascript Class며, Model 데이터는 객체 속성에 저장된다.

2. Client Side Templage
보통 Web Page, Web Application은 Server에서 데이터와 HTML을 합쳐서 결과를 Client에 보내고, 그 보내진 결과가 바로 화면에 표시된다.

AngularJS는 화면에 표시되는 방식이야 동일하지만 Template와 Data가 함께 Client로 보내져서, 그 보내진 결과를 Client에서 조합해서 화면에 뿌려지는 것이 차이점이라고 하겠다.

3. Dependency Injection
특정 컨트롤러에서 특정 작업을 처리하기 위해서 직접 그 해당 기능을 구현하는 것도 가능하지만, 그렇게 처리하기 시작하면 스파게티 코드를 회피할 방법을 찾기 어려워질 것이다. AngularJS가 기본 제공하는 것들을 그냥 처리하기 원하는 곳에 넣어주고, 처리할 곳에서는 인자로 넘어온 도구를 가지고 처리를 요청하면 되는 것이다.

종속물 주입을 이용하면 개발자는 종속물을 작성하지 않아도 되며 작성한 클래스가 직접 필요한 것을 요청하는 개발 방식을 따르면 된다.

4. Auto Data Binding
Web Application에서 데이터의 변경이 발생되면, 보통 그 발생된 Event를 체크해서 데이터를 가져온 다음, 모델에 직접 반영하고, 변경된 모델을 화면에 표시하기 위해서 화면을 업데이트 한다. 이 전체 과정이 경우에 따라서는 하나하나 개발자가 직접 구현해 주어야만 동작이 된다. 이렇듯 개발자가 작업해 주어야 할 일들이 상당히 많은 편이다.

AngularJS는 위의 Data Binding 과정을 개발자가 직접 처리해 주지 않아도 자동으로 알아서 처리해 준다. 물론 모든 것을 다 자동화해서 작성할 필요는 없지만, 자동으로 처리해 주는데 추가적으로 불필요한 코드를 작성하는 것 또한 낭비라고 생각된다. 아래의 코드를 실행하면 Input박스의 수정된 내용을 화면에 표시하기 위해서 {{hello.text}} 라고 간단히 적기만 하면 개발자는 별도의 작업이 필요 없이 변경사항이 화면에 표시된다.


5. Directive
4번의 예제에서 ng-app, ng-controller등 기존에 보지 못했던 새로운 속성들이 보이는데, 이러한 HTML 확장 문법을 Directive라고 한다. AngularJS는 더 많은 지시어들을 가지고 있다. http://angualrsjs.org 에 방문하면 다양한 지시어를 만날 수 있다.

AngularJS의 지시어 뿐만이 아니라 개발자가 직접 지시어를 정의해서 사용하는 것도 가능하다.

마치며
위에 정의한 5가지의 특징 외에도 더 많은 특징들이 존재한다. 앞으로 Angular를 다양한 측면에서 바라보고, 실제 프로젝트에 적용해 보려고 한다. 직접 몇가지 예제를 가지고 테스트를 해본 필자의 느낌은 몹시 쓸만한 놈이다란 생각이 들었다.
전체적인 구조를 이해하고, 전체 뼈대를 만들어 놓는다면 어떤 JS framework보다 생산성과 재미를 제공할 것이다.