[Node.js] PyCharm + Node.js Develop Tip

JetBrain에서 만든 PyCharm이라고 파이썬 언어의 제일 좋다고 느끼는 IDE가 있습니다.
그런데 그것 말고도 Node.js 등의 JavaScript 를 개발하려면 꼭 WebStorm 같은 것이 있어야만 되는 줄 알고 있었습니다.

그런데 역시나... PhpStorm에서도 JavaScript의 개발 환경이 있었듯이,
PyCharm에서도 Node.js를 개발하고 디버깅 하는 기능이 들어 있었으니...

Python과 JavaScript의 언어를 한 IDE에서 개발할 수 있다는 것은,
정말이지 엄청난 만남이 아닐 수 없습니다.

점점 더 HTML5를 비롯하여 View가 JavaScript로만 해결되는 세상이 바짝 다가와 있고,
글루 언어로서의 Python (속도를 위해서는 Cython)이 컨트롤러로서의 역할을
제대로 할 수 있으니 말입니다.

암튼 잠시동안 알아낸 PyCharm (3.0.1 Professional Version)에서
JavaScript를 이용한 Node.js 개발을 알아보았습니다.
처음 시작 점으로 이용하시면 도움이 될 듯 합니다.
(일단 Mac OS X 에서 해 보았는데, 우분투도 대동소이합니다)

우선 node를 돌리기 위해서는 node 를 설치합니다.

맥에서는 homebrew를 설치한다음,

$ brew install node
명령으로 쉽게 설치합니다.

다음은 노드를 이용하기 위하여 설정에서 plugin으로 검색을 하여 "Node" 라는 플러그인을 검색합니다.
처음에는 안 보이기 때문에 "Browse"를 누릅니다.

이제 검색 창에서 Node로 검색하여 "NodeJS"를 설치합니다.

Download and Install 을 합니다.

NodeJS 플러그인이 제대로 돌려면 재기동하라고 하는군요.

이제 새로운 프로젝트를 만드는데, 위와 같이 Project type을 "Node.js Express App" 라고 설정합니다.
(Express는 Node.js의 간단한 마이크로 MVC 모델러입니다)

그러면 위와 같이 설정 화면이 나타나는데, 노드 인터프리터를 지정하고 npm을 지정하면 Exress 버전과 Template 엔진 등을
지정하고 "OK" 합니다.

그러면 디버깅 등을 위한 Node.js 소스등을 다운받는 창이 나타납니다.

그러면 왼편에 express를 비롯한 EJS 등의 Node.js Application 개발 환경이 나타납니다.
(마치 Django 혹은 RoR의 App 처럼 보이기도 합니다)

그러면 위와 같이 노드 App에서 중단점을 설정하고 디버깅이 가능합니다.
(파이썬의 디버깅과 동일합니다)

이제는 일반 파이썬 프로젝트에서 
일반적인 javascript의 node.js 디버깅을 간단히 살펴보겠습니다.

위와 같은 간단한 js를 new해서 만듦니다.

본 프로젝트가 node.js 용 프로젝트가 아니므로 설정>JavaScript>Libraries 에서 Node.js 관련 항목을 체크하고 OK 합니다.

이제는 Run 혹은 Debug로 해당 JavaScript를 돌려볼 수 있습니다.

이렇게 자체 JavaScript 파일을 디버깅하고 결과를 확인해 볼 수 있네요~~


참고로, Node.js에서 JavaScript를 이용하여 App을 만드는 설명으로,

위와 같은 nodebeginner.org 라는 사이트가 있습니다.
읽어보시면 도움이 많이 될 것 같습니다.


어느분께는 도움이 되셨기를...

덧글

  • SW 2014/02/17 14:23 # 삭제 답글

    많은 도움되었습니다. 감사합니다 ^^
  • 지훈현서아빠 2014/02/17 14:40 #

    도움이 되셨다니 저의 보람입니다~~ ^^
  • 아리수 2014/05/26 16:07 # 삭제 답글

    잘 읽었습니다. 감사합니다. ^^.

    블로그 글들을 읽다보니 Pycharm을 자주 사용하시는 듯 합니다.
    Pycharm 사용법을 자세하게 설명한 곳이나 자료 정보를 알 수 있을까요?^^;..
  • 지훈현서아빠 2014/05/27 17:03 #

    글쎄요... 그냥 너무 익숙하게 사용하는 것만 사용하다 보니 특별히 참조하는 것은 없네요...
댓글 입력 영역

구글애드텍스트