이클립스에서 웹페이지 개발을 위해 Maven Project를 생성하고 Tomcat 연동을 통해 웹 상에 “Hello World”를 표시하는 방법을 알아보도록 하겠습니다.
Maven Project의 장점은 라이브러리 관리가 편리하고, 다양한 플러그인 활용할 수 있기 때문에 유용하게 사용됩니다. 또한 개발 이후 배포할 때도 쉽고 간편하게 할 수 있기 때문에 많은 분들이 사용하고 있습니다.
1. 프로젝트 생성
우선 이클립스 환경에서 프로젝트를 새롭게 생성하겠습니다.
File -> New -> Other
Wizards: 항목에 maven 입력합니다.
우리는 Maven Project를 생성할 것이기 때문에 Maven Project 선택하고 다음으로 넘어갑시다.
새로운 Maven Project 생성 과정에서 Use default Workspace location 항목만 선택하고 다음으로 넘어가겠습니다.
** 프로젝트 저장 위치를 선택합니다.
특별한 저장 위치를 선택하지 않을 것이기 때문에 기본값으로 현재 이클립스에 설정한 workspace 사용합니다.
메이븐 템플릿 중 Artifact id 항목의 maven-archetype-webapp을 선택합니다.
보통 아래쪽에 위치되어 있으니 스크롤을 내려서 확인해보시면 될 거 같습니다.
마지막으로 Group Id와 Artifact Id를 설정하겠습니다.
자신이 원하는 Group Id와 Artifact Id를 입력하고 Finish 클릭합니다.
** 일반적으로 Group Id는 도메인, Artifact Id는 프로젝트명으로 입력합니다.
2. 프로젝트 Build Path 설정
프로젝트를 생성하면 Project Explorer에 새로 만든 프로젝트가 표시됩니다.
그런데 프로젝트에 빨간색으로 X 표시가 나타납니다.
Markers 창에서 에러가 무엇인지 확인해보겠습니다.
JSP Problem (1 item)
The superclass “javax.servlet.http.HttpServlet” was not found on the Java Build Path
이것은 프로젝트 Build Path에 “javax.servlet.http.HttpServlet”가 없다는 내용입니다.
문제를 해결하기 위해서는 프로젝트의 Build Path를 설정해야 하기 때문에 프로젝트 설정하는 곳으로 가보겠습니다.
우선 오늘 생성했던 프로젝트에서 프로젝트 우클릭 -> Properties -> Java Build Path에 들어가서 상단 탭 Libraries를 선택합니다.
Libraries탭에서 우측 목록 중 AddLibrary… 항목을 선택합니다.
Add Library의 세부 사항이 뜨게 되는데 여기서 Server Runtime 선택 후 내가 사용할 Tomcat 버전을 선택 후 Finish 클릭합니다.
설정이 완료되었다면 Apply and Close 버튼을 클릭하여 설정을 저장합니다.
3. Tomcat 연동을 위한 설정
이제 Tomcat 설정을 해보겠습니다.
Apache Tomcat 공식 홈페이지에 접속하여 원하는 버전을 다운로드 하고 적당한 경로에 압축파일을 풀어둡니다. 저는 Tomcat 7 버전을 사용하였습니다.
** Binary Distributions의 Core 항목 zip 파일 다운로드
Tomcat 다운로드하여 준비가 끝났다면 이클립스로 돌아와 Servers 탭에서 [No servers are available. Click this link to create a new server…] 링크를 클릭하여 서버 생성 창을 띄웁니다.
Apache 하위 항목에서 다운받은 Tomcat 버전을 선택 후 Tomcat installation directory에 아까 zip 파일 다운로드 받아서 압축 풀어둔 폴더 경로를 선택하여 설정을 완료합니다.
마지막으로 Tomcat Server에 오늘 만든 프로젝트를 추가헤줘야 합니다.
Servers 탭에서 방금 설정한 Tomcat을 우클릭 -> Add and Remove를 클릭하여 설정 화면 창을 띄웁니다.
그다음 생성한 프로젝트를 클릭 후 Add 버튼 클릭하여 추가하고 Finish 버튼 클릭합니다.
4. 프로젝트 동작 테스트
이제 모든 설정이 끝났습니다. 마지막으로 정상적으로 작동이 되는지 확인하고 마무리하도록 하겠습니다.
웹 브라우저에 접속하여 "localhost:8080/testProject" 주소로 접속해보겠습니다.
** "localhost:8080/프로젝트명"
server 생성 시 기본 포트는 8080입니다.
Hello World 문구가 잘 표시되었습니다. 오늘 목표는 달성했네요. ^^
'IT, 개발 > 웹개발' 카테고리의 다른 글
| MacOS 맥북 이클립스 자동완성 기능 사용하기 (0) | 2022.06.21 |
|---|---|
| 자바스크립트 오디오 파일 실행하기 (JavaScript mp3, wav 등등) (0) | 2022.06.15 |
| 자바스크립트 MQTT 통신 예제 (mqttws31.js / mqttws31-min.js) (0) | 2022.04.08 |
| 이클립스(Eclipse)에서 Spring Framework 개발 환경 구축하기 (Maven Project) (2) | 2022.01.07 |
| 자바스크립트 - for문 안에서 Ajax 사용 시 순서 안맞는 문제 해결 (0) | 2021.12.22 |
