[Js] - 이클립스(Eclipse) 웹 프로젝트 생성

요즘에 자바스크립트로 간단한 알고리즘 공부하고 있는데요.

이클립스로 자바스크립트 실행가능하도록 웹 프로젝트를 생성해봅시다.

 

Eclipse EE (Eclipse IDE for Enterprise Java and Web Developers) 필요

 

 

1. Apache Tomcat 설치

zip파일 다운로드 후 압축 풀기

https://tomcat.apache.org/download-90.cgi

Apache Tomcat® - Apache Tomcat 9 Software Downloads

 

 

 

2. 이클립스에서 Dymanic Web Project 생성

이클립스에서 [File] - [New] - [Other] 선택하면 아래처럼 프로젝트 타입 선택 가능

[Web] - [Dynamic Web Project] 선택 후 Next

 

웹프로젝트 이름을 입력하고, 웹서버를 설정해야 합니다. (웹프로젝트는 웹서버로 실행할 수 있습니다.)

[New Runtime]을 클릭합니다.

그러면, Apache 버전을 선택할 수 있습니다. 저희는 첫번째 단계에서 v9.0을 다운받았으니깐 v9.0을 선택해줍니다.

 

[Borwse] 버튼을 클릭하여 처음에 다운받은 apache폴더의 bin폴더가 존재하는 디렉토리를 설정해주시면 됩니다.

만약 apahce다운받지 않았으면, [Download and Install] 버튼을 클릭하여 다운받아도 무방합니다.

JRE의 콤보박스를 선택하여 설치된 jdk로 지정해주어야 합니다.

서버 설정이 완료됐다면 [Finish]를 클릭하여 웹프로젝트 생성을 마무리합니다.

 

 

3. Jsp파일 생성

Web Project 우클릭 - [New] - [Jsp File] 선택합니다.

 

webapp 디렉토리를 선택하여 하위에 jsp파일이 생성되도록 합니다.

파일명 입력 후 [Finish] 버튼을 클릭하여 마무리합니다.

 

간단하게 jsp파일을 수정해줍니다.

저는 title과 body에 HelloWorld 문구를 추가했고, 콘솔에 "hello"를 출력하도록 간단한 js 코드를 추가했습니다.

 

4. Server 생성

Servers 탭에서 New Server 관련 파란색 링크를 클릭합니다.

 

Apache - Tomcat v9.0 Server 선택하고 [Finish]버튼을 클릭합니다.

 

생성된 서버 항목을 우클릭하고 [Add and Remove] 버튼을 클릭합니다.

 

생성한 웹프로젝트를 선택하고 [Add]버튼을 클릭합니다.

오른쪽으로 웹프로젝트가 정상적으로 선택되었다면, [Finish] 버튼을 클릭하여 마무리해줍니다.

 

5. JSP파일 실행

생성한 jsp파일 우클릭 후 [Debug As] - [Debug on Server] 클릭합니다.

 

생성한 server를 선택하고, 하단에 Always use this server... 체크박스를 선택하여 

해당 웹프로젝트를 실행할때마다 매번 서버를 지정하지 않도록 합니다.

[Finish] 버튼을 클릭하여 실행을 마무리합니다.

 

그러면 이렇게 HelloWorld 타이틀을 가진 웹화면이 조회됩니다.

F12로 개발자 도구를 열면 console에 "hello" 문구가 출력된 걸 확인할 수 있습니다.

만약에 크롬이나 원하는 인터넷 브라우저로 조회하고 싶으면, 해당 url을 주소창에 조회하면 됩니다.