정보실

웹학교

정보실

javascript JavaScript 개발자를 위한 5 가지 최고의 클라우드 IDE

본문

개발자들은 전통적으로 로컬 컴퓨터에서 텍스트 편집기를 사용하여 소프트웨어를 작성해 왔지만 최근 습관이 바뀌기 시작했습니다. 클라우드 기반 서비스의 인기가 높아짐에 따라 클라우드 기반 IDE도 증가했습니다. 

이 게시물에서는 JavaScript 개발자에게 가장 널리 사용되는 IDE 중 일부를 다룹니다.


https://blog.bitsrc.io/5-top-cloud-ides-for-javascript-developers-62ee672c6e88 


이 게시물에서 살펴 보는 Cloud IDE는 다양한 요구 사항이 있는 JavaScript 개발자에게 적합합니다. 

코드 스니펫을 다른 사람과 선택적으로 공유 할 수 있는 것을 찾고 있습니까? 

작성 중인 블로그 게시물이나 문서에 코드 스니펫을 포함 시키는 기능을 원하십니까? 

IDE 내에서 개념을 설명 할 수 있도록 IDE 자체 내에 텍스트를 추가 할 수 있는 옵션을 찾고 있습니까? 

완전한 개발 프로세스를 위해 IDE가 필요합니까?


IDE는 코드 공유 및 공동 작업에 특히 유용합니다. 그것이 당신이 찾고 있는 것이라면 Bit (Github)와 같은 도구를 고려할 수 있습니다. Bit는 코드를 격리하고 bit.dev에서 공유하여 다른 사람들이 코드를 찾고 사용하고 공동 작업 할 수 있도록 도와줍니다. 이렇게 하면 케이크를 먹고 먹을 수 있습니다. 교차 시스템 공동 작업을 위해 로컬 컴퓨터에서 코드 구성 요소를 개발하고 클라우드로 쉽게 내 보냅니다.


1*yHv9wfy_1GwMGvmqmsulVQ.gif 

Bit의 라이브 놀이터에서 React 공유 구성 요소의 예 편집


1*eMHVO3lUX0BBzyQ3N1pXLw.png 

bit.dev의 공유 JS 구성 요소


1. HackerEarth의 코드 테이블 


HackerEarth의 Codetable은 코드 조각을 공유하는 데 이상적인 기본 기능을 갖춘 간단한 IDE입니다. 

코드를 테스트하기 위해 많은 프로그래밍 언어를 사용할 수 있으며 HackerEarth 서버를 통해 코드 스니펫을 원격으로 실행할 수도 있습니다. 

HackerEarth는 주로 새로운 개발자를 고용하기 위해 회사에서 수행하는 해커 톤을 제공하며 Codetable은 동일한 엔진을 사용하여 코드 스니펫을 실행합니다.


0*kW3IiAox-mEwJCtU.jpg 

코드 표 샘플 코드


프로그램을 작성하면 서버로 전송되어 실행됩니다. 실행이 완료되면 코드 실행 시간 및 사용 된 메모리와 함께 출력이 표시됩니다. 이것은 해커 톤에서 프로그램을 판단하기 위한 매개 변수입니다. 추가 된 기능으로 프로그램에 대한 사용자 정의 입력도 지정할 수 있습니다.


0*2j9csHzTjxztPbWV.jpg 

코드 테이블 통계


Codetable에는 기본 기능 만 있지만 처음부터 이해할 수 없는 여러 가지 기능에 산만하지 않으려는 초보자에게는 적합합니다.


2. JSFiddle 


JSFiddle은 HTML, CSS 및 JavaScript "놀이터"라는 아이디어에서 생성 된 최초의 IDE 중 하나입니다. JSFiddle은 많은 경쟁자들에게 영감을 주었습니다. 이 IDE를 사용하면 이러한 프런트 엔드 언어로 코드를 작성하여 서로 상호 작용하고 결과를 실시간으로 렌더링 할 수 있습니다. 코드 스니펫은 도구에서 "피들"이라고 합니다.


JSFiddle과 같은 코드 놀이터의 주요 기능은 코드를 실시간으로 테스트하고 동료와 공유 및 협업하는 것입니다. 동료는 작업을 포크하고 수정 한 후 다시 공유 할 수 있습니다. 또한 데모 목적으로 블로그 나 문서와 같은 외부 웹 사이트에서 실시간 미리보기와 함께 코드 스니펫을 포함 할 수 있습니다. 또한 JSFiddle을 통해 AJAX 요청을 시뮬레이션 할 수도 있습니다.


0*1WZk6dNSmApmJjBy.jpg 

JSFilddle의 샘플 바이올린


JSFiddle은 널리 사용되는 JS 라이브러리인 jQuery, Vue 및 React에 대한 상용구 형태의 스캐 폴딩 코드를 제공합니다. JSFiddle의 몇 가지 고유 기능에는 StackOverflow에 코드 추가 및 GitHub 문제를 통한 버그 보고가 포함됩니다.


3. CodePen 


CodePen은 HTML, CSS, JavaScript 코드 놀이터로 시작했지만 더 많은 기능을 제공하기 위해 수년에 걸쳐 진화했습니다. 프런트 엔드 개발자를 위한 온라인 사회 개발 도구 역할을 합니다. JSFiddle과 마찬가지로 클라우드 기반 IDE에서 기대하는 기본 기능 (코드 테스트, 공유 및 공동 작업)을 수행합니다.


서로 상호 작용하는 HTML, CSS 및 JavaScript 코드를 추가하는 기본 기능은 동일하게 유지됩니다. "펜"을 저장하고 다른 사람과 공유하고 외부 웹 사이트에 포함 할 수도 있습니다.


0*dUL2vH1u_XLayvSX.jpg 

CodePen의 샘플 펜


CodePen에서 모든 코드를 관리하기 위한 계정을 만드는 것은 무료이며 CodePen Pro는 매년 청구되는 월 $ 8에서 시작합니다. 무료 계정을 통해 CodePen의 모든 기본 기능에 액세스 할 수 있습니다. CodePen Pro는 CodePen에서 광고를 제거하고 개인 펜 생성, 자산 호스팅 공간에 대한 액세스 및 인기도 알고리즘을 높이는 등의 기능을 추가합니다. JavaScript IDE를 종료하기 위해 엔드 포인트가 필요한 경우 CodePen Pro를 선택하는 것이 좋습니다. CodePen은 2017 년에 새로운 기능인 Projects를 도입하여 사이트 내에서 전체 프런트 엔드 프로젝트를 관리 할 수 ​​있습니다.


학생 인 경우 학교에서 탐색 할 수 있는 몇 가지 Pro 기능이 포함 된 CodePen for Education 기능에 학교가 등록되어 있는지 확인하십시오.


4. Observable 


Observable은 개발자 인 D3.js 인 Mike Bostock이 만든 JavaScript 클라우드 기반 IDE입니다. Python 노트북을 만드는 비슷한 웹 기반 옵션 인 Jupyter에서 영감을 얻었습니다. 관찰 가능한 노트북은 클라우드상의 JavaScript 노트북이며 마크 다운과 JavaScript 코드가 혼합되어 있습니다.


0*BqTCYN9r-mmEXTl_.jpg 

관찰 가능한 마크 다운 및 코드 수집


Observable의 기능을 시험해 보려면 계정을 만들기 전에 데모 노트북을 시험해보십시오. 코드 내에 마크 다운 스니펫을 추가하면 많은 새로운 가능성을 얻을 수 있습니다. 동일한 노트북 내에서 코드 블록에 기능을 추가하여 개념을 점진적으로 설명 할 수 있습니다. 소프트웨어 설명서로 사용할 수도 있습니다. Observable에서 무료 계정을 만들면 새 전자 필기장을 만들고 변경 사항을 저장하며 동료와 공유 할 수 있습니다.


Observable의 팀은 각 편집자에 대해 월 $ 9부터 시작하는 유료 기능으로, 팀 환경에서 사용할 수 있는 새로운 가능성을 열었습니다. 멀티 플레이어 편집 기능을 사용하면 여러 팀 구성원이 동일한 전자 필기장에서 실시간으로 작업 할 수 있습니다. 또한 라이브 데이터 기능을 사용하여 실시간으로 데이터 소스를 쿼리 할 수 ​​있습니다.


5. Google Cloud Shell 


Google Cloud Shell은 클라우드에서 개발 설정을 제공합니다. 브라우저에서 터미널에 액세스 할 수 있으며 Google 계정으로 완전히 인증됩니다. Cloud Shell은 기본적으로 MySQL 클라이언트, Docker 및 Kubernetes와 같은 널리 사용되는 도구와 함께 제공됩니다. 또한 Node.js, Python 및 PHP와 같은 백엔드 기술을 통해 개발자가 개발을 시작할 수 있습니다. 홈 디렉토리에 5GB의 스토리지가 제공됩니다. Google Cloud Shell은 Google Cloud Platform 고객에게 무료입니다. 다음은 Google Cloud의 자세한 가격입니다.


강력한 가상 머신에 대한 모든 액세스 권한을 원하는 경우 어디에서나 액세스 할 수있는 옵션을 제공하는 Google Cloud Shell은 완벽한 플랫폼입니다. 크롬 북을 소유 한 경우 귀하의 관심을 끌고 개발 요구 사항을 처리해야 합니다.


0*HZxY4qjZvlheM4g5.jpg 

Google Cloud Shell을 사용하여 브라우저에서 터미널 액세스


브라우저 내에서 터미널을 시작하고 그 안에서 일반적인 유닉스 명령을 실행할 수 있습니다. VIM 및 Emacs와 같은 터미널 기반 편집기를 쉽게 사용할 수 있지만 Google은 터미널 기반 편집기에 익숙하지 않은 경우 화면을 분할하여 브라우저 내에서 GUI 기반 텍스트 편집기를 제공합니다. 편집기를 사용하면 왼쪽 메뉴에서 파일 시스템의 그래픽 표현을 볼 수 있으며 파일 업로드 및 다운로드에 사용할 수 있습니다.


로컬 개발 시스템의 대안을 찾고 있다면 Google Cloud Shell이 ​​전환에 적합한 구성 요소를 가지고 있는 것 같습니다.


어떤 IDE를 선택해야 합니까 : 최종 생각 


이 최고의 JavaScript IDE 라운드를 시작할 때 제기 한 질문을 다시 살펴 보겠습니다.


작은 코드 스니펫을 실행하고 동료와 코드 및 출력을 공유하려면 HackerEarth의 Codetable을 사용해보십시오 (또는 앞에서 언급 했듯이 로컬 컴퓨터에서 코드를 작성하고 Bit와 공유).


게시물에 코드를 포함하고 다른 사람과도 공동 작업 할 수 있는 기능을 원하십니까? JSFiddle 또는 CodePen을 확인하십시오.


마크 다운과 코드 스니펫을 혼합하는 고유 한 기능을 원하면 Observable을 선택하십시오. 이는 문서 나 블로그 게시물에 이상적입니다.


팀이 동기화 된 솔루션을 원하십니까? Observable 팀 또는 CodePen Pro 팀 계획의 기능을 확인하십시오.


클라우드에서 IDE에 대한 엔드 투 엔드 솔루션을 원한다면 CodePen Pro 또는 Google Cloud Shell을 사용해보십시오.



페이지 정보

조회 62회 ]  작성일20-01-26 21:45

웹학교