이클립스(Eclipse) 자바스크립트 실행 환경 만들기, 웹 프로젝트 생성방법

이클립스(Eclipse) 자바스크립트 실행 환경 만들기, 웹 프로젝트 생성방법

 

환경 : Eclipse Mars, Android 4.2.2

 

오늘은 이클립스에서 자바스크립트를 테스트할 수 있는 환경을 만들어 보겠습니다. 다른 툴들도 많이 있지만 Java 언어를 사용하다 보니 이클립스에 익숙하고 실행 환경이 통합되어 있어서 개발하기 편합니다. 웹 서버를 이클립스 내부에서 관리할 수 있기 때문에 한곳에서 개발과 빌드가 가능합니다.

 

▼ 자바스크립트 실행환경을 구성한다는 것은 웹 어플리케이션을 환경을 만드는 것과 같습니다. 그래서 이클립스 새 프로젝트 생성시 Dynamic Web Project 를 선택하셔야 합니다. 

 

▼ Dynamic Web Project 를 선택하시면 다음 단계에서 웹서버를 설정해야 합니다. 자바는 가상머신이 있으면 되지만 Web Application 은 웹서버가 필요합니다. [New Runtime] 버튼을 누르게 되면 서버를 선택할수 있는 창이 뜨게 됩니다. 가장 많이 사용하는 아파치 톰캣을 선택합니다.

 

▼ 첫번째 단계에서 프로젝트명과 웹서버를 선택하셨다면 두번째에서는 JDK 와 아파치 서버가 있는 폴더를 지정해야 합니다. 다운받은 아파치 서버가 없다면 Download and Install 을 눌러 설치하시면 됩니다. JDK 는 콤보박스를 눌러 선택하시면 되는데 이전에 설치된 것이 없다면 [Installed JREs..] 버튼을 클릭해서 찾습니다.

 

▼ 아파치 웹서버를 설치하기 위해 Download and Install 버튼을 클릭하시면 설치를 위한팝업창이 듭니다. 라이센스에 동의하시고 설치를 진행합니다.

 

▼ 웹 어플리케이션 프로젝트가 완료되었다면 제대로 되는지 테스트 하기 위해 소스를 입력할 파일을 만들어야 겠죠. WebContent 폴더를 선택하고 오른마우스를 눌러 [HTML File] 을 선택합니다.

 

▼ HTML 파일에 자바스크립트 소스를 입력하고 실행을 위해 프로젝트를 선택한뒤 오른마우스를 누릅니다. 실행에는 두가지 모드가 있습니다. 디버그와 런타임모드 입니다. 디버깅을 위한 실행이 아니라면 [Run As] 로 가서 [Run On Server] 을 클릭합니다.

 

▼ 그럼 바로 실행되는 것이 아니라 웹서버를 설정하라는 메시기창이 뜹니다. 새로 만든 프로젝트를 구동할 서버를 선택하는 과정입니다. 프로젝트 만들때 설치한 웹서버 버전을 선택하시면 되겠죠. 그리고 매번 선택하지 않도록 [Always use this server when running the project] 를 체크합니다.

 

▼ 구동하자마자 바로 콘솔에 웹서버 구동 로그가 뜨고 탭이 추가됩니다. 탭으로 추가된 화면은 이클립스에 내장되어 있는 브라우저입니다. 익스플로러나 크롬을 별도로 띄우지 않고 바로 테스트가 가능합니다.

 

▼ 만약 외부 브라우저에서 테스트하고 싶다면 주소를 복사해서 붙여넣기 하시면 됩니다. 그럼 아래 그림처럼 실행된 화면을 볼수 있습니다.