[웹개발] Eclipse 웹 개발 환경 구축하기

안녕하세요

로로봉입니다 : )

오늘은 Eclipse로 웹 개발 환경을 구축해보도록 하겠습니다.

이클립스에서 jdk를 지원하는 버전이 있기 때문에 아래와 같은 버전으로 jdk와 eclipse를 맞춰서 설치해주겠습니다.

1) Eclipse 2020-06
2) jdk 1.8
3) apache tomcat 9

---

1) Eclipse 설치하기

기존 JAVA 프로그램을 학습하기 위해서도 Eclipse를 여러번 설치했었지만 이번에는 웹 환경을 구축하기 위해 버전을 맞춰서 설치해보도록 하겠습니다.

우선 아래 사이트에 접속해줍니다.

The Community for Open Innovation and Collaboration | The Eclipse Foundation

More - Download 버튼을 눌러줍니다.

[ 그림 1 : Eclipse 홈페이지 ]

Download Packages 를 눌러 줍니다.

[ 그림 2 : 이클립스 다운로드 페이지 ]

스크롤을 조금 내리면 MORE DOWNLOADS 사이드바가 보이고 거기에서 Eclipse 2020-06(6.16)을 선택해줍니다.

[ 그림 3 : Eclipse 이전 버전 선택 ]

설치 운영체제에 맞는 것으로 다운로드 해줍니다.

[ 그림 4 : Eclipse 다운로드 ]

다운 받아진 압축 파일을 압축만 풀면 Eclipse는 사용이 가능합니다.

[ 그림 5 : Eclipse 아이콘 ]

실행하면 아래와 같이 Eclipse가 실행됩니다.

[ 그림 6 : Eclipse 실행 화면 ]

workspace를 설정해줍니다. 이때, 다시 안뜨게 하고 싶으신 경우 체크박스를 체크해줍니다.

[ 그림 7 : workspace 설정 ]

실행이 잘 되었습니다.

[ 그림 8 : Eclipse 실행 완료 ]

 

---

2) 자바 JDK 8 버전 설치하기

JDK 설치를 위해 ORACLE 홈페이지에 접속해줍니다.

https://www.oracle.com/java/technologies/downloads

스크롤을 내리면 Java SE Development Kit 8u333 버전이 보입니다. 운영체제 버전에 맞는 파일을 다운로드해 줍니다.

[ 그림 9 : JDK 다운로드 선택 ]

동의 후 다운로드 버튼을 눌러줍니다.

[ 그림 10 : 다운로드 동의 ]

오라클에서는 계정을 로그인 해야 다운로드가 진행됩니다. 계정이 없으시면 회원가입 후에 다운로드 해줍니다.

[ 그림 11 : 오라클 계정 로그인 화면 ]

다운로드 된 jdk 파일을 실행하여 설치해줍니다.

[ 그림 12 : jdk 설치 파일 다운로드 완료 ]

Next를 눌러줍니다.

[ 그림 13 : jdk 설치 시작 ]

Change 버튼을 눌러 경로를 C:\Java\jdk1.8.0_333\ 으로 변경해줍니다. Next를 눌러 설치해줍니다.

[ 그림 14 : 설치 경로 변경 ]

[ 그림 15 : 설치 진행 ]

jre 설치도 표시되면 경로를 C:\Java\jre1.8.0_333 으로 변경 후 다음을 눌러줍니다.

[ 그림 16 : jre 설치 경로 변경 ]

[ 그림 17 : jre 설치 진행 ]

모든 설치가 완료되면 Close를 눌러 설치를 종료합니다.

[ 그림 18 : jdk 설치 완료 ]

 

 

이제 jdk에 대한 환경변수를 설정해주어야 합니다. 내 PC에서 우측 마우스 - 속성을 선택합니다.

[ 그림 19 : 내 PC 속성 선택 ]

고급 시스템 설정을 눌러줍니다.

[ 그림 20 : 내 PC 속성 창 ]

환경 변수를 눌러줍니다.

[ 그림 21 : 환경 변수 선택 ]

아래 시스템 변수에 새로 만들기를 눌러줍니다.

[ 그림 22 : 시스템 변수 새로 만들기 선택 ]

아래와 같이 JAVA_HOME 변수로 jdk 경로를 지정해줍니다.

[ 그림 23 : JAVA_HOME 변수 추가 ]

다음으로는 시스템 변수에서 Path를 찾아 편집 버튼을 눌러줍니다.

[ 그림 24 : Path 환경변수 편집 선택 ]

새로 만들기 후 아래와 같이 "%JAVA_HOME%\bin;" 을 추가해줍니다.

[ 그림 25 : jdk 환경 변수 추가 ]

확인을 눌러 완료해주고 cmd 창에서 java -version 과 javac -version 명령어로 환경 변수에 설정된 jdk로 잘 실행되는지 확인해 줍니다.

[ 그림 26 : java 설치된 jdk 버전 확인 ]

 

---

3) Apache Tomcat 설치하기

아파치 톰캣 설치를 위해 아래 사이트를 접속해줍니다.

Apache Tomcat® - Apache Tomcat 9 Software Downloads

좌측에 다운로드 탭에 Tomcat 9 버전을 눌러줍니다. 9.0.62 버전 중 운영체제에 맞는 파일로 다운로드해줍니다.

[ 그림 27 : Tomcat 다운로드 ]

다운로드 된 파일은 압축을 풀어 사용할 수 있습니다.

[ 그림 28 : Tomcat 압축 해제 완료 ]

압축을 풀고 명령 프롬프트에서 해당 폴더의 bin 폴더로 접속해줍니다.

D드라이브에 설치해놓았기 때문에 D: 명령어로 D 드라이브로 변경 후

cd D:\WEB 개발\apache-tomcat-9.0.62\bin 명령어로 이동해주었습니다.

[ 그림 29 : bin 폴더 이동 ]

startup.bat 파일을 실행하면 톰캣이 실행되는데, 콘솔 창에서는 한글이 깨는 것을 볼 수 있습니다.

실행에는 전혀 문제가 없으며, 콘솔 언어 설정이 UTF-8로 되어 있지 않아 발생하는 문제입니다.

[ 그림 30 : Tomcat 실행 ]

아래 사진과 같이 창의 상단에 마우스 우측 버튼을 눌러 속성을 클릭합니다.

[ 그림 31 : Tomcat 콘솔 창 속성 선택 ]

속성에 보면 현재 코드 페이지 949 ANSI/OEM-한국어 로 되어 있기 때문에 한글이 깨진다고 볼 수 있습니다.

[ 그림 32 : 속성 창 ]

레지스트리로 편집해서 UTF-8로 변경해주어야 한글이 깨지지 않습니다.

[ 그림 33 : 실행 창 ]

레지스트리 경로는 HKEY_CURRENT_USER / Console 입니다.

[ 그림 34 : 레지스트리 창 ]

톰캣 폴더가 없기 때문에 Console 경로에 우측 마우스를 눌러 새로 만들기 - 키(K)를 선택해줍니다.

[ 그림 35 : 레지스트리 새로 만들기 키 선택 ]

폴더 명을 Tomcat으로 저장하고 우측 빈화면에서 마우스 오른쪽을 클릭하여 새로 만들기 -DWORD(32비트) 값을 추가해줍니다.

[ 그림 36 : 레지스트리 DWORD 값 추가 ]

추가된 DWORD 값은 CodePage로 이름을 변경하고 더블클릭해서 아래 값 데이터로 10진수로 수정해 줍니다.

[ 그림 37 : UTF-8 값 수정 ]

65001 값은 UTF-8 을 가리키기 때문에 이렇게 저장 해주시면 됩니다.

[ 그림 38 : 레지스트리 저장 완료 ]

이제 다시 startup.bat를 실행하면 깨지지 않고 콘솔에 한글이 잘 표시되는 것을 볼 수 있습니다.

한글 깨지는 부분은 불편하더라도 굳이 안하고 테스트 하여도 상관 없습니다.

[ 그림 39 : Tomcat 한글 깨지지 않는 화면 ]

이제 크롬 브라우저에서 127.0.0.1:8080 주소를 입력하면 실행되어진 tomcat에 접속되는 것을 볼 수 있습니다.

[ 그림 40 : Tomcat 접속 화면 ]

이렇게 화면이 잘 나오면 톰캣이 잘 설치되고 실행 된다고 보시면 됩니다.

---

4) Web Project 테스트 하기

이제 웹 개발을 하기위한 환경은 모두 설치가 완료 되었습니다.

Web Project를 만들어 실행해 보도록 하겠습니다.

[ 그림 41 : Eclipse 실행 ]

좌측에 Create a Dynamic Web project를 선택해줍니다.

Project Explorer가 떠있지 않다면 File - New - Other 에서 Web 폴더 안에 있습니다.

[ 그림 42 : Web project 선택 ]

Project Explorer가 떠있지 않다면 File - New - Other 에서 Web 폴더 안에 있습니다.

[ 그림 43 : 메뉴에서 Web Project 선택 ]

Project name을 입력하고 Target runtime에 New Runtime 버튼을 눌러줍니다.

[ 그림 44 : New Runtime 선택 ]

설치해놓은 Tomcat 버전을 선택해 주고 Next를 눌러줍니다.

[ 그림 45 : Tomcat 버전 선택 ]

Tomcat의 설치 경로를 Browse 버튼을 눌러 지정해줍니다.

[ 그림 46 : Tomcat 설치 경로 설정 ]

Finish를 누르면 Target runtime에 방금 추가한 Apache tomcat v9.0을 볼 수 있습니다.

Finish 버튼으로 프로젝트 생성을 완료해줍니다.

[ 그림 47 : 프로젝트 생성 ]

WebContent 폴더에서 우측 마우스를 눌러 New - JSP File을 선택해줍니다.

[ 그림 48 : JSP 파일 선택 ]

파일 명칭을 index.jsp로 입력 후 Finish 버튼으로 완료해줍니다.

[ 그림 49 : JSP 파일 만들기 ]

body 부분에 "TestWeb Run!!!"을 입력해 줍니다.

[ 그림 50 : index.jsp 작성 ]

프로젝트를 아래와 같이 실행하여 결과를 확인합니다.

[ 그림 51 : 프로젝트 실행 ]

서버로 처음 실행하게 되면 아래와 같은 화면이 나오고 기존 RunTime이 선택된 상태로 Finish 버튼을 누르시면 됩니다.

[ 그림 52 : Tomcat 선택 ]

실행이 되면서 방화벽 알람이 표시되고 엑세스 허용을 눌러줍니다.

[ 그림 53 : 방화벽 엑세스 허용 ]

아래와 같이 정상 실행되는 것을 볼 수 있습니다.

[ 그림 54 : 실행 화면 ]

크롬 브라우저에서 띄우면 아래와 같습니다.

[ 그림 55 : 크롬 브라우저에서 결과 확인 ]