Aptana Studio 3 가이드 문서
이번 포스팅은 사내 교육용으로 작성한 가이드 문서 그것도 작성 시기가 무척 오래된 내용이기 때문에 현 상황과 맞지 않을 수도 있지만 전체적인 구성은 크게 다르지 않을 것이라 생각되어 작성한다.
목 차
1. 특 징
2. 장 점
3. 설 치
1) Standalone 버전 설치
2) Eclipse Plug-In 버전 설치
4. 기 능
1) SVN
2) Aptana Studio version update
3) JavaScript Source editor
4) Remote
5) Commands
6) Whitespace Character
7) Quick Outline
8) Format
9) Mark Occurrence
10) Open Resource
11) Word Completion
12) Theme
13) Outline
14) Find Bar
15) Open Declaration
16) Profile
17) 유용한 단축키
5. 마무리
1. 특 징
1) Eclipse 기반의 무료 JavaScript 개발 툴이다.
2) 독립형 IDE형태인 Standalone 버전과 Eclipse Plug-In 버전이 존재한다.
3) Eclipse 기반이기 때문에 Eclipse의 Plug-In 들을 사용이 가능하다. (SVN, FTP, …)
4) Windows, MAC, Linux platform을 지원한다.
2. 장 점
1) JSEclipse 보다 뛰어난 JavaScript의 Code Assist를 지원한다.
2) 오류 및 경고의 실시간 검사를 지원한다.
3) 클래스, 메서드, 변수 등의 구조를 트리 형태로 볼 수 있는 Outline view 지원한다.
4) 잘 알려진 JS 라이브러리를 내장하여 내부 도움말을 제공한다.
5) 쉘 윈도우를 내장하여 자체적으로 쉘 실행이 가능하다.
1) Standalone 버전 설치
http://www.aptana.com/products/studio3/download 에서 OS 선택 및 버전 선택을 한 후 설치 파일을 다운로드 시도한다.
다운로드가 완료되면 설치 파일을 실행하여 Aptana Studio의 설치를 시작한다.
필요한 파일 타입을 선택한 후 설치를 마무리한다.
Standalone으로 실행된 Aptana의 인터페이스 구성. Eclipse와 비슷한 구성을 보인다.
2) Eclipse Plug-In 버전 설치
Eclipse의 메뉴바에 있는 Help → Install New Software... 에 있는 Work with 항목에 http://download.aptana.org/tools/studio/plugin/install/studio 를 추가하여 Aptana Plug-In을 설치한다.
Eclipse의 메뉴바에 있는 Window → preferences를 선택한 후 좌측 항목에서 General → Editors → File Associations 에서 *.JS를 선택한 후 Associated editors에 있는 "Aptana JS Editor"를 Default로 선택한다.
JavaScript 파일을 편집 시 Aptana JS Editor로 실행이 되는 것을 확인할 수 있다.
아래의 화면에서 좌측 하단에 Outline에서는 함수와 변수들의 관계를 트리 구조로 보여주고 있고, 화면 중앙의 Editor 부분에서는 Code Assist가 동작되는 것을 볼 수 있다.
Subversion의 줄임말로 소프트웨어 형상관리(SCM)를 수행하기 위한 Open Source Software인 SVN을 Aptana Studio에서도 사용이 가능하며 Plug-In으로 설치할 수 있다.
Aptana의 메뉴바에 있는 Help → Install New Software... → Available Software Sites 에서 http://download.eclipse.org/releases/indigo 선택 후 SVN으로 검색하여 subversive SVN Team Provider 설치 및 업데이트를 진행한다.
Aptana의 SVN의 설정은 Eclipse와 동일한 Plug-In을 사용하기 때문에 설정 방법은 같다.
메뉴바의 File → New → other.. ("Ctrl + N")을 선택한 후 SVN → Project from SVN을 선택하여 URL 및 사용자 정보를 입력한 후 Project 생성을 완료한다.
2) Aptana Studio version update
Aptana Studio update 사이트에서는 Aptana Studio 홈페이지에서 다운로드한 Aptana Studio 3보다 최신 버전의 업데이트를 제공하고 있다. (http://update1.aptana.org/studio/3.2/024747/index.html)
Aptana Studio의 메뉴바에 있는 Help → Install New Software... 에서 http://update.aptana.com/update/studio/3.2 를 추가하여 Aptana Plug-In을 설치한다.
업데이트가 완료되면 JavaScript의 code assist와 JavaScript 전용 편집기인 aptana JS editor를 사용할 수 있다.
Aptana Studio가 제공하는 JavaScript 전용 editor인 Aptana JS editor는 여러 기능을 제공하지만 Open Declaration 기능에 버그가 있어서 Aptana Studio의 기본 편집기인 JavaScript Source editor를 사용한다.
Aptana Studio의 메뉴바에 있는 Window → preferences를 선택한 후 좌측 항목에서 General → Editors → File Associations 에서 *.JS를 선택한 후 Associated editors에 있는 "JavaScript Source Editor"를 Default로 선택한다.
FTP 파일에 직접 연결하여 원격 파일편집을 사용할 수 있다.
Aptana Studio 메뉴바에 있는 Window → Show View → Other… 에서 Remote를 선택하면 FTP 접속에 관련된 설정 화면이 나온다.
Remote에 웹사이트나 FTP를 추가하는 방법은 Remote 화면에서 마우스 우클릭을 하면 아래 화면과 같은 메뉴가 나온다. Add New FTP Site…를 선택하여 FTP 를 추가할 수 있다.
Create a FTP connection 설정에서 FTP 서버의 정보를 입력하고 접속 Test를 하여 정상적으로 접속되는지 확인한 후 OK하여 FTP를 사용한다.
정상적으로 FTP에 연결이 되면 Aptana Studio에서 FTP 내에 있는 파일을 편집할 수 있다.
Aptana Studio 내부에서 지원하는 여러 기능들을 메뉴로 제공한다.
번들 기능을 추가/삭제도 가능하며 JavaScript 뿐만 아니라 Aptana Studio에서 지원하는 모든 기능을 나타내고 있다.
JavaScript에서 쓰이는 주요 명령어들에 대해서 자동완성을 한다. 메뉴에 보이는 >>은 Tab을 의미하고 자동완성 단어에 Tab을 입력하면 완성된 구문으로 작성해 준다.
Aptana JavaScript Editor에서 제공하는 환경 설정 중에 Text Editors 설정을 통해 아래의 화면과 같이 공백문자를 출력하는 있다.
Aptana Studio 메뉴바에 있는 Window → Preferences에서 General → Editors → Text Editors를 선택하면 우측에 Editor와 관련된 환경 설정들이 나온다.
이 중 "Show whitespace character"를 선택하여 화면에 출력할 공백 문자, 탭 문자, 개행 문자등과 투명도를 선택할 수 있다.
아래의 화면은 "Show whitespace character"의 체크를 해제하여 아무것도 출력하지 않는다.
팝업으로 Outline을 확인할 수 있고 바로 함수나 변수로 이동이 가능한 Quick Outline을 지원한다.
Quick Outline의 단축키는 “Ctrl + O” 이다.
코드를 정렬하는 기능으로 지정된 Format으로 코드를 정렬해준다.
Format의 설정은 Aptana Studio 메뉴바에 있는 Window → Preferences에서 Aptana Studio → Formatter를 선택하면 우측에서 Preset을 선택할 수 있고 사용자가 새로운 Format을 작성할 수도 있다.
Formatter는 아래 화면에서처럼 if-else, try-catch-finally, do-while 등에 대한 라인 관리를 할 수 있는 new line, editor의 코드 정렬을 조절할 수 있는 indentation, 함수 사이의 공백을 조절할 수 있는 blank line, 대괄호의 위치를 조절할 수 있는 braces, editor의 전체적인 공백을 조절할 수 있는 spaces, 주석에 대한 조절을 할 수 있는 comment, Tag에 따라 format을 미적용/적용시킬 수 있는 off/on tags로 7개의 탭으로 구성되어있다.
Format 처리는 Aptana Studio의 메뉴에 있는 Edit → Format 으로 동작하며 단축키는 "Ctrl + Shift+ F" 이다.
코드상에서 선택한 단어와 일치하는 모든 단어의 배경색을 지정할 수 있다.
이는 동일한 함수, 변수 등을 쉽게 찾을 수 있도록 돕는다.
Aptana Studio 메뉴바에 있는 Window → Preferences에서 Aptana Studio → Editors → JavaScript를 선택하면 우측에 "Mark occurrences with background color"의 체크로 사용이 가능하고 단축키는 "Alt + Shift + O" 이다.
문장을 선택하면 동일한 문장을 찾아 배경색을 표시해준다.
프로젝트 상에서 검색어와 일치하는 파일명을 한 번에 모아서 출력한다.
Open Resource는 Aptana Studio의 메뉴에 있는 Navigate → Open Resource로 동작하며 단축키는 "Ctrl + T" 이고 검색하는 이름의 prefix나 pattern을 보고 해당하는 파일을 찾아준다.
현재 열려있는 파일이나 태그(tags)의 내용을 기초로 해서 입력된 내용을 자동완성하는 기능이다.
Word Completion는 Aptana Studio의 메뉴에 있는 Edit → Word Completion으로 동작하며 단축키는 "Alt + /" 이고 입력한 내용과 일치되는 패턴의 내용으로 완성시켜준다.
인터페이스의 전체적인 테마를 관리할 수 있다.
설정된 preset을 이용하여 Theme 변경이 가능하고 사용자가 Theme를 추가할 수 있다.
Aptana Studio의 Outline은 함수 내부의 모든 내부 함수와 변수들에 대해서 트리 형태로 보여주고 있다.
우측 상단의 아이콘으로 Outline에 보이는 형태를 선택할 수 있으며, 알파벳순 정렬, Private 속성 멤버 감추기, 전체 펴기, 전체 닫기의 기능을 제공하고 있다.
Aptana Studio의 find bar는 "Ctrl + F"로 실행하며 보통의 검색과 다른 점은 검색된 단어의 총개수를 보여주는 Show match count 기능이 있고, 실시간으로 검색할 단어의 존재 유무를 파악한다.
Find Bar의 설정은 Aptana Studio의 Window → Preferences에서 Aptana Studio → Find Bar를 선택하여 설정이 가능하다.
15) Open Declaration [Aptana JS Editor]
Apatana JS Editor에서 F3인 Open Declaration이 함수 또는 변수의 선언부의 위치를 못 찾는 문제가 있다. 이는 여러 언어들이 존재해서 충돌하는 현상으로 특정 기능을 사용 안 함으로써 해결할 수 있다.
Aptana Studio의 Window → Preferences에서 Aptana → Editors를 선택하여 CSS, HTML, JavaScript, XML의 Validation 항목에 체크가 되어있다면 체크를 해제한다.
모든 Validation 항목에 체크를 해제한 후 Editor 모두 종료한 후 재 실행하면 Open Declaration 기능이 정상적으로 동작되는 것을 확인할 수 있다.
16) References
Aptana Studio 에서는 References이라는 User JavaScript File Reference를 사용할 수 있다.
이는 JavaScript 파일을 References Profile에 지정하여 마치 라이브러리처럼 사용할 수 있는 기능이다.
Profile에 등록된 파일에 있는 변수, 함수 등은 모든 Work space에서 사용할 수 있다.
Profile의 사용은 Aptana Studio 메뉴바에 있는 Window Show View → References 선택하면 References Profile을 편집할 수 있는 View가 추가된다.
위의 화면에서 Profile에 추가돼있는 파일들은 어디서든지 호출해서 사용할 수 있다.
아래는 Profile에 등록된 함수를 Code Assist를 통해 사용하는 화면이다.
다른 Work space지만 References의 Profile에 등록되어 있다면 어디서든지 호출해서 사용할 수 있다.
| Open Declaration | "F3 or Ctrl + Left Click", 함수나 변수가 선언된 곳으로 이동 |
| Toggle JS Comments | "Ctrl + /", 라인 or 블록 단위 블록 단위 주석 처리 |
| Next Word | "Ctrl + Right or Left", 단어 단위 커서 이동 |
| Select Next Word | "Ctrl + Shift + Right or Left", 단어 단위 블록 지정 |
| Move Line | "Alt + Up or Down", 줄 단위 이동 |
| To Upper Case | "Ctrl + Shift + X", 대문자로 변경 |
| To Lower Case | "Ctrl + Shift + Y", 소문자로 변경 |
| Quick Switch Editor | "Ctrl + E", 빠른 편집 전환 |
| Find Next | "Ctrl + K", 다음 검색 |
| Find Previous | "Ctrl + Shift + K", 이전 검색 |
| Go to Matching Bracket | "Ctrl + Shift + P", 일치하는 대괄호로 이동 |
| Quick Access | "Ctrl + 3", 빠른 접근, 메뉴 전 영역에 접근성을 강화한 기능 |
1) Aptana Studio는 Eclipse 보다 조금 더 JavaScript를 편집하는데 편리한 기능을 제공한다.
2) Aptana Studio에서 제공되는 작은 편의들이 Miss Typing과 개발 실수들에 대해 도움을 줄 것이다.
3) Aptana Studio는 Eclipse와 같은 Plug-In을 사용하기 때문에 사용자의 편의에 맞게 확장할 수 있다.
'IT > note' 카테고리의 다른 글
| 온라인 코딩 테스트 관련 개인적인 생각들.. (3) | 2022.02.16 |
|---|---|
| AWS Marketplace / 마켓 등록 절차, 용어 설명 등 팁 공유 (5) | 2022.01.26 |
| Server OS의 변화 동향에 따른 client OS의 향후 동향 예측 (10) | 2022.01.25 |
| 분산 데이터 베이스 정의 / 특징, 장점, 단점 (0) | 2022.01.25 |
| QA 조직 요구 사항 및 인력 구성 (6) | 2022.01.25 |
댓글