 |
|
준비하기
본 튜토리얼에서는 두 가지 도구를 살펴보고 완전히 새로운 종을 만들어 낼 것이다. 그러기 위해 먼저 뭍에 배를 대는 것부터(역주: 차근차근) 시작해 보자.
우리가 얻고자 하는 것
이 튜토리얼은 진화하는 "종"을 만들어내는 연대기다. 이 진화하는 "종"은 웹 페이지를 돌아다니며 같은 종을 만나 번식을 하고 새로운 생명체를 탄생시키거나 같은 종을 만나기 전에 죽는다.
본 튜토리얼은 한 시간 분량이며 따라서 당연히 그 생명체는 매우 간단할 것이다. 그것들은 다양한 크기의 네모 모양을 하고 있고 색깔 그리고 속도가 있으며, 다른 생명체를 만나면 번식을 해 새로운 생명체를 만들어 낸다. 이 때 이 생명체는 그것들의 속성 중 일부를 무작위로 갖게 된다. 그 결과 운이 좋으면 움직이는 생명체 그룹을 갖게 될 것이다.
그림 1. 생명체 서식지
이 '서식지'는 복잡하지 않다. 예를 들어, Second Life 사용자들이 만든 Laukosargas Svarog의 Svarga와 Luciftias Neurocam의 Terminus와 같이 아연 질색하게 만들 만큼 아름답지 않다(역주: 복잡하지 않다는 것을 강조하기 위해 역으로 복잡한 이름을 가진 지역을 언급하고 있다). Pagan Bishop의 Basic Evo Objects가 가진 속성들은 각 세대마다 진화한다. 따라서 심지어 스스로도 그것들이 어떤 모습이 될지 예측할 수가 없다. 간단한 튜토리얼에서는 건장하고 진화하는 네모들이 진짜로 멋질 것이다.
조각들을 맞추는 방법
이것을 만들기 위해 몇몇 조각이 필요하다. 따라서 그것들이 무엇이고 어떻게 들어맞는지 살펴보자.
우리는 지금 자바스크립트를 사용하는 애플리케이션을 만들고 있다. 따라서 간단한 웹 페이지부터 만들고, 환경을 제어하는 외부 스크립트 파일을 참조하도록 한다. 그 스크립트는 생명체를 표현하는 단일 클래스를 참조한다. 도구와 관련해 이클립스 IDE를 JSEclipse 플러그인과 함께 사용할 것이다. 이 플러그인은 편리한 자바스크립트 편집기와 자동 완성 기능을 제공한다. 처음부터 이클립스를 사용해 브라우저 안에서 우리가 만들 웹 페이지를 볼 수 있다. 따라서 개발은 이 한 환경에서도 아주 잘 수행할 수 있다.JSEclipse는 실제 디버거를 제공하지 않는다. 따라서 디버깅을 할 시점이 되면 이클립스에서 벗어나 파이어폭스(FireFox)에서 직접 페이지를 열 것이다. 거기서 파이어버그 플러그인을 사용하여 디버깅을 할 것이다.
그럼 조각들을 맞춰보자.
JSEclipse 얻기
만약 이클립스 IDE를 설치하지 않았다면, 지금 하기 바란다(시스템 요구사항 참조). 본 튜토리얼은 이클립스 V3.3.1.1로 작성되었다. 따라서 플러그인 설치와 관련된 문제가 있다면, 이 버전으로 설치하여 시도해 보기 바란다.
다음은 JSEclipse 플러그인을 얻는 것이다. 가장 쉬운 방법은 이클립스에 내장된 업데이트 시스템을 사용하는 것이다.
- 이클립스 설치하기
- 이클립스 시작하기
- 필요하다면, "Go to Workbench"를 선택한다.
- Workbench 메뉴에서 choose Help > Software Updates > Find and
Install을 선택한다.
-
Search for new features to install을 선택한다.
그림 2. Search for new features 선택하기
-
Next를 클릭하고 새로운 업데이트 사이트 만들기를 진행한다.
새로운 업데이트 사이트 생성하기
새로운 기능과 플러그인은 특정 업데이트 사이트에서 제공된다. 여러분들이 설치한 이클립스에는 미리 설정된 이러한 사이트들이 존재하지만, JSEclipse 설치를 위해 새로운 것을 추가해야 한다.
- 창의 오른쪽에 있는 New Update Site를 클릭한다.
- name에는 JSEclipse를(또는 여러분이 기억할 만한 것 중 아무거나) 입력하고 URL에는 http://download.macromedia.com/pub/labs/jseclipse/autoinstall을 입력한다.
그림 3. 새로운 업데이트 사이트 정보 추가하기
- 새로운 사이트를 목록에 추가하기 위해 OK를 클릭한다.
JSEclipse 설치하기
새로운 사이트를 추가했다면, 이제 JSEclipse 설치에 그것을 사용할 수 있다.
- 업데이트를 하려면 새로 추가한 사이트 옆에 있는 체크 박스를 선택한 뒤, Finish를 클릭한다.
- JSEclipse만이 해당 사이트에서 제공하는 유일한 기능이기 때문에, 찾기 쉬울 것이다. JSEclipse 기능을 선택하고 Next를 클릭한다.
그림 4. 설치할 기능 선택하기
- 라이선스 동의서에 동의를 하고 Next를 클릭한다.
- 이클립스 설치 위치를 확인하고 Finish를 클릭한다.
- 보안(과 통합)상의 이유로, 실제 설치 과정 중에 해당 기능이 허가된 것인지 확인을 한다. 만약 허가된 것이 아니라면 여러분이 허가되지 않은 기능을 설치하기 원하는지 그림 5와 같이 확인한다. 그리고 Install을 클릭한다.
그림 5. 설치 확인
설치를 완료한 뒤, Apply Changes를 클릭한다. 무언가가 이상하게 동작하지 않는 이상, 이클립스를 다시 시작할 필요는 없다. 그다지 나쁜 선택은 아니다.
이제 JSEclipse를 설치했다. 설정을 할 차례다.
JSEclipse 설정하기
JSEclipse 플러그인은 사용자 경험에 근거하여 제어할 수 있는 기능을 제공한다. 그것을 설정하려면 Window > Preferences > JSEclipse JSEclipse를 선택하여 설정 화면으로 간다.
그림 6. JSEclipse 설정하기
JSEclipse 환경 설정은 네 가지로 구성되어 있다.
-
일반 환경 설정
- 이것은 자동 완성 풀 다운 메뉴를 보여줄 때 얼마나 기다릴지, 에러 보고를 수행할지 그리고 현재 변수에 대한 다른 지점에서의 사용처를 하이라이팅할지 등의 기능을 설정할 수 있다.
-
문맥 색 설정
- JSEclipse는 함수 이름과 변수처럼 색이 있는 코드뿐 아니라, 각각의 아이템 색도 완전히 제어 할 수 있기 때문에 여러분이 읽기 편하게 설정할 수 있으며, 또한 다른 편집기에 존재하는 색상 스키마를 적용할 수도 있다.
-
템플릿
-
코드 템플릿으로 쉽게 만들기: 다차원 배열 절에서 살펴보겠지만, JSEclipse는
for 반복문이나 함수들과 같이 자주 타이핑되는 코드 템플릿을 갖고 있다. 이 패널은 등록된 템플릿을 활성화하거나 비활성화할 수 있는 기능을 제공하고 여러분이 원하는 것을 새로 추가할 수 있는 기능을 제공한다.
-
타이핑
- IDE를 사용하는 장점 중 하나가 바로 '괄호 닫기'와 같은 자동화된 태스크이다. 만약 이게 여러분을 괴롭힌다면, 이 기능을 바로 이 환경 설정에서 비활성화할 수 있다.
다음으로 이클립스가 이 플러그인을 사용하도록 알려주어야 한다.
JSEclipse를 자바스크립트 편집기로 설정하기
자바스크립트 파일을 위한 특별한 편집기를 갖고 있다는 것을 이클립스에 알려주어야 한다. 그렇게 하지 않으면, 일반적인 텍스트 편집기를 사용할 것이다. Window > Preferences > General
> Editors > File Associations를 선택한다. *js 파일 확장자를 선택하고 JSEclipse가 할당된 편집기인지 확인하다.
그림 7. JSEclipse 편집기를 기본 편집기로 설정하기
만약에 *.js 확장자가 없다면, 위에 있는 Add 버튼을 클릭하고 창에다 추가한다. *.js 확장자가 JSEclipse를 기본 편집기로 갖고 있지 않다면, Add 버튼을 클릭한다. Internal Editors > JSEclipse HTML Editor를 선택하고 Add를 클릭해 기본 편집기로 설정한다.
이제 JSEclipse를 본격적으로 사용해 보자.
| 
