이클립스에서 웹 애플리케이션 실습하기

이클립스에서 웹 프로젝트 생성

이클립스에서는 한 개의 프로젝트가 한 개의 웹 애플리케이션입니다. 그리고 프로젝트 이름이 바로 웹 애플리케이션 이름입니다.

1. 이클립스를 열고 Project Explorer 영역에서  Create a Dynamic Web project를 선택합니다.

Create a Dynamic Web project 선택

 

2. 프로젝트 이름에 webShop이라고 입력하고 Dynamic web module_vesrion을 3.0으로 변경한 후 Next를 클릭합니다.

프로젝트 이름 입력 후 Next 클릭

 

3. 이클립스에서 지정한 기본값 그대로 두고 Next를 클릭합니다.

기본값 체크 후 Next 클릭

 

4. Content directory를 webContent로 변경하고, web.xml을 생성할 것인지 묻는 체크박스에 체크한 후 Finish를 클릭합니다.

Generate web.xml deployment descriptor 옵션에 체크한 후 Finiah 클릭

 

5. Project Explorer에 webShop 프로젝트가 생성된 것을 확인할 수 있습니다.

이클립스에 생성된 프로젝트

 

이클립스에서 HTML 파일 생성

앞서 만든 webShop 프로젝트 안에 웹 브라우저에서 요청할 간단한 HTML 파일을 만들어 보겠습니다.

1. 프로젝트 하위 메뉴에서 webContent를 선택하고 마우스 오른쪽 버튼을 클릭한 후 New > HTML File을 선택합니다.

New > HTML File 선택

 

2. 파일 이름으로 main.html을 입력한 후 Finish를 클릭합니다.

파일 이름 입력 후 Finish 클릭

 

3. main.html 파일에 다음과 같이 간단한 HTML 코드를 작성한 후 Ctrl + S를 눌러 저장합니다.

이클립스에서 main.html 파일 작성 후 저장

 

이클립스와 톰캣 연동

이제 이클립스에서 만든 프로젝트를 톰캣 컨테이너에 등록한 후 실행하면 됩니다.

1. 이클립스 하단의 Servers 탭을 선택하고 마우스 오른쪽 버튼을 클릭한 후 New > Server를 선택합니다.

Servers 탭애서 New > Server 선택

 

2. 서버 설정 창의 Apache 항목에서 Tomcat v9.0 Server를 선택한 후 Next를 클릭합니다.

Apache > Tomcat v9.0 Server 선택

 

3. 톰캣 설치 디렉터리를 설정하기 위해 Browse...를 클릭하여 톰캣 홈 디렉터리(C:\tomat9) 경로를 선택한 후 폴더 선택을 클릭합니다.

Browse... 클릭

 

톰캣 홈 디렉터리 선택 후 폴더 선택 클릭

 

4. 설정 경로를 한 번 더 확인하고 Finish를 클릭합니다.

C:\tomcat9 설정 경로 확인

 

5. 이클립스 하단의 Servers 탭을 보면 다음과 같이 표시됩니다.

Server 탭에 생성된 톰캣

 

6. 이클리스에서 톰캣 컨테이너를 추가하면 다음과 같이 프로젝트 탐색기에 Servers 항목이 추가되면서 톰캣과 관련된 xml 파일들이 나타납니다. 이클립스에서 톰캣 컨테이너를 설정할 때  톰캣 루트 디렉터리에 있던 여러 가지 xml 설정 파일들이 이클립스 Project Explorer 상단에 자동으로 복사된 것입니다.

이클립그에 생성된 톰캣의 여러 가지 설정 파일들

 

이클립스와 연동한 톰캣에 프로젝트 등록

1. Servers 탭 아래에 등록된 톰캣 서버 Tomcat v9.0 Server at localhost [Stopped]를 선택한 후 마우스 오른쪽 버튼을 클릭하여 Add and Remove를 선택합니다.

Servers 탭에서 마우스 오른쪽 버튼 클릭하여 Add and Remove 선택

 

2. 추가할 프로젝트, 즉 여기서는 webShop을 선택한 후 Add를 클릭해 톰캣에 추가(등록)합니다. 이어서 Finish를 클릭하여 등록을 마칩니다.

webShop을 선택하고 Add 클릭 후 Finish 클릭

 

3. 톰캣 서버에 webShop 프로젝트가 등록된 것을 확인할 수 있습니다.

톰캣에 추가된 webShop 프로젝트

 

4. server.xml을 더블클릭하여 이클립스에서 열고 하단의 Source 탭을 클릭합니다. 스크롤을 내려 <Context> 태그 부분을 보면 프로젝트에 대한 컨텍스트가 자동으로 추가된 것을 확인할 수 있습니다. 이클립스에서 자동으로 추가되는 컨텍스트 이름은 프로젝트 이름과 동일하게 설정됩니다.

톰캣의 server.xml에 컨텍스트로 등록된 프로젝트

 

웹 브라우저에서 요청하기

이제 이클립스에서 톰캣을 실행한 후 웹 브라우저로 요청해 보겠습니다.

1. Server 텝 오른쪽에 있는 녹색 실행(▶) 버튼을 눌러 클릭헤 서버를 실행합니다.

Server 탭 오른쪽 녹색 버튼 클릭

 

2. 다음과 같은 보안 경고창이 나타나면 액세스 허용을 클릭합니다.

 

3. 그러면 다음과 같이 이클립스 Console 탭에 로그가 출력되면서 톰캣이 실행됩니다.

톰켓이 실행되며 출력되는 로그들

 

4. 이제 웹 브라우저에서 다음 주소로 요청하면 브라우저에 메시지가 출력됩니다.

http://localhost:8090/webShop/main.html

톰캣 실행 후 웹 브라우저에서 요청한 결과: 메시지 출력