Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

nide : 웹브라우저에서 사용하는 심플한 Node.js용 에디터

nide는 웹브라우저에서 사용할 수 있는 Node.js용 IDE입니다. nide는 브라질의 Marco Aur?lio가 2011년 여름에 열렸던 해카톤같은 방식으로 48시간동안 프로젝트를 만드는 node knockout에서 만든 프로젝트였습니다.  Knockout 행사 후 틈틈히 버전업그래이드를 하다가 얼마전에 0.2.0으로 업그래이드를 했습니다.



nide
nide는 웹브라우저내에서 동작하는 IDE이므로 웹어플리케이션이라고 할 수도 있습니다. 설치는 간단한게 npm을 이용해서 글로벌에 설치하면 됩니다.(현재 윈도우즈에서는 설치는 되는데 실행이 되지 않습니다. 이슈를 하면 윈도우즈의 이슈를 수정한 듯 한데 아직 버전업데이트로 반영되지는 않았습니다.)

npm install -g nide

이제 node.js 프로젝트 폴더에 가서 nide init 명령어를 입력합니다.

nide init으로 실행하는 화면

자동으로 기본 웹브라우저가 실행되면서 다음과 같은 화면이 나타납니다.

nide의 프로젝트 설정 화면

이 화면은 package.json구성을 위해서 프로젝트의 기본정보를 입력하는 화면입니다 .현재 폴더가 빈 폴더였기 때문에 자동으로 프로젝트 구성화면이 나타나고 기존에 이미 node.js 프로젝트가 있는 폴더였다면 바로 IDE화면으로 넘어갑니다. 프로젝트 폴더 어디에서나 바로 nide를 실행해서 편집할 수 있다는 의미입니다.

nide의 파일 추가 화면

좌측에 네비게이션부분에 폴더 구조가 나타나고 앞에서 생성한 package.json이 추가된 것을 확인할 수 있습니다. 좌측 하단의 + 버튼을 클릭하면 위와 같은 프롬프트로 파일명을 입력해서 생성할 수 있습니다.(그 옆에는 파일 삭제나 폴더추가 버튼이 있습니다.)

nide의 에디팅 화면

파일이 생성되었고 우측의 에디터에서 파일을 수정할 수 있습니다. nide는 저장버튼이 따로 없고 잦은 주기로 자동으로 저장을 합니다. 웹IDE이므로 약간은 반응이 느린 기분은 있지만 별로 불편하지 않게 코딩을 할 수 있고 위처럼 깔끔하게 코드 하일라이팅도 지원합니다. 물론 코드 자동완성 같은 기능은 없습니다. 에디터 상단의 Versions 버튼을 누르면 다음과 같은 화면이 나타납니다.

nide의 히스토리 비교 화면

내부적으로 파일의 변경사항을 추적하고 있다가 웹브라우저라는게 의심스러울만큰 깔끔한 맥OS 라이온방식의 버전히스토리 UI로 보여줍니다. 왼쪽이 현재 파일이고 우측이 히스토리 내역입니다. 원하는 히스토리로 이동하면서 비교하거나 Revert를 눌러서 과거로 돌아갈 수 있습니다.

nide의 Node.js 레퍼런스 문서 화면

Node.js Documentation 메뉴를 클릭하면 Node.js의 레퍼런스 문서를 볼 수 있습니다. 웹IDE인 만큼 자연스럽게 Node.js 레퍼런스문서로 내부에셔 연결이 됩니다.

nide의 npm 화면

Node.js용 IDE인 만큼 npm도 지원하고 있습니다. 좌측의 NPM 메뉴를 클릭하면 위와같은 화면이 나타납니다. 하단의 + 버튼을 눌러서 사용할 모듈을 추가할 수 있습니다.

nide에서 npm으로 모듈을 설치하는 화면

프롬프트에 설치할 모듈의 이름을 적어주면 됩니다. 확인을 눌러도 따로 설치중인 과정을 보여주거나 하지는 않습니다. 적용이 안된것 같은 기분이 들 수도 있는데 모듈마다 설치하는데 시간이 다르므로 기다리거나 다른 작업을 하다가 돌아오면 정상적으로 설치가 되어 추가된 것을 다음과 같이 볼 수 있습니다
.
nide에서 npm의 모듈이 설치된 화면

express와 jade를 설치했고 설치된 버전이 나타납니다. 커맨드라인이 익숙하지 않아서 npm을 사용하기가 힘든 사람들에게는 꽤 괜찮은 기능으로 보입니다.




nide 맥 애플리케이션
Nide는 0.2.0부터 맥용 네이티브앱도 제공하고 있습니다 . 다운로드 받아서 실행하면 다음과 같은 설치화면을 볼 수 있습니다.

nide의 맥 애플리케이션 설치화면

Step 1은 Node.js를 설치하는 것으로 이미 설치했다면 건너띄고 바로 Step 2에서 Nide를 설치하면 됩니다.

nide 맥 애플리케이션

앞에서 본것과 거의 동일한 IDE가 나타납니다. 자세히 보면 웹브라우저가 아니라 맥 어플리케이션입니다. Cloud9 IDE 같은 강력한 웹IDE가 이미 있기는 하지만 간단히 사용하거나 IDE를 사용하기 어려운 곳에서 쓰기에 괜찮아 보입니다.
2012/02/10 01:02 2012/02/10 01:02