[Eclipse] WebApp 개발하기

 우선 이클립스 다운로드 페이지로 간다

• https://www.eclipse.org/downloads/

 페이지에는 다운받을 수 있는 이클립스 종류가 많이 있는데 기본적으로 이클립스를 사용하는 방법은

아래 두 가지다.

1. 하나의 버전을 설치 + 플러그인 형태로 개발하기 (주로 java 버전을 선택한다)
2. 필요한 버전을 필요할 때 다운받아 사용하기

 개인적으로는 2번을 선호하는데 오픈소스가 늘상 그렇겠지만 설정 및 유지관리가 생각보다는 간단하지 않다. 생각해보자. 설정 및 유지관리가 쉬웠다면 이클립스를 여러가지 버전을 만들 이유가 없지 않겠나?

 이 부분은 개인적인 취향이라고 생각하겠다. 여기서는 2번을 선택한다. 필요한 버전을 다운받는다. 나 같은 경우는 Eclipse IDE for Java EE Developers를 선택했다.

 다운받은 이클립스 파일을 특정 디렉토리로 복사한다. 압축을 해제하고 같은 레벨에 workspace 디렉토리를 만들어 준다. 그럼 아래와 같이 된다.

(내가 선택한 디렉토리는 D:\IDE\web이다)

• D:\IDE\web\eclipse : 이클립스 IDE for EE Developers
• D:\IDE\web\workspace : 이클립스 Workspace for EE Developers

 나중에 java나 c++ 버전의 이클립스를 다운받게 되면 web이 아닌 java, cpp 디렉토리를 추가해주는 형태다. 이렇게 이클립스를 관리할 경우, 이클립스 자체의 버전업도 쉽게 할 수 있다. 신규 버전을 다운받아서 eclipse 디렉토리만 바꿔버리면 된다.

 이제 실행해보자. Oops. 아래와 같은 창을 만나면 java runtime을 설치해야한다. 얼마전에 데스크탑을 재설치 했더니 java runtime이 없었네;

 자바를 설치하자. 아래 링크로 이동해서 본인에 OS에 맞는 버전을 설치한다. java 설치의 상세한 내용은 생략하겠다.

•  http://www.oracle.com/technetwork/java/javase/downloads

 윈도우에서 이클립스를 이용, C/C++ 프로젝트를 개발하는 것은 쉽지 않다. 윈도우에는 컴파일러가 기본으로 제공되지 않기 때문에 컴파일러를 따로 설치해줘야 한다. 주로 cygwin이나 mingw를 이용해서 이클립스 개발환경을 구축하는데 이게 또 생각보다 의미가 없다. 순수하게 C/C++ 언어를 공부하는 입장에서는 나름 의미있는 방법일수도 있지만 실제 C/C++를 이용하는 프로젝트를 진행하는 경우에는 라이브러리들까지도 해당 환경에서 사용할 수 있도록 작업을 해줘야한다. 이런 식으로 환경셋업에 빼앗기는 시간이 너무 많다. 그리고 당연하겠지만 윈도우에는 비주얼 스튜디오라고 하는 훌륭한 개발환경이 존재한다. 그냥 리눅스 (가상) 환경에서 C/C++용 이클립스를 다운받아서 설치하는 것이 정신건강에 이로울 것 같다. 

 최초 실행을 하게 되면 workspace를 지정해야 한다. 이전에 만들어 놓은 디렉토리를 지정하자. 'Use this as the default and do not ask again'을 체크하자. 귀찮으니까 다시 묻지 말라는 이야기다. workspace는 이클립스 환경설정에서도 바꿀 수 있다.

 이제 첫 번째 프로젝트를 만들어 보자. Project Explorer 창에서 New->Static Web Project를 선택한다.

 그럼 프로젝트 설정창이 등장하는데 아래와 같이 지정한다. 주의해야할 점은 Target runtime 을 지정하는 부분이다. 사실 이렇게 안해도 상관없다. 주로 이클립스에서는 편집만을 하고 디버깅 및 상황은 크롬브라우저에서 볼 테니까. 그렇지만 실제로 서버에 올라간 상황을 시뮬레이션 할 수 있는 장점도 있으니까 그냥한다.

 그럼 이제 최초의 HTML 파일을 만들어보자. index.html을 만들텐데 TestApp의 WebContent 아래에서 마우스 우클릭을 통해 HTML 파일을 생성할 수 있다.

 생성된 HTML 파일을 아래와 같이 편집하자. 한글폰트가 안 맞아서 마음에 안드는데 나중에 바꿔야지.

 이제 실행해보자. Project Explorer에서 프로젝트 위에서 마우스 우클릭 --> Run As --> Run on Server를 클릭한다.

 그럼 자동으로 이클립스 내의 Preview 서버가 구동되며 TestApp이 호스팅된다. 편집창에서 index.html의 결과를 아래와 같이 볼 수 있다.

 사실 웹어플리케이션을 개발할 때 이클립스를 통해서 확인하는 것은 비효율적이다. 이클립스 자체에서 디버깅 및 화면을 확인하는 것 보다 일반 브라우저에서 바로 확인하는 것이 더 편리하다. 주로 크롬브라우저를 이용해서 개발 및 디버깅을 진행하던데 크롬브라우저에서 개발자 도구창을 열게 되면 아래와 같다.

 정리하자면 아래와 같이 개발이 이루어진다.

• 이클립스에서 편집
• 크롬브라우저에서 디버깅

 WebApp을 편집하는 툴이야 여러가지가 있겠지만 이클립스도 그 중에 하나의 옵션이 될 수 있다는 의미에서 포스팅을 해봤다. 과거에 메모장을 통해서 웹앱을 개발하시는 분을 본적이 있는데 정말 대단하다는 생각이 드는 동시에 답답하기도 했었다.

2015.03.28