 |
|
기본 프로젝트
JSEclipse를 설치했으니 계속해서 실제 프로젝트를 진행하자. 자바스크립트 애플리케이션은 일반적으로 자바 애플리케이션보다 단순하다. 그러나 여전히 이 둘을 함께 사용해야 한다.
새 프로젝트 만들기
모든 작업물을 담을 새로운 이클립스 프로젝트를 만드는 것부터 시작하자. 이미 존재하는 파일로 시작하는 것도 가능하지만, 우리는 독자들이 초보자라고 가정하고 있다. 새 프로젝트를 만든다.
-
File > New > Project > General > Project. 선택
-
Nextb 클릭
- 프로젝트 이름을 입력하고 그림 8에 보이는 것처럼 프로젝트의 위치를 선택한다. 만약에 이미 존재하는 애플리케이션을 갖고 있다면, Use default location을 해제하고 기존의 파일을 갖고 있는 폴더를 선택하면 된다.
그림 8. 프로젝트 이름과 위치 설정하기
-
Finish를 클릭하여 프로젝트를 생성한다. 이렇게 하고 나면 다시 친숙한 이클립스 워크벤치로 돌아올 것이다.
메인 페이지 만들기
새로운 프로젝트가 생겼으니 메인 페이지를 만들 차례다. 대부분의 자바스크립트 애플리케이션은 웹 페이지에서 동작한다. 물론 이번에도 예외는 아니다. 우리가 만들 생명체가 진화할 환경을 만들어 보자.
프로젝트를 마우스 오른쪽 버튼으로 클릭하고 New > File을 선택한다. 새로운 파일을 만들고 있다는 가정하에, 파일 이름은 environment.html로 하고 Finish를 클릭한다.
그렇게 하지 않고, 만약 비어있는 프로젝트를 생성한 다음에 이미 존재하는 파일을 직접 넣고 싶을 때는 다음과 같이 할 수 있다.
-
Advanced 클릭
- '파일 시스템의 파일로 링크' 체크.
- 브라우저로 파일을 찾는다.
그림 9. 새로운 파일 만들기
-
Finish 클릭
HTML 페이지 보여주기.
이 애플리케이션에 들어 있는 HTML은 매우 간단하다. 다음 코드를 environment.html 파일에 입력한다.
Listing 1. 기본 HTML 페이지
environment.html
<html>
<head></head>
<body>
<div id="environment" style="float: right; width: 600px;
height: 500px; border: 3px solid black;position:
relative;">
</div>
</body>
</html>
|
이제 우리는 간단한 HTML 페이지를 작성했고, 내용은 한 개의 div 엘리먼트로 구성되어 있다. 엘리먼트는 큰 상자로 너비 600 픽셀, 높이 500 픽셀이며, solid 타입의 3픽셀 두께의 경계로 그것을 감싸고 있다. 특별히 동족이라는 위치를 설정했는데 이 위치(position) 속성은 나중에 div에 놓을 생명체에 의해 상속될 것이다.
File > Save를 선택하거나 Ctrl+S를 눌러 저장한다.
브라우저로 페이지 보기
자바스크립트 개발자로서, 나는 여러분이 당연히 브라우저에서 페이지를 어떻게 여는지 알고 있으리라 확신한다. 그러나 이번에는 이클립스에 있는 브라우저를 말하고 있다. 가능한 모든 개발을 하나의 창에서 하기 위함이다. 왼편의 Project Explorer에서 파일을 마우스 오른쪽 버튼으로 클릭하면, 선택할 수 있는 메뉴 팝업을 볼 수 있다.
그림 10. 파일 열기 옵션
보다시피, 이클립스가 파일 확장자에 대해 알고 있는 것을 기반으로 다양한 옵션을 갖고 있다. JSEclipse HTML 편집기를 사용한다고 가정했기 때문에, 메뉴에서 color-coding을 확인할 수 있다. *.js 파일의 기본 편집기를 등록했던 것을 기억하라. 그것과 같은 원리로 동작한다.
웹 브라우저를 선택하면, 기본 페이지를 볼 수 있다.
그림 11. 기본 HTML 페이지
좋다. 그리 많은 볼거리가 있는 것은 아니지만, 거기 보이는 상자가 우리의 생명체가 살아갈 환경이 될 것이다. 이제 그것들을 만들어 보자.
자바스크립트를 HTML에 조금 추가하기
이클립스를 설정할 때, *.js 파일의 기본 편집기를 JSEclipse로 설정했다. 하지만 HTML 파일 내부에 자바스크립트를 작성하는 일이 드물지 않은 것은 분명하다. 이 문제를 해결하는 방법은 조금 뒤에 살펴볼 것이다.
다음 코드를 enviromment.html에 추가한다.
Listing 2. 페이지에 자바스크립트 추가하기
<html>
<head>
<script type="text/javascript">
var maxSize = 100;
var maxWidth = 600;
var maxHeight = 500;
var theCreature;
var theCreature2;
var interval = 100
function createNewEnvironment(){
alert("Creating new items...");
}
</script>
</head>
<body onload="createNewEnvironment()">
<div id="environment" style="float: right; width: 600px;
height: 500px; border: 3px solid black;position:
relative;"></div>
</body>
</html>
|
코드 자체는 매우 간단하다. 자세한 내용은 뒤에서 살펴보겠지만, 일단 여기서는 초기 변수들을 설정했다는 것과 페이지가 로딩될 때 호출할 함수 createNewEnvironment()를 생성했다는 것만 알고 넘어가자.
자, 어떻게 편집을 했을까?
JSEclipse를 사용해 임베드된 자바스크립트 편집하기
페이지 안에 있는 스크립트를 JSEclipse에서 편집하려면 페이지에 있는 스크립트 엘리먼트를 마우스 오른쪽 버튼으로 클릭하고 Edit in JSEclipse를 선택한다.
그림 12. 스크립트를 마우스 오른쪽 버튼으로 클릭하면 JSEclipse에서 편집할 수 있는 옵션이 있다.
일단 Edit in JSEclipse를 선택하면, 편집기는 임시 파일을 생성하고 그것을 자바스크립트 편집기로 열어준다.
그림 13. 임시 파일 편집하기
이 임시 페이지의 편집기는 우리가 예상한 색깔이 있는 코드, 코드 돋보이기 등과 같은 기능을 모두 갖추고 있는 것을 알 수 있다. 이 임시 페이지를 변경하면, 변경된 사항들이 원래 페이지에 반영되는 것을 볼 수 있을 것이다. 이것은 자바스크립트가 너무 많이 페이지에 내장되어 보거나 편집하기 어려운 "스파게티" 페이지를 가진 상황에서 별도로 디버그를 할 때 유용하다. 그러나 보통은 IDE를 사용하고 있다면, 별도의 파일로 분리해 사용하는 것이 편하다.
외부 스크립트 사용하기
유지보수성을 고려해 만약 별다른 사항이 없다면 보통은 스크립트를 별도 파일에 넣는 것이 좋다. 이 경우 우리는 파일 세 개를 갖게 된다.
Listing 3. 외부 파일 추가하기
<html>
<head>
<script src="Creature.js" type="text/javascript"></script>
<script src="MultiDimensionalArray.js"
type="text/javascript"></script>
<script src="environment.js" type="text/javascript"></script>
</head>
<body onload="createNewEnvironment()">
...
|
맨 아래부터 시작해서 environment.js는 진화 과정 시작과 그것을 계속 유지하는 주요 제어 스크립트를 포함하고 있다. 이 새로운 파일을 environment.html과 같은 디렉터리에 넣고 원래 스크립트 엘리먼트에 그냥 적었던 코드를 파일에 추가했다. MuliDimensionalArray.js 파일은 생명체를 추적할 유틸리티 클래스를 담을 것이다. 마지막으로 Creature.js 파일은 실제 생명체를 정의한 클래스를 갖고 있을 것이다. 이제 이 두 개의 스크립트를 비어있는 파일로 만들고 environment.html과 같은 디렉터리에 저장한다.
이제 실제 애플리케이션에 대해 이야기해 보자.
| 
