Atom package part1
3 likes842 views
Atom editor 패키지를 만들기위한 기본 도입 설명입니다. 시간이 날때마다 틈틈히 추가 자료를 만들 예정입니다.
Atom package part1
- 2. Atom Electron(Chromium+Nodejs) 기반의 텍스트 에디터 —> 자바스크립트로 개발되었다.
- 3. Nuclear + IDE Facebook가 개발한 패키지 세트(IDE-like)
- 4. Nuclide • 대부분의 패키지들이 React로 작성되어 있다. • Remote Development • Flow and JavaScript • Hack Development • Using with Mercurial
- 5. Atom(Electron)의 특징 • 프론트엔드에서 노드를 사용할 수 있다. • NPM 을 이용할 수 있다는 소리다. • 윈도우/맥/리눅스 플랫폼을 지원한다. • Chromium 기반이므로 크로스 브라우징에서 자유롭다. • 기본 코드가 커피스크립트로 작성되어 있다. • 코어는 최소화 되어있고 대부분 패키지로 구성되어 있다.
- 6. 프론트엔드에서 노드를 사용할 수 있다. • CommonJS 방식으로 원하는 노드 모듈을 불러와서 사용 • 필요한 모듈은 노드처럼 package.json 에 명시하면 됨 • 서버-클라이언트 방식도 됨 (http서버를 backend로 돌릴수 있다는 의미) • 정확히 얘기하면 현재 io.js 를 사용중임(곧 노드4.0으로 바뀔듯)
- 7. APM • Atom Package Manager • NPM 의 기능에 Package 의 설치/삭제 등의 기능을 지원 • Menu > Setting View > Install Package 등에 이용하거 나 CLI로 실행할 수 있다. • Jasmine Testing Framework 을 지원한다.
- 8. 커피스크립트 • 기본 코드가 커피스크립트로 구성됨 • 물론, 자바스크립트도 됨(권장이 커피스크립트) 자바스크립트와 커피스크립트를 모두 포용함(단점같은 장점) • 기본 코드는 빌드시 자바스크립트로 변환됨 • Inspector 에서 지원하는 SourceMap 을 통해 커피스크 립트를 직접 디버깅 가능(컴파일된 자바스크립트로 하고 싶으면 Sourcemap 을 Disable하면 됨)
- 9. Atom API • Atom API 사이트에 간략히 소개되어 있음 • Public API 으로만 따지면 지원하는 기능이 적으나 오픈소스를 보면 Public API 수준의 여러 메서드가 존재 • 즉, 자유자재로 사용하려면 Atom 소스코드를 보고 확인 하는 것이 좋음(커피스크립트라는게 함정) • Core API를 변형하는 것은 어려움 (어차피 자바스크립트이기 때문에 해킹이 가능하나 급속 한 버전업데이트로 안정성에 문제가 있을 수 있음)
- 10. Package 작성예제 • Menu > Packages > Package Generator > Generate Atom Package 를 선택하면 기본 템플릿이 생성됨 - keymaps : 단축키를 등록하는 곳(cson은 json 의 coffeescript 버전) - lib : 구현 코드가 들어가는 곳 - menus: 메뉴, 컨텍스트 메뉴를 등록하는 곳(API 를 이용해서 동적으로 도 추가할 수 있다. - spec : Jasmine Test 코드 - style : 스타일시트를 등록하는 곳(less 포맷이다) - package.json : Node 포맷과 비슷하게 작성한다.
- 11. Package.json • 특별히 중요한 속성만 설명 - version : semantic versioning 기준으로 작성하면 됨 - activateCommands : Main 객체의 activate 메서드를 호출하는 command 속성은 발생 엘레먼트이고, 값은 명령어이다. 이 속성이 없으면 패키지설치후 항상 자동 으로 Activate가 호출된다. - 그외, 다른 패키지의 서비스를 제공할 수 있는 속성도 지정할 수 있다.
- 12. Main Module • Main Module 은 Object 임 • activate : 패키지 로딩시 최초 로 불리는 메서드, serialize에서 저장된 state가 인수로 주어진 다. • deactivate : Atom 을 리로드 한다거나 패키지를 Disable 시 킬때 호출되는 메서드 • serialize : activate 시마다 초 기화를 방지하기 위한 저장방식 을 제공하는 메서드. 단, 모든 어플리케이션(여러개의 Atom) 에서 공유되는 것이 아니고, project 기준으로만 공유됨
- 13. View? • 대부분의 Atom 패키지는 HTML을 View로서 사용하지 않음 (하려면 할수는 있으나 권장하지 않음) • Atom 자체적으로 View 클래스를 제공. 이를 상속받아 작성 • {View} = require ‘atom-space-pen-views’ 로 클래스를 받아올 수 있음 • View 는 jQuery 를 상속하고 있어서 jQuery를 바로 사용 할수 있는 편리함을 제공 • View 이외에도 다양하게 UI를 구현할 수 있음 • HTMLElement 를 상속받아 View를 구성할 수도 있음 (by Atom-utils npm module)
- 14. View - 구조 • @content : DOM을 구성해주 는 템플릿 메서드, @가 붙어 있 다는 것에 주의. 객체 생성시 constructor 호출후 불림 여기서 outlet은 jQuery DOM Object로 생성해주는 역할을 함 • initialize : @content 호출 후 불리는 메서드로 생성된 DOM 에 접근할 수 있음 • 그외, attach, detach 를 통해 DOM의 append, remove를 조 정할 수 있음
- 15. 개발하면서 발견한 단점 • 웹 전용 스펙인 경우 노드를 사용할 수 없다. 예: Worker 를 사용할 경우 require 키워드 등은 인식안됨. 실행시에도 Coffee 포맷을 실행시킬수는 없다. 실행 기준 디렉토리도 상대경로를 지정할수 없다. (상대경로의 기준경로는 Atom public 디렉토리임) 이 경우 커뮤니티에서는 Worker 가 아닌 BufferedProcess를 사용할 것을 권장하고 있다. • 텍스트에디터 기본 기능이 부족하며, 커스터마이징에 한계가 있다. (브라켓 에 비교해서 속도는 매우 빠름) • 크롬이라서 메모리 점유가 크다(에디터인데..ㅠㅠ) • API에 대한 매뉴얼이 성의없게 작성되어 있다(나아지겠죠?)
- 16. 그럼에도 불구하고... • Atom 은 1.0이 배포된 뒤에 빠른 속도로 버전업이 이루어지고 있음(9월 현재 1.1.0베타까지 나옴) • Coffeescript 및 기본 구조에 대한 러닝커브를 지나면 개발속도가 현저히 빨라짐 (Javascript 로도 가능하나 매뉴얼만으로는 한계가 있어 다른 패키지를 참고해야함) • Core 코드는 다듬을 필요가 많아 컨트리뷰션의 기회가 많음 • 또한 생각보다 현재 개발된 패키지의 수준이 높지 않고, 살펴보면 개발이 필요한 아이템들이 많다.
- 17. Atom 은... • 텍스트 에디터이다. IDE 가 아니다. 다만 여러 패키지들을 붙여 IDE-like 화 할수 있다. • 서브라임등에 비하면 아직 많이 부족하나 패키지 확장성 을 고려하면 웹이 브라우저를 벗어나 어플리케이션 제작 도 할수 있다는 가능성을 제시하고 있다.