Atom PackagePart 1 이강석

gangseok514@gmail.com 10.19.2015

AtomElectron(Chromium+Nodejs) 기반의 텍스트 에디터

—> 자바스크립트로 개발되었다.

Nuclear + IDE Facebook가 개발한 패키지 세트(IDE-like)

Nuclide• 대부분의 패키지들이 React로 작성되어 있다.

• Remote Development

• Flow and JavaScript

• Hack Development

• Using with Mercurial

Atom(Electron)의 특징• 프론트엔드에서 노드를 사용할 수 있다.

• NPM 을 이용할 수 있다는 소리다.

• 윈도우/맥/리눅스 플랫폼을 지원한다.

• Chromium 기반이므로 크로스 브라우징에서 자유롭다.

• 기본 코드가 커피스크립트로 작성되어 있다.

• 코어는 최소화 되어있고 대부분 패키지로 구성되어 있다.

프론트엔드에서 노드를 사용할 수 있다.

• CommonJS 방식으로 원하는 노드 모듈을 불러와서 사용

• 필요한 모듈은 노드처럼 package.json 에 명시하면 됨

• 서버-클라이언트 방식도 됨(http서버를 backend로 돌릴수 있다는 의미)

• 정확히 얘기하면 현재 io.js 를 사용중임(곧 노드4.0으로 바뀔듯)

APM• Atom Package Manager

• NPM 의 기능에 Package 의 설치/삭제 등의 기능을 지원

• Menu > Setting View > Install Package 등에 이용하거나 CLI로 실행할 수 있다.

• Jasmine Testing Framework 을 지원한다.

커피스크립트• 기본 코드가 커피스크립트로 구성됨

• 물론, 자바스크립트도 됨(권장이 커피스크립트) 자바스크립트와 커피스크립트를 모두 포용함(단점같은 장점)

• 기본 코드는 빌드시 자바스크립트로 변환됨

• Inspector 에서 지원하는 SourceMap 을 통해 커피스크립트를 직접 디버깅 가능(컴파일된 자바스크립트로 하고 싶으면 Sourcemap 을 Disable하면 됨)

Atom API• Atom API 사이트에 간략히 소개되어 있음

• Public API 으로만 따지면 지원하는 기능이 적으나 오픈소스를 보면 Public API 수준의 여러 메서드가 존재

• 즉, 자유자재로 사용하려면 Atom 소스코드를 보고 확인하는 것이 좋음(커피스크립트라는게 함정)

• Core API를 변형하는 것은 어려움 (어차피 자바스크립트이기 때문에 해킹이 가능하나 급속한 버전업데이트로 안정성에 문제가 있을 수 있음)

Package 작성예제• Menu > Packages > Package Generator > Generate

Atom Package 를 선택하면 기본 템플릿이 생성됨- keymaps : 단축키를 등록하는 곳(cson은 json 의 coffeescript 버전) - lib : 구현 코드가 들어가는 곳 - menus: 메뉴, 컨텍스트 메뉴를 등록하는 곳(API 를 이용해서 동적으로

도 추가할 수 있다. - spec : Jasmine Test 코드 - style : 스타일시트를 등록하는 곳(less 포맷이다) - package.json : Node 포맷과 비슷하게 작성한다.

Package.json• 특별히 중요한 속성만 설명

- version : semantic versioning 기준으로 작성하면 됨- activateCommands : Main 객체의 activate 메서드를 호출하는 command 속성은 발생 엘레먼트이고, 값은 명령어이다. 이 속성이 없으면 패키지설치후 항상 자동 으로 Activate가 호출된다.- 그외, 다른 패키지의 서비스를 제공할 수 있는 속성도 지정할 수 있다.

Main Module• Main Module 은 Object 임 • activate : 패키지 로딩시 최초

로 불리는 메서드, serialize에서 저장된 state가 인수로 주어진다.

• deactivate : Atom 을 리로드 한다거나 패키지를 Disable 시킬때 호출되는 메서드

• serialize : activate 시마다 초기화를 방지하기 위한 저장방식을 제공하는 메서드. 단, 모든 어플리케이션(여러개의 Atom)에서 공유되는 것이 아니고, project 기준으로만 공유됨

View?• 대부분의 Atom 패키지는 HTML을 View로서 사용하지 않음

(하려면 할수는 있으나 권장하지 않음)

• Atom 자체적으로 View 클래스를 제공. 이를 상속받아 작성

• {View} = require ‘atom-space-pen-views’ 로 클래스를 받아올 수 있음

• View 는 jQuery 를 상속하고 있어서 jQuery를 바로 사용 할수 있는 편리함을 제공

• View 이외에도 다양하게 UI를 구현할 수 있음

• HTMLElement 를 상속받아 View를 구성할 수도 있음(by Atom-utils npm module)

View - 구조• @content : DOM을 구성해주

는 템플릿 메서드, @가 붙어 있다는 것에 주의. 객체 생성시 constructor 호출후 불림여기서 outlet은 jQuery DOM Object로 생성해주는 역할을 함

• initialize : @content 호출 후 불리는 메서드로 생성된 DOM에 접근할 수 있음

• 그외, attach, detach 를 통해 DOM의 append, remove를 조정할 수 있음

개발하면서 발견한 단점• 웹 전용 스펙인 경우 노드를 사용할 수 없다.

예: Worker 를 사용할 경우 require 키워드 등은 인식안됨. 실행시에도 Coffee 포맷을 실행시킬수는 없다.실행 기준 디렉토리도 상대경로를 지정할수 없다.(상대경로의 기준경로는 Atom public 디렉토리임)이 경우 커뮤니티에서는 Worker 가 아닌 BufferedProcess를 사용할 것을 권장하고 있다.

• 텍스트에디터 기본 기능이 부족하며, 커스터마이징에 한계가 있다. (브라켓에 비교해서 속도는 매우 빠름)

• 크롬이라서 메모리 점유가 크다(에디터인데..ㅠㅠ)

• API에 대한 매뉴얼이 성의없게 작성되어 있다(나아지겠죠?)

그럼에도 불구하고...• Atom 은 1.0이 배포된 뒤에 빠른 속도로 버전업이 이루어지고

있음(9월 현재 1.1.0베타까지 나옴)

• Coffeescript 및 기본 구조에 대한 러닝커브를 지나면개발속도가 현저히 빨라짐 (Javascript 로도 가능하나 매뉴얼만으로는 한계가 있어 다른 패키지를 참고해야함)

• Core 코드는 다듬을 필요가 많아 컨트리뷰션의 기회가 많음

• 또한 생각보다 현재 개발된 패키지의 수준이 높지 않고, 살펴보면 개발이 필요한 아이템들이 많다.

Atom 은...• 텍스트 에디터이다. IDE 가 아니다.

다만 여러 패키지들을 붙여 IDE-like 화 할수 있다.

• 서브라임등에 비하면 아직 많이 부족하나 패키지 확장성을 고려하면 웹이 브라우저를 벗어나 어플리케이션 제작도 할수 있다는 가능성을 제시하고 있다.