CodePen 프런트 엔드 개발자를 위한 온라인 개발 환경.

웹 사이트를 구축, 테스트, 공유, 공동 작업 및 배포하는 데 필요한 모든 기능을 완벽하게 갖추고 있습니다.

CodePen 계획은 사용자가 필요로 하는 것을 수용 할 수 있도록 충분히 유연합니다.

CodeSandbox 개발자가 필요한 백그라운드 프로세스 및 구성을 모두 처리하는 동안 코드 작성에 집중할 수 있게 해주는 온라인 편집기.

CodeSandbox는 CodePen과 달리 백엔드 구성 요소가 포함 된 코드 데모를 작성하고 공유하는 데 더 중점을 둡니다.

편집기는 npm 의존성을 분석하고, 사용자 정의 오류 메시지를 표시하고, npm 종속성으로 프로젝트를 검색 할 수 있도록 최적화되어 있습니다.

CodeSandbox는 개발자가 웹 응용 프로그램을 작성하기 위해 자주 사용하는 도구로 신속하게 시작할 수 있도록 전용 샌드 박스를 제공합니다.

CodeSandbox를 사용하면 브라우저를 열고 원하는 개발 도구를 선택하고 코드를 작성하기 만하면 됩니다.

모든 백그라운드 작업과 구성을 추상화하므로 코드 작성에 대해 걱정할 필요가 있습니다. 

Github 통합 : Codesanbox 2.0을 사용하면 CodeSandbox에서 바로 커밋하고 리포지토리를 만들고 풀 요청을 열 수 있습니다.

정적 파일 호스트 : CodeSandbox는 공용 디렉토리의 모든 파일을 호스트합니다. 결과적으로 index.html 파일에 대한 전체 액세스 권한을 가지기 때문에 로컬 개발 서버의 모든 기능을 모방 할 수 있습니다.

실시간 협업 : CodeSandbox를 사용하면 프로젝트를 만들고 라이브 세션을 열어 동료에게 공유 할 수 있는 라이브 URL을 생성 할 수 있습니다. URL을 통해 모든 동료가 동시에 프로젝트에서 함께 작업 할 수 있습니다. 클래스룸 모드로 전환하여 샌드 박스를 수정할 수 있는 사용자와 볼 수 있는 사용자를 지정할 수 있습니다.

VS-code 통합 : CodeSandbox에는 브라우저에 VSCode라는 기능이 있습니다. 키 바인딩, 사용자 스니펫, 이동 경로 등과 같은 VSCode 기능에 액세스 할 수 있습니다. 설정 파일을 VSCode에서 CodeSandbox로 직접 복사하면 샌드 박스의 모든 파일을 제어 할 수 있습니다.

StackBlitz 웹 개발자를 위한 VSCode 기반의 온라인 놀이터입니다.  개발자는 클릭 한 번으로 프로젝트를 만들 수 있습니다.

StackBlitz의 공동 작업 기능을 통해 고유 한 프로젝트 URL을 통해 동료와 만든 프로젝트를 공유 할 수 있습니다.

완벽한 프로젝트 설정 : 앞서 언급 한 다른 놀이터와 마찬가지로 StackBlitz는 프로젝트 설정과 관련된 모든 백그라운드 프로세스를 자동으로 처리합니다. 의존성 설치, 컴파일, 번들링 등. Stackblitz는 Angular 프로젝트와 React 프로젝트를 처리 할 수 있는 능력으로 유명합니다. 버튼을 클릭하는 것만으로 새 프로젝트를 설정할 수 있습니다.

VSCode 유사성 : VSCode는 StackBlitz에 힘을 실어주기 때문에 VSCode에서 우리가 좋아하는 모든 미적 기능을 갖추고 있어 로컬 IDE의 모양과 느낌을 제공합니다.

TypeScript 지원 : StackBlitz에는 TypeScript 지원과 TypeScript 자동 완성 기능이 있습니다.이 기능은 Plunker와 같은 다른 IDE에서는 찾을 수 없는 기능입니다.

NPM 지원 : StackBlitz를 사용하면 VSCode에서와 마찬가지로 모든 npm 패키지를 프로젝트로 가져올 수 있습니다.

JSFiddle '바이올린 (fiddles)'으로 알려진 공동 작업 HTML, CSS 및 JavaScript 코드 스 니펫을 작성, 테스트 및 전시하기 위한 온라인 놀이터입니다. 현재 CodePen과 같은 현대식 놀이터에 비해 약간 기본적인 것처럼 보일 수 있습니다. 그러나 테스트, 공유 및 공동 작업과 같은 기본적인 놀이터 작업을 수행합니다. 장점으로 JSFiddle은 복잡한 Ajax 시뮬레이션을 수행 할 수도 있습니다.

JSFiddle을 사용하면 다양한 기술에 대한 고유 한 상용구 템플릿에 대한 액세스를 제공하여 신속하게 시작할 수 있습니다. 결과적으로 React, Vue 또는 원하는 기술에 대한 상용구 코드를 생성하기 위한 버튼 클릭만으로 끝납니다.

JSFiddle을 사용하면 다른 JavaScript 도구 및 프레임 워크를 쉽게 사용자 정의하고 추가하고 사용할 수 있습니다.

JSBin Html, CSS, Javascript 및 jade, markdown 등과 같은 다양한 프리 프로세서를 위한 라이브 놀이터입니다. 사용자 인터랙션을 위한 직관적 인 사용자 인터페이스가 있는 특정 편집기 패널을 제공합니다. JSBin을 사용하여 저장소를 만들고, 공유하고, 공동 작업하고 코드를 테스트 할 수 있습니다.

JSBin은 주로 코드 공유 기능에 중점을 둡니다. 이 코드는 코드뿐 아니라 bin에있는 코드의 전체 출력 결과를 공유합니다. 실시간 공동 작업 기능을 사용하면 동료가 편집기 패널에 입력 할 때 실시간으로 변경 사항을 보고 볼 수 있습니다.

JSBin은 시작시 기본 HTML 코드로 열리지 만 많은 라이브러리가 제공됩니다. 프로젝트에 필요한 만큼의 라이브러리를 추가하여 원하는 제품을 만들 수 있습니다.

JSBin을 사용하면 생성 된 모든 저장소는 고유 한 공유 URL을 사용하여 다른 사용자가 함께 참여하여 저장소를 포크하거나 편집 할 수 있으며 원본 저장소는 그대로 유지됩니다.

Liveweave 웹 디자이너와 개발자를 위한 Html, CSS 및 JavaScript를 위한 온라인 놀이터입니다. Liveweaver는 다른 편집자와 마찬가지로 사용자가 동료와 코드를 작성, 테스트 및 공유 할 수 있는 기능을 제공합니다.

Html, CSS, JavaScript 및 출력 패널 각각에 대한 별개의 편집기 패널로 열립니다. Liveweaver의 주목할만한 기능은 단순성입니다. 초보자는 쉽게 Liveweaver를 열고 작은 응용 프로그램을 만들고 이전 문서를 읽지 않고 실행할 수 있습니다.

Moreso, Liveweaver는 Bootstrap, jQuery, Threejs 등과 같은 다양한 타사 라이브러리를 지원합니다. 이를 통해 개발자는 라이브러리 지원 문제없이보다 견고한 응용 프로그램을 작성할 수 있습니다.

Liveweave는 무료로 사용할 수 있으며 20 개 이상의 편리한 JavaScript 라이브러리가 함께 제공됩니다.