웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
XE 이클립스 개발환경 만들기
2011.10.19 14:05
[1] 서론
보통 XpressEngine(이하 XE)에 무슨 개발환경이 필요해!! 라는 생각을 할것입니다. 저도 마찬가지 입니다. 메모장이든 에디트 플러스든 울트라 에디터든 많은 텍스트 에디터 에서 HTML, CSS, JAVASCRIPT 만 수정하면 됩니다. 근데 왠 XE에 개발환경 세팅을 운운 하는것일까요? ㅎㅎ 아무 이유 없습니다. 그냥 이런식으로 하면 좀더 편하게 개발할수 있겠다 라고 생각했습니다.
[2] 요약
이클립스로 HTML, CSS, JAVASCRIPT 개발.
1. JDK 설치
2. 이클립스 설치
3. 이클립스FTP 플러그인
4. 개발 화면 설정
[3] 설치
1. JDK 설치
이클립스를 실행 하기 위해서는 JDK 또는 JRE가 필요합니다.
![](http://cfile4.uf.tistory.com/image/136578464E9D853936F354)
- 자신 사양에 맞는 JRE를 다운 받습니다. (64bit 에서 32bit 설치하면 이클립스가 제대로 동작하지 않습니다.)
- 다운로드한 파일을 실행하여 다음다음 누르시면 설치가 완료됨니다. ( C:\Program Files\Java\jre6 )
![](http://cfile27.uf.tistory.com/image/176AF8434E9D85AD3195E3)
2. 이클립스설치
이클립스는 설치 프로그램이 아닌 포터플(설치불필요)프로그램 입니다. 이클립스 사이트에서 바로 다운 받습니다.
![](http://cfile10.uf.tistory.com/image/2063F5434E9D7E900ADE36)
- 추천하는 미러사이트에서 다운
![](http://cfile29.uf.tistory.com/image/170F7A3F4E9D7F1D2E3BA6)
- 압축 해제 (이클립스는 무설치 프로그램입니다.)
![](http://cfile7.uf.tistory.com/image/15572D4E4E9D7FD30E269F)
- 실행 (eclipse.exe 실행)
![](http://cfile10.uf.tistory.com/image/1439913B4E9D866134B823)
![](http://cfile27.uf.tistory.com/image/182F0E384E9D868214C0C6)
3. 이클립스 플러그인 설치
주로 XE프로그램은 FTP 상에서 개발을 하기 때문에 FTP연동이 필요합니다. Aptana 프러그인을 설치하여 FTP를 사용할수 있도록 하겠습니다. (굳이 이클립스를 설치하지 않고 http://www.aptana.com/ 에서 aptana를 설치하셔도 됩니다.)
![](http://cfile24.uf.tistory.com/image/1854003C4E9D89781E2402)
- Work with 에 ( http://download.aptana.com/tools/studio/plugin/install/studio ) 를 넣은후 Add
![](http://cfile29.uf.tistory.com/image/142F913A4E9D899F09F58A)
![](http://cfile22.uf.tistory.com/image/122C92384E9D8A012B0626)
- Next 클릭
- I accept the ~ 체크후 Next
- 프로그램 설치 (2~3분이면 끝나요.)
![](http://cfile27.uf.tistory.com/image/15408D364E9D8A5B030170)
- 설치후 이클립스 재시작
![](http://cfile1.uf.tistory.com/image/1668C84D4E9D8A9A34D158)
4. 개발 화면 설정
XE를 개발하기 편한 화면으로 설정해 보도록 하겠습니다.
![](http://cfile1.uf.tistory.com/image/12713E504E9D8BCF05B5CF)
- 화면이 바뀌는걸 볼수 있습니다.
- 왼쪽 바의 FTP에서 FTP를 추가할수 있습니다.
![](http://cfile6.uf.tistory.com/image/194AEB474E9D8DF3391A3B)
- FTP를 설정
![](http://cfile7.uf.tistory.com/image/114A8C4E4E9E5821262B33)
- FTP를 설정하시면 아래와 같이 서버환경에서 작업 가능합니다.
![](http://cfile24.uf.tistory.com/image/133340344E9E588A229710)
출처 : http://hengki.net
보통 XpressEngine(이하 XE)에 무슨 개발환경이 필요해!! 라는 생각을 할것입니다. 저도 마찬가지 입니다. 메모장이든 에디트 플러스든 울트라 에디터든 많은 텍스트 에디터 에서 HTML, CSS, JAVASCRIPT 만 수정하면 됩니다. 근데 왠 XE에 개발환경 세팅을 운운 하는것일까요? ㅎㅎ 아무 이유 없습니다. 그냥 이런식으로 하면 좀더 편하게 개발할수 있겠다 라고 생각했습니다.
[2] 요약
이클립스로 HTML, CSS, JAVASCRIPT 개발.
1. JDK 설치
2. 이클립스 설치
3. 이클립스FTP 플러그인
4. 개발 화면 설정
[3] 설치
1. JDK 설치
이클립스를 실행 하기 위해서는 JDK 또는 JRE가 필요합니다.
- JRE 다운로드 사이트 이동 ( http://java.com/ko/download/manual.jsp )
- 자신 사양에 맞는 JRE를 다운 받습니다. (64bit 에서 32bit 설치하면 이클립스가 제대로 동작하지 않습니다.)
- 다운로드한 파일을 실행하여 다음다음 누르시면 설치가 완료됨니다. ( C:\Program Files\Java\jre6 )
2. 이클립스설치
이클립스는 설치 프로그램이 아닌 포터플(설치불필요)프로그램 입니다. 이클립스 사이트에서 바로 다운 받습니다.
- 이클립스 다운로드 사이트 이동 ( http://www.eclipse.org/downloads/ )
- Eclipse IDE for JavaScript Web Developers 다운 (32bit/64bit 자신에 알맞는 버전 선택)
- 추천하는 미러사이트에서 다운
- 압축 해제 (이클립스는 무설치 프로그램입니다.)
- 실행 (eclipse.exe 실행)
3. 이클립스 플러그인 설치
주로 XE프로그램은 FTP 상에서 개발을 하기 때문에 FTP연동이 필요합니다. Aptana 프러그인을 설치하여 FTP를 사용할수 있도록 하겠습니다. (굳이 이클립스를 설치하지 않고 http://www.aptana.com/ 에서 aptana를 설치하셔도 됩니다.)
- Help > Install New Software... 선택
- Work with 에 ( http://download.aptana.com/tools/studio/plugin/install/studio ) 를 넣은후 Add
- Add Repository 창이 뜨면 Name를 입력한후 OK
- Name 에서 체크박스를 모두 선택후 Next
- Next 클릭
- I accept the ~ 체크후 Next
- 설치후 이클립스 재시작
4. 개발 화면 설정
XE를 개발하기 편한 화면으로 설정해 보도록 하겠습니다.
- 오른쪽 상단의 JavaScript 옆의 창모양아이콘 클릭 > Other... 클릭
- Aptana Web 선택후 OK!
- 화면이 바뀌는걸 볼수 있습니다.
- 왼쪽 바의 FTP에서 FTP를 추가할수 있습니다.
- FTP를 설정
- FTP를 설정하시면 아래와 같이 서버환경에서 작업 가능합니다.
출처 : http://hengki.net
댓글 7
제목 | 글쓴이 | 날짜 |
---|---|---|
[생초보팁] 서브메뉴 배경이미지 활용하기
[4]
![]() | 에혀라X | 2010.11.24 |
개인 홈페이지에서 아주 손쉽게 배경음악을 깔아놓는 법 [5] | 지녁 | 2010.11.25 |
텍스타일 (Textyle) 에서 첨부파일 용량 제한 늘리는 방법. [1] | sejin7940 | 2010.11.27 |
게시물 하단에 예쁜 추천,비추천 아이콘 버튼 추가하기~
[12]
![]() | xemall | 2010.11.28 |
최근문서 or 콘텐츠 위젯 공지글 뽑아오기 [8] | Xiso | 2010.11.29 |
[생초보팁] 페이지 내용 줄간격 css | 에혀라X | 2010.11.30 |
호스팅비 돈아낍시다. 하나의 XE 다중 도메인 사용하기. [10] | kimnada | 2010.12.02 |
[생초보팁] 회원가입시 홈페이지 블로그주소 않나타내기 ㅋ [4] | 에혀라X | 2010.12.05 |
새로운 채팅 서비스 웹톡!
[3]
![]() | 명랑폐인™ | 2010.12.06 |
어느게시판이든 모두 적용이 가능한 그림판입니다.^^ [1] | web | 2010.12.07 |
ftp나 mysql 암호 변경시 일어나는 ''db 접속시 에러' XE | 샷타이거 | 2010.12.08 |
플래시로 만들어진 글자 타이핑보고 만들었어요. | web | 2010.12.09 |
사이트 모니터링 알리미에요...^^
[3]
![]() | web | 2010.12.10 |
[생초보팁] 페이지(page) 줄간격과 부분 웹폰트 | 에혀라X | 2010.12.11 |
[생초보팁] 웹진최근게시물 요약글 링크걸기
[1]
![]() | 에혀라X | 2010.12.12 |
[생초보팁] 레이아웃 수정시 HTML 넣는 칸 넓히기 -_- | 에혀라X | 2010.12.12 |
메인화면에 설문조사 위젯(?) 만들기
[3]
![]() | 3D매니아 | 2010.12.14 |
1.4.2.3 에서 1.4.3 이상 버전으로 업그레이드 시 백지화면 해결팁 [4] | 2년후 | 2010.12.15 |
외부페이지를 레이아웃에 결합시 상단 마진폭이 벌어지는 문제 해결방법
[6]
![]() | DuRi | 2010.12.17 |
심플한 XML 플래시 이미지 갤러리
[7]
![]() | maxtabby | 2010.12.21 |