eclipse.png         


안녕하세요.

 

유형석입니다.

 

오늘은 eclipse에 Node.js 환경을 만들어 보도록 합시다.


기존에 Nodeclipse 라는 플러그인을 설치 하는 방법이 있긴 합니다.


제가 알려드릴 방법은 Node.js 에 필요한 플러그인을 모두 같이 설치 하는 방법입니다.

물론 여기에 Nodeclipse도 포함 되어 있습니다.


JDK, Eclipse 모두 32비트로 설치 되어 있습니다.

Eclipse 버전은 JUNO(JEE) 이며 그 이하의 버전에서는 정상 설치가 되지 않을 수 있습니다.


 

1. 방법

 


enide_nodejs_ide_01.png


http://marketplace.eclipse.org/content/enide-eclipse-nodejs-ide#.UbQzgcywcwE


위의 링크로 들어 가 주세요!

대~충 설명을 보면 Eclipse에 Node.js 개발을 위한 IDE 환경을 한방에 설치 해 주는 파일입니다.



enide_nodejs_ide_02.png


전 익스 플로러 10을 쓰는데 링크를 그냥 클릭하면.... 친절하게 파일이 웹브라우져에서 열립니다-_-;

때문에 링크에서 마우스 오른쪽 클릭을 하고 [다른 이름으로 대상 저장(A)...] 를 클릭합니다.


물론 링크를 클릭하셨을때 파일이 그냥 다운로드 되시면 생략 하셔도 됩니다.



enide_nodejs_ide_03.png


파일 이름이 기본으로는 ENodeIDE.txt 로 되어 있고 파일 형식도 *.txt 로 되어 있으실 텐데요.

파일 형식을 모든 파일 (*.*) 로 변경 해주시고 파일이름을 ENodeIDE.p2f 로 변경해 주세요.

파일 이름은 단순히 확장자만 변경 한 것 입니다.



enide_nodejs_ide_04.png


이제는 이클립스를 실행 해주세요!

다시 한번 말씀 드리지만 JUNO 버전을 기준으로 작성 되어있습니다.



enide_nodejs_ide_05.png


자 한방으로 설치를 해보도록 합시다.


File -> Import 메뉴를 클릭해 줍시다. 그러면 오른쪽과 같은 화면이 나옵니다.

여기서 Install -> Install Software Items from File 를 선택해 줍니다.



enide_nodejs_ide_06.png

 

From description file: 에 아까 다운로드 받았던 p2f 파일의 경로와 이름을 적거나 Browse 버튼으로 찾아서 선택해 줍시다.

ENodeIDE.p2f 파일입니다~ 잊지 않으셨죠?



enide_nodejs_ide_07.png


Next 버튼을 누르면 프로그래스 바가 올라 가는 것을 볼 수 있습니다.

무엇을 하는 과정이고 하니... 해당 플러그인의 의존성이나 이미 설치 되어 있는 것 등을 조사 하는 과정 입니다.

좋은 과정이니 잠시만 기다려 줍니다.



enide_nodejs_ide_08.png  


오 마이갓! 뻘건 엑스 동그라미가 나타 났습니다.

대~충 보니 작업을 제대로 완료 할 수 없었다고 나옵니다. 자세한걸 보려면 디테일 가서 보랍니다.


그래서 Details 를 보니...

JavaScript Development Tools 가 이미 설치 되어 있거나, 업데이트가 이미 되어 있다고 합니다.

아마도 Eclipse를 JEE로 설치를 해서 그런지 원래 설치가 되어 있나 봅니다.

다른 버전을 쓰시는 분들은 위의 메시지가 나오지 않을 수도 있습니다.



enide_nodejs_ide_09.png


위에서 문제가 되었던 JavaScript Development Tools 체크박스를 해지 하니 Next > 버튼이 활성화 됐습니다. 씐나!



enide_nodejs_ide_10.png


다음으로 진행 하니 이런 창이 나옵니다.

이 과정은 무엇을 하는 과정이고 하니...필요한 플러그인 파일들을 인터넷에서 다운로드 한 뒤 설치 하는 과정입니다.

이 과정또한 좋은 과정이니 내버려 둡시다.



enide_nodejs_ide_11.png

 

엇 중간에 보안 관련 경고창이 나옵니다.

대~충 읽어 보니 당신이 지금 설치 하려는 목록중에 서명되지 않은 프로그램이 있답니다.

그래도 설치를 할거냐고 묻는 창이네요.


ENodeIDE의 경우 이클립스 홈페이지에도 상위 권이고, 마켓플레이스에서도 상위권이기 때문에 뭐 해되는 파일은 아닐것 같으니

OK를 선택 합니다.



enide_nodejs_ide_12.png


새로운 창이 뜨네요. 아마 문제가 되는 서명되지 않은 프로그램이 이 것 같네요.

아까 설치 프로그램 목록을 생각해보니 Jeeyul's Themes 가 있던것 같습니다.

그냥 단순히 이클립스 테마 관련인것 같으니 OK로 진행! 고고 씡!



enide_nodejs_ide_13.png


다 설치되면 소프트웨어를 이클립스에 적용 하기 위해서 이클립스 재시작을 시켜 줘야 합니다.

Yes 버튼을 클릭합니다.



enide_nodejs_ide_14.png


재 시작이 되면 NodeJS 환경 선택을 쉽게 하기 위해서 위와 같이 추가해 줍니다!

맨 오른쪽 그림처럼 Java EE 옆에 Node 가 있어야 합니다.

뭐 꼭 Java EE옆이 아닌 그냥 Node만 보이시면 됩니다..전 JEE 버젼이니 다소 다를 수도 있습니다.



enide_nodejs_ide_15.png


자 이제 샘플 하나 만들어 볼까요?

아까 추가한 Node가 활성화 되어 있어야 위와 같이 New 버튼을 클릭 했을 때 Node.js 관련 메뉴들이 보입니다.

New -> Node Express Project 를 선택해 봅시다.



enide_nodejs_ide_16.png


공포의.. 뻘건 엑스 동그라미가 또 나왔습니다.

대~충 보니 Express를 못찾 겠다고 나오네요. Express를 인스톨 하거나 환경 설정을 체크해 보라고 합니다.



enide_nodejs_ide_17.png



우선 환경 설정을 살펴 보기로 합시다.

Window -> Preferences -> Nodeclipse

를 선택하면 Express Path: 를 넣을 수 있게 되어 있습니다.


자! 이제 선택해서 넣기만 하면 됩니다.

그런데 제가 설치를 안했습니다..



enide_nodejs_ide_18.png


node.js 에서 express 사용하기


위의 글을 보고 잽싸게 설치 하도록 합니다.



enide_nodejs_ide_17.png



자 이제 다시 도전! Express Path: Browse... 버튼을 클릭!



enide_nodejs_ide_19.png  

저는 express 인스톨 할때 C:\Program files\nodejs\ 에서 npm install express 를 했습니다.

그럴 경우 C:\Program files\nodejs\node_modules\express\bin 에 express 파일이 위치 하고 있습니다.


위의 링크를 보시고 똑같이 하셨다면 C:\nodejs\node_modules\express\bin 에 있으실 수 도 있습니다.



enide_nodejs_ide_20.png


자 드디어 express 위치까지 넣어 줬습니다. OK 버튼 클릭!


enide_nodejs_ide_15.png  


자 다시... 이 과정으로 돌아 옵니다.



enide_nodejs_ide_21.png


오.. 공포 마크가 없어 졌네요.

이제 만들 프로젝트 이름을 넣어 주고 Finish 를 클릭!



enide_nodejs_ide_22.png


그러면 프로젝트가 정상적으로 만들어 지는데

이때 재미있는 것이 자신이 필요한 플러그인을 자동으로 다운로드 합니다.


이 부분에 대해서는 다음번에 설명해 드리도록 하겠습니다.



enide_nodejs_ide_23.png


자 이제 실행을 한번 해볼까요?


app.js -> Run As -> Node Application


을 선택하면 실행 됩니다.



enide_nodejs_ide_24.png


콘솔 창을 보니 정상으로 실행 됐습니다.



enide_nodejs_ide_25.png


브라우져를 하나 띄우고, localhost:3000 을 입력해 봅시다.

위와 같은 화면이 나오면 성공!!


이상이네요. 아래 부터는 여담입니다.



이 글을 보실때 매우 혼란스러운 부분이 있을거라 예상합니다.

그 이유는 예외 상황이 전부다 함께 있다 보니 왔다 갔다 조금 복잡하죠?


뭐 물론 그림과 글의 조화도 조잡한 것도 있긴 합니다...-_-;


제가 예외 상황을 함께 집어 넣은 것은

어느 것을 하든 하다가 막히는 부분이 생기기 마련입니다.


이럴때 어떻게 헤쳐 나갈지에 대한 작은 어드바이스 차원에서 넣어 두었습니다.


대부분의 분들이 영어에 대한 거부감 때문인지 제대로 읽지 않고 그냥 왜안되지? 하는 상황을 많이 봅니다.


위 과정의 예외 상황을 보시면 아시겠지만 인터넷을 검색하거나 그런것 없이

그냥 화면에 나오는 정보로도 충분히 해결 할 수 있습니다.


아니면 대부분 거의 매뉴얼에 명시되어 있습니다. 물론 영어로...-.,-;

정모르 실때면 영어가 뭐라고 하는지 번역기를 돌리셔도 큰 도움이 됩니다.


물론!! 아닐 경우도 있습니다. 그럴때는 매뉴얼 만든 사람을 욕하세요.

뭐 근데 대다수 매뉴얼이나 하라는 대로 하면 해결 됩니다.


이 게시판은 회사 포럼으로 보실 수도 있겠지만

혹여 삽질하다가 알게된 해결방법, 간단한 팁 등 공유 하시고 싶으신 분들 자유롭게 글 남겨 주셔도 됩니다!

한글로된 정보를 많이 공유 해봅시다~


오늘은 여기까지!

 

  짧은글 읽어 주셔서 감사합니다.