CodeSandbox An online React editor

2017.4.13 - ✏️Ives van Hoorne

CodeSandbox - An online React editor 🏖

일주일 전에 이미, BasbUrrsma와 나는 react 기반의 프로젝트 공유에 중점을 둔 온라인 코드 편집기인 CodeSandbox를 출시했다. 반응은 기대 이상이었다. 이미 1500개 이상의 샌드박스(프로젝트)가 생성되었고, 280명 이상의 사용자가 github를 통해 로그인했다.

CodeSandbox의 아이디어는 내가 St.Ives를 여행할 때 시작되었다. 당시 나는, catawiki를 react로 변환하는 작업을 하고있었다. 내가 여행을 갔을 때, 다른 개발자로부터 react에 대해 많은 질문을 받았지만, 우리가 가지고 있는 라이브러리에 접근이 가능한 편집기에 접근하지 않고서는 내가 그들에게 대답할 어떠한 방법이 없었다.

What is CodeSandbox

간단하게 말하면, 코드샌드박스는 온라인 코드 편집기이다. 그것은 transpling과 번들링 및 의존성 관리와 같은 기능들을 자동화하여, 한 번의 클릭으로 새 프로젝트를 쉽게 만들 수 있다. 프로젝트를 만든 후에는 단지 url을 공유하는 것만으로도 다른 사람들에게 프로젝트를 보여줄 수 있다. CodeSandbox는 사용자가 입력하는 코드의 결과를 나타내는 실시간 미리보기 기능이 제공된다. 편집기는 모든 javascript 프로젝트에서 동작하지만, cra 템플릿으로 프로젝트를 다운로드하는 기능과 같은 일부 react의 관련 기능이 있다.

Features

우리는 지난 4개월 동안 CodeSandbox를 연구해왔고, 그래서 하고싶은 이야기들이 많다. CodeSandbox의 가장 큰 기능을 소개한다.

npm 의존성

많은 번거로움 없이 별도의 환경에서 라이브러리를 시도해볼 수 있어야 하기 때문에 이것은 정말 중요하다. 특정한 의존성 조합에 대해 즉시 의존성 빌드를 작성하여 우리는 npm 의존성을 지원한다. WebpackBin 또한 같은 작업을 수행하고 있으며, 현재 Christian Alfoni와 함께 모두가 사용할 수 있는 서비스를 빌드하기 위해 만들고 있다. 그것은 또한 css와 javascript 파일들과 같은 추가적인 resource들을 설치하는 것이 가능하다.

Downloading

CodeSandbox에서 프로젝트를 꺼내려면 헤더의 Download 버튼을 클릭하여 쉽게 사용할 수 있다. create-react-app 템플릿이 포함된 zip 파일이 제공되며, package.json 및 index.htm이 생성된다.

Sharing

CodeSandbox는 Sharing를 중심으로 구축되었고 처음부터 이 기능이 가장 중요한 우선순위였다. 편집기 모드와 전체 화면으로 프로젝트의 공유가 가능하다. 일반적으로 프로젝트 작업 시, 편집기 view에서 작업하지만, 그 프로젝트의 전체 화면 버전을 공유할 수 있다. 전체 화면 버전은 편집기와 미리보기만 있는 CodeSandbox의 작은 버전이다. 헤더의 공유 옵션을 통해 표시할 파일 및 view를 지정할 수 있다.

Prettier, prettier-eslint, ESLint and Tern support

이러한 개발자 도구(특히 Prettier)가 빠르게 작업하기 위한 요구 사항을 발견했다. 환경 설정에서 이 모든 것들을 활성화 또는 비활성화 하는 것이 가능하다. 다른 프로젝트의 코드를 쉽게 읽는 것이 가능하고, 프로젝트 간의 같은 스타일을 유지하기 때문에 저장시 확인하는 것이 기본적으로 활성화 되어있다. ESLint는 airbnb 설정을 따른다.

The Rodamap

지금 가지고 있는 것은 초기 계획을 세울 때 필요한 기초이다. 다른 사람의 작업을 포크하는 것이 불가능 하다는 생각으로 CodeSandbox를 만들었다. 우리는 매우 강력한 react 기능인, 재사용 가능성을 활용하려고 한다.

Publish sandbox as library

프로젝트를 다른 사람들이 그들의 프로젝트에서 재사용할 수 있는 라이브러리로 쉽게 바꿀 수 있어야 한다. 사람들을 가두어 넣는 것을 절대 원하지 않으므로, CodeSandbox에서 생성한 라이브러리들이 local에서 또한 설치되어야 한다. 그것을 이미 실제로 지원하고 있지만, 공유하기 쉽도록 커뮤니티 기능을 지원하기 전에 숨기기로 결정했다.

Versioning

라이브러리는 버전 관리를 의미하므로, 버전을 커밋할 수 있어야 하고, 라이브러리를 손상시키지 않고도 라이브러리를 추가로 구축할 수 있어야 한다. fork에 의한 branch를 분기할 수 있다. 여전히 github로 import/export를 시작하는 방법에 대한 옵션을 찾고 있다.

Better user support

헤더의 메뉴를 통해 로그인하여 프로젝트를 볼 수 있지만, 현재로서는 매우 제한적이다. 사람들이 그들의 프로젝트를 보여줄 수있는 profile view를 만들고 있으며, 다른 사람들이 해당 프로젝트에 댓글을 달거나 즐겨찾기를 할 수 있다. 프로젝트는 조회수/즐겨 찾기 수와 같은 추가 정보를 얻습니다.

Popular sandboxes

인상적인 작품은 눈에 띄어야하므로, 홈페이지의 즐겨찾기 또는 조회수 기능을 통해 그것이 가능하게 된다.

Searching for sandboxes

이 기능으로 라이브러리 지원이 가능해진다. 샌드 박스를 만들 때 쉽게 검색 할 수 있어야합니다. button 또는 Interactive Piano, 그리고 다른 import할 다른 프로젝트의 시각적 목록을 참고하는 등, 프로젝트를 만들 때, 사용자는 쉽게 검색을 할 수 있어야 한다. import한 프로젝트의 생성자는 최종 프로젝트에서 자동으로 contributor로 인정된다.