IDE - Eclipse

Eclipse

HTML, CSS, JavaScript + Node.js 개발환경 만들기

Eclipse 공식사이트: https://eclipse.org/
Oracle Java 공식 사이트: http://www.oracle.com/technetwork/java/index.html


준비과정:
Eclipse 설치

1. Java JRE or JDK가 설치 되어 있어야함.
-Java SE Development Kit 8 설치함.

2. Eclipse 다운로드 및 설치
-내 OS와 맞는 버젼을 다운로드 한다.
-Eclipse IDE for Java Developers 선택해서 설치

3.Node.js plug-in for Eclipse 설치
- Eclipse 실행후 -> Help -> Eclipse Marketplace 선택
- nodeclipse 라고 검색 후 Go-> install -> 약관 동의 후 -> finish
- Nodeclipse 1.0.1 설치함

4. html editor plug-in 설치
- HTML Editor (WTP) Mars 설치함

5. HTML 에디터 설정
설정: Window -> Preferences -> General의 Editors 의 File Associations 선택 후 ->
*.html 선택 -> Associated editors 의 Add 클릭 -> JavaScript Editor과 CSS Editor 추가

6. Eclipse Theme plug-in 설치
- Eclipse Color Theme 1.0 설치함
- Window -> Preferences -> General -> Appearance -> Color Theme -> 원하는 색상 선택

7. Vrapper (Vim) plug-in 설치
참고: http://vrapper.sourceforge.net/documentation/index.php?topic=configuration
설정: window -> Preferences -> General -> Keys -> Vim's key bindings 선택 후
아래 목록에서 원하는 기능의 단축키를 설정 할 수 있음
e.g.
Page Down: Ctrl+F
Page Up: Ctrl+B

Shortcut 설정 방법:
Window -> Preferences->General->Keys -> "vrapper"라고 검색 -> 토글하는 단축키 설정후 (e.g. Alt+T) -> apply -> ok


8. Emmet plug-in 설치
- html 코딩 속도 up

*주의사항*
Plug-in 기존 설정을 유지하고 싶을땐, 사용중인 Workspace의 .plugins 폴더를 복사해야함.
폴더 위치: workspace -> .metadata -> .plugins

plug-in 삭제방법:
Help -> About Eclipse -> Installation Details 버튼 -> plug-in 선택 -> Uninstall 클릭


* Eclipse에 Dynamic Web Project 가 없을 경우
1. Help > Install New Software
2. Work Width에 Mars - http://download.eclipse.org/releases/mars/201602261000 입력
3. Pending이 끝난 후 Web, XML, Java EE and OSGi Enterprise Development 에서
   Eclipse Java EE Developer Tools를 선택후 Next 클릭 -> 동의 및 설치
4. 재 시작
5. File -> New -> Other -> Web -> Dynamic Web Project

추가적으로 아래 설치가능
  - Eclipse Java Web Developer Tools
  - Eclipse Web Developer Tools
  - Eclipse XML Editors and Tools



작성:
1.Project 생성
- File -> New -> Project -> Node 선택 -> Node.js Project 선택 -> Next -> 프로젝트명 입력 후 Finish

2. File 만들기
- 프로젝트명 오른쪽 클릭 -> New -> File -> 파일명.js (JavaScript 파일 만들어짐)

실행:
1.파일명.js 안에 코드입력
- console.log("Hello"); 라고 입력후
- 라인2에서 더블클릭 하면 breakpoint가 셋업됨.
2. 실행
- Run -> Run As -> Node Application 클릭하면, 콘솔창에 Hello라고 뜨면 완료.