웹 ide 비교
TRANSCRIPT
![Page 1: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/1.jpg)
Web(Cloud) IDE 비교
이준영 h#p://nnoco.+story.com
![Page 2: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/2.jpg)
상용 Web IDE
![Page 3: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/3.jpg)
![Page 4: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/4.jpg)
상용 Web IDE 공통 기능 • 프로젝트(파일) 관리
• 워크스페이스 제공 • 프로젝트 템플릿 제공 • 파일 업로드/다운로드 • 프로젝트 내보내기/가져오기
• 편집기(문법 검사, 코드 하이라이팅, 자동 완성 등) • 자동 저장 및 리비전(SCM과는 별개) • 개발, 빌드 및 실행을 위한 VM(Container) 제공 • 협업
• 프로젝트 공유/멤버 관리 • IDE내 메신저 • 동시 협업 코딩 등
• SSH 터미널 제공 (대부분 sudo 명령어 지원) • 형상관리 연동(Git/Mercurial/SVN) • UI 사용자화(창, 창 분할, 테마 사용자화 등)
![Page 5: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/5.jpg)
실행(테스트) 환경 관련
• VM(Container) 기반 워크스페이스 • 실행 및 빌드 시에만 VM(Container) 생성 • 웹 서비스 테스트를 위한 호스팅(Public URL) 제공 • 배포는 별도
![Page 6: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/6.jpg)
• Docker 기반 컨테이너 제공 • 프로젝트 실행 시에만 컨테이너(Runner) 동작
• 프로젝트 실행 시 웹 SSH Terminal을 통해 접속 가능
• 웹 UI를 통한 데이터베이스 연동
• 언어 지원 : C/C++, Javascript, Java, PHP, Python, Ruby • 템플릿 프로젝트 제공 • 언어별 빌드툴에 대한 빌더 인터페이스 제공 • 언어별 다양한 실행환경 제공 • 형상관리 제공(Git, Subversion)
![Page 7: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/7.jpg)
![Page 8: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/8.jpg)
![Page 9: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/9.jpg)
※ 현재 Runner 구성으로 Custom Runner 생성 가능
Android 4.2.2 + VNC + Java 7
Android 4.3.1 + VNC + Java 7
Android 4.4.2 + VNC + Java 7
Apache 2
Apache 2.4 + MySQL 14.14 + PHP 5.6
C++
Cassandra DB 2.0 + Java 7
Codenvy CLI + Java 7
Couchbase 3.0.1 + Java 7
Django + Python 2.7
GlassFish 4.0 + Java 7
Go Console 1.3
Go Web 1.3
Google App Engine SDK 1.9.14 + Java 7
Google App Engine SDK 1.9.14 + PHP 5.6
Google App Engine SDK 1.9.14 + Python 2.7
RiakDB 1.4 + Java 7
Ruby 2.1
Tomcat 7.0 + Java 7
TomEE 1.5 + Java 7
Google App Engine SDK 1.9.19+ Java 7
Google App Engine SDK 1.9.19 + PHP 5.6
Google App Engine SDK 1.9.19 + Python 2.7
Google App Engine SDK 1.9.14, Python 2.7
Grun 0.4 + Node.js 0.10 + Angular JS 1.2
Gulp 3.8 + Node.js 0.10 + Angular JS 1.2
Java 7
JBoss 7.1 + Java 7
Je#y 9.2 + Java 7
MongoDB 2.6 + Java 7
MySQL 5.5 + Java 7
Neo4j 2.1 + Java 7
NuoDB 2.0 + Java 7
Play 1.2 + Java 7
PostgreSQL 9.3 + Java 7
Python 2.7
Python 3.4
Qt4 + C++
Rails 4.0 + Ruby 2.1
Virgo 3.6 + Java 7
VNC + Java 7
Codenvy 실행환경(Runner)
![Page 10: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/10.jpg)
![Page 11: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/11.jpg)
![Page 12: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/12.jpg)
![Page 13: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/13.jpg)
![Page 14: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/14.jpg)
![Page 15: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/15.jpg)
![Page 16: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/16.jpg)
![Page 17: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/17.jpg)
• 형상관리 시스템에 밀접하게 연동 • 프로젝트 생성 시 형상관리 시스템을 먼저 선택
• UI상에서 Package management 제공 • npm, pip, bower 등
• 개발용 데이터베이스 제공 • Heroku 개발 특화 • Heroku 앱 템플릿 제공(Node, Django)
![Page 18: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/18.jpg)
![Page 19: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/19.jpg)
![Page 20: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/20.jpg)
![Page 21: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/21.jpg)
![Page 22: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/22.jpg)
![Page 23: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/23.jpg)
![Page 24: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/24.jpg)
• VM 기반 -‐ VM에 대한 Public IP 제공 • 편집기 위주의 화면 구성 • 빌드, 테스트 등은 터미널을 통해 명령어/스크립트로 수행 • 그림판(Drawing Board) 편집기 제공 • 메신저(개인 Direct Message/채널)
• 채널의 경우 Public, 다른 사용자들과 의견 공유 • VM 관리
• VM Spec, Disk Usage, Domain, VM Share, Snapshot, .. • 외부 VM 사용 가능 – 해당 VM에서 셋업 스크립트 실행
![Page 25: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/25.jpg)
![Page 26: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/26.jpg)
![Page 27: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/27.jpg)
![Page 28: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/28.jpg)
![Page 29: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/29.jpg)
![Page 30: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/30.jpg)
• 컨테이너, FTP/SFTP/SSH, Git/ 스토리지 서비스를 통해 프로젝트 생성 및 파일 관리 가능 • 자체 제공 컨테이너 : 언어 및 프레임워크별 이미지 제공 • Github/Bitbucket 연동 또는 Git URL • 3rd Party 스토리지 서비스 : Amazon S3, Dropbox, Google Drive
• 프로젝트 템플릿은 제공하지 않음 • 컨테이너의 언어(프레임워크) 스택에 따라 웹 서버 실행 • 스택에 필요한 패키지 설치 후 커스텀 스택으로 저장 • 협업은 다른 사용자에게 프로젝트를 공유 기능 지원 • 프로젝트/컨테이너 등의 설정은 JSON 형식의 파일을 직접 수정
![Page 31: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/31.jpg)
![Page 32: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/32.jpg)
![Page 33: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/33.jpg)
![Page 34: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/34.jpg)
• 컨테이너 베이스 • REPL(Javascript) 제공 • WAS에 대한 로그 콘솔 제공 • 로컬 IDE와 유사한 수준의 디버깅 제공 • 컨테이너 리소스 모니터링 및 프로세스 관리 가능 • HTML 페이지, 마크다운, 이미지 파일 등의 프리뷰 지원
![Page 35: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/35.jpg)
![Page 36: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/36.jpg)
![Page 37: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/37.jpg)
![Page 38: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/38.jpg)
![Page 39: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/39.jpg)
전화번호 인증 불가..
![Page 40: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/40.jpg)
![Page 41: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/41.jpg)
![Page 42: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/42.jpg)
![Page 43: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/43.jpg)
• 국내 웹 IDE • 컨테이너 기반(Amazon EC2 Container) 워크스페이스
• *.goorm.io / *.compute.amazonaws.com Public URL 제공
• Java 교육용 컨텐츠(예제/템플릿) 제공 • 로컬 IDE와 유사한 수준의 디버깅 기능 제공 • Git/Subversion 연동 (불안정)
• 문서뷰어 제공(Slideshare.net, PDF) • 작업 내역(리비전) 기록 및 해당 리비전에 대한 작업 내역 재생 기능
![Page 44: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/44.jpg)
![Page 45: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/45.jpg)
![Page 46: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/46.jpg)
![Page 47: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/47.jpg)
![Page 48: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/48.jpg)
![Page 49: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/49.jpg)
![Page 50: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/50.jpg)
오픈소스 Web IDE
![Page 51: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/51.jpg)
오픈소스 Web IDE 목록
• Eclipse Che • Eclipse Orion • Eclipse Dirigible • Eclispe Flux • Codebox • Codiad (프론트엔드 언어만)
![Page 52: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/52.jpg)
![Page 53: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/53.jpg)
Eclipse Che
• Codenvy에서 이클립스 재단에 기여 • Codenvy에서 제공하는 대부분의 기능 제공(UI포함)
http://www.eclipse.org/che/
![Page 54: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/54.jpg)
Eclipse Orion
• CloudFoundry 와 연동 • 편집 기능 제공 • Git 연동 • Shell 제공 (지정된 명령어만 사용가능) • Public URL 제공 • manifest.yml 편집 및 유효성 검사 기능 제공
![Page 55: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/55.jpg)
![Page 56: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/56.jpg)
![Page 57: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/57.jpg)
![Page 58: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/58.jpg)
![Page 59: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/59.jpg)
![Page 60: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/60.jpg)
![Page 61: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/61.jpg)
![Page 62: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/62.jpg)
![Page 63: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/63.jpg)
![Page 64: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/64.jpg)
Eclipse Dirigible
• SAP에서 이클립스 재단에 기여 • Perspec+ve를 통한 화면 구성 • Database, Debug, Generic, Registry, Repository, Workspace, Help
• Sandbox를 통한 호스팅 제공 • 데이터베이스 스키마 편집 Perspec+ve 제공 • Plugin Lazy Load • 전체적으로 UI 반응성이 떨어짐 • UI 구성이 일반적인 IDE와 차이가 있음
http://www.dirigible.io/index.html#about
![Page 65: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/65.jpg)
![Page 66: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/66.jpg)
![Page 67: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/67.jpg)
![Page 68: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/68.jpg)
![Page 69: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/69.jpg)
![Page 70: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/70.jpg)
![Page 71: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/71.jpg)
![Page 72: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/72.jpg)
Codebox
• 테스트 서버 현재 회원가입 제한 상태..
• Node.js 기반, Apache 라이센스 • Java, Python, Ruby, Go 등의 언어 지원
• 개발 중지된 것으로 보임(마지막 커밋 7개월 전)
https://www.codebox.io
![Page 73: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/73.jpg)
![Page 74: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/74.jpg)
Scenario
• 자바 웹 애플리케이션 개발 및 배포 • 빌드 도구 : Maven • 의존성 관리 이슈 – 외부 Lib, 다른 Project 연결 • Classpath 관리
• 형상관리 : Git (Internal/External) • Run Configura+on – VM 옵션, Run+me Env, etc,. • 배포 대상 : Open PaaS(CF) Run+me • 서비스팩 바인딩? • 애플리케이션 관리(속성)
![Page 75: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/75.jpg)
기타/참고사항
• UI 상에서 사용자에게 지원하지 않는 기능의 일부는 터미널을 통해 필요한 것을 설치하거나 사용할 수 있음 • 배포 시 Target Space 지정? • 하나의 프로젝트를 다른 Target Space에 배포할 경우 • 개별 프로젝트에서 하나의 Remote Git Repository 설정으로 해결 가능
• Service/Applica+on 관리
![Page 76: 웹 IDE 비교](https://reader030.vdocuments.mx/reader030/viewer/2022013109/58ce5c661a28ab2f268b4e8d/html5/thumbnails/76.jpg)
IDE 사용자 인터페이
스
모니터링/감사
관리 사용자 인터페이
스
자원/사용자/프로젝트 관리
파일 관리 /리비전
언어 확장 (프레임워크 /빌드 툴 등)
UAA 연동 (사용자 인증/권한
)
협업
CF 연동 (서비스팩/애플리케이션/배포)
형상관리 연동
개발(테스트/빌드) 환경