Eclipse로 Node.js 개발환경 구성하기

Eclipse는 Java진영에서 주로 사용되는 IDE지만 PHP, JS 등 다른 플랫폼에서도 사용 가능하도록 다양한 버전과 플러그인들이 존재합니다. 이 포스팅에서는 Eclipse를 기반으로 한 Node.js 개발 환경 구성을 소개합니다.

JDK 설치하기

Eclipse는 자바를 기반으로 구동되는 프로그램이기 때문에 Eclipse의 구동을 위해서는 자바 개발환경이 우선적으로 설치되어 있어야 합니다. Java 개발환경의 구성을 위해서는 다음의 포스팅을 참고하시기 바랍니다.

Window 환경에서 JDK 설치하기
macOS 환경에서 JDK 설치하기

 

Eclipse 다운로드 받기

http://www.eclipse.org/downloads/eclipse-packages/ 페이지에서 Javascript and Web Developers 버전을 내려 받습니다. 다운로드를 받기 위해서 Windows의 경우 32비트 버전과 64비트 버전중에서 선택해야 합니다.

 

링크를 선택하면 페이지가 이동되는데, Download 버튼을 바로 클릭하지 않고 하단의 “Select Another Mirror”를 통해서 한국 서버를 선택하면 더 빠른 다운로드가 가능합니다.

 

 

Eclipse 설치하기

Mac OS의 경우

내려받은 *.dmg 파일을 선택하면 파인더에 이클립스가 마운트 됩니다. 마운트 된 창이 열리면 “Eclipse.app” 파일을 “Applications” 폴더에 드래그해 넣습니다. 파일의 복사가 완료되면 Mac의 Launchpad를 통해서 App의 실행이 가능합니다.

 

Window의 경우

Window용 Eclipse는 단순 압축 파일 형태로 배포됩니다. 내려 받은 파일의 압축을 해제한 후, eclipse.exe를 더블클릭하면 실행이 가능합니다.

 

 

Eclipse 실행하기

프로그램을 처음 실행하면 “workspace”의 경로를 요구합니다. workspace란 Eclipse에서 하나의 작업 단위(Project)가 저장되는 경로를 의미합니다. 좀 더 쉽게 표현하자면 소스코드가 저장될 경로를 지정하라는 의미로 이해하면 됩니다.

 

실행 후 아래와 같은 화면이 표시되면 “Exit”를 눌러서 창을 닫으세요.

 

처음에 표시되는 “Welcome” 화면도 닫습니다.

 

 

Eclipse 작업 환경 살펴보기

기본 작업 화면 구성은 아래와 같습니다. (아래의 스크린샷은 Java 버전의 Eclipse이지만 기본적으로 JS버전과 동일합니다.)

 

 

Window 버전의 Workspace 문자셋 설정하기

윈도우용 Eclipse에서는 저장되는 소스파일들에 대한 문자셋을 미리 설정해 두어야 합니다. “Window > Preferences” 메뉴를 선택하여 환경설정 화면을 엽니다.

 

환경 설정화면에서 “General > Workspace” 메뉴로 이동한 후 “Text file encoding” 옵션에서 “UTF-8″을 선택합니다.

 

참고로 Mac 버전에서의 환경설정 화면은 다음과 같이 열 수 있습니다.

 

 

Nodeclipse 플러그인 설치하기

이후부터는 윈도우용과 맥용이 동일합니다.  Eclipse에서 Node 프로젝트를 진행하기 위해서 “Help > Eclipse Market place” 메뉴를 통해서 플러그인을 설치해야 합니다.

 

Market place 화면이 열리면 “Node”로 검색하여 Nodeclipse 플러그인을 설치합니다.

 

설치될 항목들이 표시되면 “Confirm” 버튼을 클릭합니다.

 

라이센스에 동의하고 다음과정을 진행합니다.

 

이클립스 화면 하단부에서 설치 진행률이 표시됩니다.

 

설치 도중 다음과 같은 경고 창이 표시되면 “Install anyway” 버튼을 클릭하여 설치를 계속 진행합니다.

 

설치가 완료되면 다음과 같이 재시작 버튼이 표시됩니다. 프로그램을 재시작하여 설치를 완료합니다.

 

 

Node 프로젝트 시작하기

프로젝트 생성

이클립스의 툴바에서 첫 번째 아이콘을 클릭하여 “New” 화면을 열 수 있습니다.

 

프로젝트 종류 중에서 “Node.js Project”를 선택합니다.

 

프로젝트의 이름을 입력하고 기본 템플릿을 선택합니다. 여기서는 빈 프로젝트(empty)를 선택하였습니다. Finish를 누르면 프로젝트 생성이 완료됩니다. 이클립스 구동시에 설정한 Workspace 경로 안에 프로젝트 이름으로 폴더가 생성됩니다. 이 안에 소스코드가 저장되게 됩니다.

 

NPM 초기화 하기

프로젝트 생성이 완료된 후 다시 한번 “New” 대화상자를 표시합니다. 대화상자에서 “Javascript > npm Init” 항목을 선택합니다.

 

NPM 초기화 명령어를 위한 입력항목들을 요구합니다. “Use default configration”  체크를 해제하면 항목들을 직접 입력할 수 있습니다.

 

패키지 설치하기

프로젝트를 마우스 우클릭하고 “StartExlporer > Start Shell Here” 항목을 선택하면 프로젝트 경로에서 명령프롬프트(맥의 경우 터미널)이 표시됩니다.

 

터미널이 표시되면 설치하고자 하는 모듈을 npm 명령어로 설치합니다. “–save” 옵션을 사용하여 설치된 모듈을 package.json에 기록해 두는 것이 좋습니다.

 

프로젝트 새로 고침

프로젝트를 마우스 우클릭 하여 “Refresh” 메뉴를 선택하면 프로젝트가 새로 로드되면서 설치된 항목들이 표시됩니다.

 

새 소스파일 추가하기

아래와 같이 “New” 메뉴를 통해서 새로운 소스파일을 추가할 수 있습니다. 같은 방법으로 폴더 역시 추가 가능합니다. 왼쪽의 프로젝트 탐색기에서 드래그 앤 드롭으로 폴더나 파일의 배치를 변경할 수 있습니다.

 

새로운 파일을 추가하기 위해서는 파일의 이름을 입력해야 합니다.

 

기존에 진행하던 프로젝트 이전하기

Sublime 등으로 진행하던 기존의 프로젝트를 이전하기 위해서는 이클립스로 빈 프로젝트를 먼저 만들어야 합니다. 윈도우의 파일 탐색기나 맥의 Finder에서 이클립스의 프로젝트로 파일을 끌어다 넣으면 됩니다.

 

파일을 끌어다 넣으면 아래와 같이 대화상자가 표시됩니다. 기본 선택항목을 유지하고 “OK” 버튼을 클릭하면 파일이 프로젝트 안으로 복사됩니다.

 

package.json 파일에 명시된 모듈 일괄 설치하기

외부에서 프로젝트를 이전한 경우 package.json 파일에 사용되는 모듈에 대한 목록이 기록되어 있다면 “npm install” 명령어를 사용하여 일괄 설치가 가능합니다. 터미널에서 직접 명령어를 수행할 수도 있지만 이클립스에서는 아래와 같이 package.json 파일을 마우스 우클릭하여 메뉴를 통해서도 설치가 가능합니다.

 

설치가 완료되면 Console 영역에 설치 결과가 표시됩니다.

 

 

작성중인 소스코드 실행하기

소스코드의 실행을 위해서는 Node 소스코드를 선택하고 “run”버튼을 클릭합니다. 현재 소스코드가 독립적으로 실행될 경우는 바로 “run” 버튼을 클릭하면 되지만 웹 서버 본채를 위한 소스코드가 별도로 있을 경우는 해당 파일을 선택한 상태에서 실행 버튼을 눌러야 합니다.

 

“Run As” 대화상자가 표시되면 “Node.js Application”을 선택합니다.

 

프로그램이 실행되면서 화면 하단부에 노드에서 출력중인 로그가 표시됩니다.

 

만약 에러가 존재한다면 다음과 같이 에러메시지가 표시됩니다. 터미널 환경보다는 좀 더 확인하기가 수월합니다.

1 thought on “Eclipse로 Node.js 개발환경 구성하기

댓글 남기기