Atom Editor

Atom은 이해하기 쉽고, 커스터마이즈 하기 쉬운 에디터다. Github에서 Sublime Text와 상당히 비슷하게 만들었는데, 내장된 패키지 매니저가 있어서 패키지 관리나 설정은 오히려 더 쉽고, 편하다.

그리고 Electron을 사용해서 만들었기 때문에 윈도, OSX, 리눅스에서 모두 동작한다. Electron에서 Webview를 사용할 수 있어서, browser-plus와 같은 패키지를 만들 수 있는 것 같다. 이 부분이 Sublime Text와 비교했을 때 가장 큰 장점일 수 있을 것 같다. 오직 Atom 에디터만 열어놓고 웹 개발을 할 수 있다.

그 밖에 마크다운 관련 패키지가 기본적으로 내장되어 있어서, 별도로 설치할 필요가 없다. CTRL + SHIFT + M을 누르면 프리뷰 화면을 보면서 마크다운 텍스트를 편집할 수 있어서 편하다.

사용하면서 Sublime Text에 있는 패키지는 대부분 찾을 수 있었고, 기능은 오히려 더 좋았다.

유용한 패키지 모음

Sublime Text와 비슷한 환경을 만들기 위해 추가로 설치했던 패키지와 기능을 간단하게 기술했다. 진하게 표시된 패키지는 특히 유용한 것이다.

패키지 이름 기능
autosave 포커스를 잃었을 때 파일 저장
open-terminal-here 터미널을 띄워준다. 윈도, 맥에서 모두 동작
plantuml-viewer plantuml 뷰어
japanese-wrap 한글 워드랩이 정상적으로 동작하지 않는 문제를 해결
Stylus Stylus Syntax Highlight
language-cjsx coffee jsx(cjsx) Syntax Highlight
language-lua lua Syntax Highlight
language-plantuml plantuml Syntax Highlight
Remote-FTP 원격 파일 관리 (ftp, sftp 지원)
git-plus 편리한 git 명령이 가능
term 터미널(윈도에서 tty.js 모듈 빌드 문제 때문에 사용 불가)
project-manager Sublime Text처럼 프로젝트 관리
browser-plus 브라우저로 웹사이트를 열 수 있음.
minimap 코드 미니맵
date “2015-10-10”와 같은 형태로 날짜 입력
highlight-selected Sublime Text처럼 단어에 더블 클릭했을 때, 선택된 단어를 표시
react react 문법. jsx 지원
react-snippets React 스니펫
terminal-panel 터미널 명령 실행
atom-autocomplete-php PHP 자동완성
autocomplete-php PHP 자동완성
atom-coffee-repl coffee repl 환경
atom-terminal 현재 파일 디렉터리에서 터미널 열기
atom-wallaby Wallaby.js로 유닛테스트
coffee-autocompile 커피 스크립트를 자동으로 컴파일
coffee-navigator 커피 스크립트를 위한 코드 네비게이션
hyperclick Hyperclick UI
vagrant 편리한 vagrant 명령. (문제 있음)

Nuclide

nuclide는 웹과 모바일 개발에 특화되고, Atom 위에 패키지들의 모음으로 만들어진 통합 개발환경이다. 다시 말하면 Hack과 Javascript 개발하기 위한 Nuclide라는 이름으로 시작하는 페이스북이 만든 패키지들의 모음이라 할 수 있다.

기본적으로 원격 개발이 가능하므로, Remote-FTP 패키지는 비활성화시킨 후 사용해야 한다. 언어는 Hack과 Javascript를 지원하고, 정의한 위치로 이동하는 기능과 자동완성을 기본적으로 포함하고 있다. tree-view와 기능이 겹치기 때문에 비활성화하는 것이 좋다.

사용하면서 발생했던 문제

현재 윈도와 OSX에서 1.0.19를 사용하고 있는데, 몇 가지 문제가 있었다.

Sublime Text에 비해서 무겁다.

에디터를 열고, 사용할 때 전체적으로 Sublime Text보다 느려 답답한 느낌이 있다.

Atom Helper 프로세스의 CPU 부하 100%로 올라가는 문제가 있다.

이 문제는 OSX에서 더 심각했다. 처음 Atom을 실행하면 프로세스가 100%로 올라간다. 어느 정도 시간이 지나면 다시 내려간다.

안정성이 떨어진다.

여러 패키지를 업데이트할 때, CPU 부하가 심하다. 아무리 기다려도 업데이트가 완료되지 않는 경우도 발생한다. 사용하다가 검색이 필요해서 CTRL + F를 눌러 검색하려고 했는데, 아무런 반응도 없다. 단축키가 아무것도 동작하지 않는 문제도 있었다. 되살리기 기능도 제대로 안 될 때도 있었다.

결론

이런 문제들 때문에, Atom의 엄청난 기능에도 불구하고, 메인으로 사용하지 않고 있다. 무거운 것은 참고 쓸 수 있지만, 안정성은 포기할 수가 없었다. 마크다운 문서 편집 용도로만 쓰고, 코딩 작업에는 Sublime Text를 사용하고 있다.

개인적으로 기능만 봤을 때, Sublime Text를 앞서는 것 같다. 앞으로 안정성만 좋아진다면 메인으로 사용하고 싶은 에디터이다.

Hot Module Replacement(HMR)

React Hot Loader 사이트에 있는 비디오를 보고, 호기심을 가졌다. 전에 live-reload 기능이 있긴 하지만, 페이지 전체를 다시 불러오는 형태라서 비효율적으로 볼 수도 있다. 에디터에서 수정 후 저장하자마자 깜빡임도 없이 브라우저에 있는 UI가 바로 바뀌는 모습이 인상적이었다. 특히 CSS 수정했을 때 유용해보였다.

React Hot Loader는 React 컴포넌트를 수정할 때 상태를 잃지 않고, 즉각적으로 live refresh를 할 수 있게 해주는 Webpack 플러그인이다. 그래서 React.js와 Webpack을 사용해야한다. React.js만 지원한다.

간단하게 Webpack은 모든 Static Web Resource를 하나의 자바스크립트 파일로 만들 목적으로 사용하고, React.js는 페이스북에서 만든 뷰 구현을 돕는 프레임웍이다. 추가로 gulp와 coffee script를 사용했다.

Webpack

HMR 기능을 사용하려면 Webpack을 사용해야한다. require, configuration, cli 3가지 방법으로 로더를 사용할 수 있다.

CLI 방식:

require로 사용하는 방법:

!로 리소스와 로더를 분리할 수 있다.

configuration 방식 :

설정해야할 것이 많기 때문에, configuration을 정의한 후 gulp에서 사용하는 방식이 좋을 것 같다.

각각의 로더는 모두 설치해야한다. devDependency로 두는 것이 좋다.

개발서버 띄우기

HMR 기능을 사용하기 위해서 간단하게 데몬을 띄울 수 있다.

CSS작업만 한다면 이렇게 CLI모드를 사용해서 작업할 수 있다.

inline과 hot 옵션은?

  • –inline : webpack-dev-server 런타임 코드를 번들(.js)에 추가한다.
  • –hot : HotModuleReplacementPlugin 을 추가하고, hot mode로 서버를 교체한다. (모듈 변경 여부를 알려주는 역할)

HotModuleReplacementPlugin을 두 번 추가하지 않도록 주의해야한다.

윈도에서 경로 문제

윈도에서 웹팩 개발 서버가 제대로 변경된 파일을 감시하지 못하는 문제가 있었는데 설정파일에서 경로를 다음과 같이 변경해야 한다.

Webpack 관련 링크 모음