개발자연습생

이번 시간에는 본격적으로 프론트-엔드를 준비하기에 앞서 톰캣과 이클립스를 연동하였다.

우선 톰캣은 아파치에서 제공하는 웹 어플리케이션 서버로 HTTP 서버도 자체 내장하여 웹 서버에 대한 구축을

별도로 작업하지 않아도 손쉽게 웹 서버를 구축할 수 있도록 해준다.

1. 톰캣 다운로드

톰캣은 오픈소스 소프트웨어로 회원가입이나 비용 없이 다운로드가 가능하다. 또한 압축파일을 다운로드하여

별도의 설치과정이 필요하지 않다.

현재 9.0 버전까지 나왔지만 이번에는 8.5 버전을 사용하고자 한다.

다운로드는 아래의 사이트에서 OS 환경에 맞는 것을 다운로드 하자.

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

2. 이클립스와 연결하기

다운로드를 완료하였다면 원하는 저장소에 압축을 해제한 후 이클립스를 실행한다.

이번에는 프론트-엔드 부분을 연습하므로 이클립스의 workspace 를 자바와 다른 폴더로 생성하여야 한다.

(새로운 workspace 잡게 되면 UTF-8 등 이클립스의 환경을 새로 셋팅하여야 한다.)

이클립스를 workspace 를 새로 설정 후 실행한 모습

이제 프론트-엔드를 개발하기 위해 2번째 항목의 [Create a new Java EE Web Project] 를 눌러준다.

그럼 다음과 같이 동적 웹 프로젝트를 생성하는 화면이 나온다.

위와 같이 나왔다면 프로젝트의 이름을 작성 후 [Finish] 를 눌러준다.

새로운 프로젝트가 생성되었다면 중앙 하단의 [Server] 를 누른다.

그리고 바로 아래에 파란색 글씨로 장문의 영문 나온 것을 볼 수 있다. 그 문장을 눌러보자.

파란글씨를 누르면 다음과 같은 창이 생성된다.

여러 항목이 있지만 우리는 아파치의 톰캣을 사용하기에 [Apache]를 선택하자.

조금 밑에서 v8.5 버전(다운로드한 버전)을 찾아 선택 후 [Next]를 누른다.

프론트 연습을 위해 내부루트에서 실행할 것이므로 호스트는 localhost로 사용한다.

다음으로는 [Browse]를 눌러 톰캣이 설치(압축해제)된 폴더를 선택해준다.

마지막으로 [Finish] 를 눌러준다.

정상적으로 진행됐다면 아래와 같이 파란글씨 자리에 톰캣이 보일 것이다.

나타난 톰캣을 클릭 후 우측 하단에 실행 버튼을 눌러보자.

눌렀을때 톰캣에 started 이라고 나온다면 성공한 것이지만 보통 아래의 경고창이 뜨게 된다. 당황하지 말자.

위 경고창을 읽어보면 대충 8080번의 포트를 이미 사용중이라 나오게 된다. 즉, 포트만 바꿔주면 해결된다.

좌측의 Project Explorer 를 보면 [Server] 항목이 보인다. 카테고리를 열어보자.

위와 같이 [server.xml] 을 더블클릭하여 아래와 같이 [Source] 를 눌러주자.

눌러주면 장황하게 코드들이 나오는데 당황하지 말고 63번째 라인을 찾아보자.

빨간 표시부분을 보면 포트번호가 8080 으로 잡혀있다.

해당 부분을 사용하지 않는 포트로 변경하면 된다. (보통은 80 또는 8089 등을 사용한다.)

TMI) 걍 넘어가도 되는 부분.

1. 현재 포트가 궁금하다면 cmd 에서 netstat -no 를 입력한다.

2. 어떤 프로그램인지도 궁금하다면 작업관리자 -> 서비스 에서 PID를 cmd와 대조해 보자.

TMI 끝)

포트번호를 바꿨다면 좌측 상단에서 세이브를 하자.

다시 톰캣 실행버튼을 눌러보면 정상적으로 작동된것을 확인할 수 있다.

여기까지가 이클립스로 프론트-엔드를 작업하기 위해 톰캣을 연결한 내용이다.

Eclipse 에서는 프로젝트를 불러오거나 추출하는 기능을 가지고 있다.

불러오기는 말 그대로 다른 곳에서 가져온 프로젝트를 작업 중인 이클립스로 가져오는 기능이다.

마찬가지로 추출하기는 현재 작업 중인 이클립스에서 프로젝트를 다른 곳으로 옴기기 위해 사용한다.

1. import

이클립스에서 프로젝트를 불러오는 방법은 다음과 같다.

1) 패키지(프로젝트) 익스플로러에서 우클릭 또는 상단바 File 클릭

2) import 클릭

3) Existing Projects into Workspace 클릭 후 Next 클릭

여기까지 진행했다면 다음의 창이 나온다.

중요한 것은 불러올 파일이 압축파일인지 아닌지의 구분이다,

(1) 압축파일을 불러오는 경우

Select active file 의 Browse 버튼을 눌러 압축파일을 불러온다.

압축파일을 찾아 불러오면 다음과 같이 표시되는데 빨간 원에 ∨ 체크가 되있는지 확인한다.

만약 체크가 되있지 않다면 동일한 이름의 프로젝트가 이클립스에 있을 것이니 기존 프로젝트의 이름을 바꾼다.

※ 압축파일의 이름을 바꾸는 것은 의미가 없다.

마지막으로 Finish 를 눌러주면 패키지 익스플로러에 프로젝트가 생성된다.

또한 지정한 작업폴더에 해당 프로젝트가 만들어지는 것을 확인할 수 있다.

(2) 압축파일이 아닌 경우

Select root directory 의 Brows 에서 불러 올 프로젝트를 찾는다.

현재 바탕화면의 Hacksa_prj 폴더를 선택한 화면이다.

폴더를 지정하면 다음과 같이 나올 것이다.

프로젝트를 불러올 수 있으면 빨간 원에 체크가 되어있다.

안된다면 동일한 프로젝트 이름이 패키지 익스플로러에 있는지 확인해보자.

빨간 원 내용을 보면 불러 올 프로젝트를 작업공간에 복사한다는 내용의 체크박스가 나온다.

체크를 안하고 불러온 상태에서 바탕화면의 프로젝트 폴더를 삭제하면 이클립스에서 프로젝트의 모든

파일이 날아가므로 가급적이면 복사를 해주는 것이 좋다.

마지막으로 Finish를 누르면 프로젝트가 불러진 것을 확인할 수 있다.

이클립스에서 프로젝트 저장 폴더인 workspace의 경로를 변경하거나 새로운 폴더로 잡는 경우 세팅된 환경이

모두 초기화된다. 정학하게는 workspace 별로 새로운 환경이 구성된다.

따라서 일반적으로 사용하는 문자체계인 유니코드 UTF-8 로 새로 설정해 줘야 한다.

설정 방법은 다음과 같다.

1) [windows] -> [Preferences] 를 선택한다.

2) 검색에 [enc] 를 입력한다

3) [General] -> [Content Types] 에서 [Text] 클릭 후 [default encoding] 항목에 UTF-8 을 입력한다.

마지막으로 [update] 를 눌러준다.

4) [workspace]에서 하단의 [Other] 체크 후 [UTF-8] 항목 선택 후 [Apply] 를 눌러준다.

5) [Web] 항목에서 [CSS Files] 선택 후 [Ecording] 에서 [UTF-8] 항목을 체크 후 [Apply] 한다.

[CSS Files] 항목 아래의 [HTML Files]와 [JSP Files] 항목도 마찬가지로 [UTF-8] 을 선택한다.

동일하게 [XML] 항목도 [UTF-8] 을 선택한다.