[JS]04-001.기본 뼈대 새창으로 열기톰캣 다운로드 및 자바스크립트 개발 환경 구축, 파일 생성 실행

구글 검색창에 톰캣을 검색하여 홈페이지로 들어간다.

http://tomcat.apache.org/

메인화면에서 좌측에 다운로드 하위에 Tomcat 버전이 있다.

그 중 8버전을 사용한다.

Tomcat 8의 8.5.34 버전, 그리고 자기 운영체제 환경에 맞춰서 32bit or 64비트를 다운로드 해준다.

다운로드 하고 압축파일을 마음에 드는 위치에 압축 해제만 한다면 끝이다.

톰캣은 따로 설치없이 그대로 사용하게 된다.

개발환경 설정

이클립스에서 새로운 Workspace를 마음에 드는 위치로 설정한다.

워크스페이스를 변경하면 설정도 새로 해야한다.

다음으로는 유니코드 설정변경

먼저 화면에 보이는 창들을 전부 끄자. 그리고 사용할 뷰만 띄울것이다.

상단 메뉴바의 window - show view - console, navigator, servers 를 눌러 화면의 뷰를 띄우자

다음과 같이 뜨면 된다.

다시 상단 메뉴바의 window - preferences를 누르고

설정창을 열자

설정창에서 다음 스크린샷의 검정색 박스와 같이 전부 UTF-8로 변경하자.

이와같이 설정을 마치면 편집기 설정은 끝

다음으로는 톰캣, 서버 설정

이클립스 화면의 좌측 하단 Servers 탭을 보면 서버가 없다, 추가해주세요 라는 문구가 있다.

문구를 클릭하거나 빈 공간에 우측 클릭 - new - server로 생성하자.

나오는 창을 사진의 검정 박스로 표시한 부분을 알맞게 설정하여 진행하자.

Browse 하여 경로 지정하는 부분은 이 게시글 맨 위에서 받은 Tomcat 압축파일을 해제한 위치이다.

아까 서버를 생성하라던 문구가 사라지고 톰캣 서버가 잡혔다.

한번 시작 버튼을 눌러서 가동해보자.

잘 따라왔다면 위와 같이 서버 가동 완료시간과 함께 정상 Start가 됫다고 출력된다.

서버가 정상 실행되는 것이 확인 됫다면 화면 좌측 하단의 Servers에서 빨간색 네모 버튼을 눌러 서버를 정지

다시 화면 좌측 하단의 Servers에서 서버를 더블클릭하면 위와같은 화면이 나온다.

그 중 검정색 네모 박스에 맞춰서 설정을 바꿔주자.

Port는 8080으로 되어있을 텐데 바꾸는 이유는 예전에 DB의 포트를 8080으로 설정했기 때문에 다른거로 바꾼다.

8765 말고 마음에 드는것으로 설정하여도 상관없다.

다음으로는 HTML 파일을 생성하여 정말 간단한 메인 페이지를 만드는 방법

먼저 Servers 폴더가 하나 있는 좌측의 Navigator 창에 우클릭 - Dynamic web Project를 누른다.

이와 같은 창이 뜨고 마음에 드는 이름을 입력하고 Finish를 누르지 말고 Next를 누르자.

디폴트 경로를 꼭 이와같이 바꾸자. 그리고 Next

위의 이름은 기본값으로 설정되어 있을텐데 앞에서 입력했던 프로젝트 이름과 동일하면 나중에

파일을 직접 찾을 때 헷깔리는 일이 있을 수 있다.

고로 다른것으로 바꿔주자.

또한 아래의 체크박스도 체크해주고 Finish를 누른다.

위와 같이 경로가 잘 잡혀있다.

다음으로는 WEB-INF 폴더에 우클릭을 해도 HTML 파일 생성을 찾을 수 없는데 옵션을 수정하여 만들어 보자.

화면 상단 메뉴의 Window - Perspective - Customize Perspective

그리고 Short cut의 좌측 항목의  Web이 네모네모로 설정이 되어있는데

체크박스를 두번 누르면 체크 표시로 변한다.

그리고 OK

다시 WEB-INF에 우클릭을 하고 NEW를 보면 HTML 파일이 생성되어 있는것을 확인 할 수 있다.

index.html이라고 File name을 변경하자

index가 공통적으로 사용하는 화면의 메인페이지이기 때문에 index로 설정한다.

간단하게 문서를  수정한다.

이제 다음과 같이 Java 프로젝트를 서버에 올리면 된다.

Servers 의 톰캣을 우측클릭하고 Add and Remove를 누른다.

생성한 프로젝트를 add 로 추가하고 Finish를 눌러주면 된다.

파일을 올리고 아까와 같이 Servers의 재생버튼을 눌러 서버를 실행하자.

인터넷 브라우저를 띄어 "127.0.0.1:[아까 입력한 포트번호]/js"   "localhost:[아까 입력한 포트번호]/js" 둘 중 하나를 입력하여 실행하면

index, 메인 페이지가 정상적으로 뜬다.

127.0.0.1 이나 localhost는 현재 컴퓨터의 자기 자신의 주소를 의미한다.

※ index.html을 사용한 이유

프로젝트의 web.xml을 누르고 나오는 창의 아래쪽에

Design을 Source로 바꾸어서 보면

Welcom-file 블록이 보인다.

첫 번째 띄울 화면의 파일 이름이 무엇인지 여기서 설정하는데

기본값이 index로 되어있기 때문에 이와같이 사용한다.