UI 개발을 하다보면 실시간으로 확인을 한 것이 필요할때가 있고 또 소스를 일부 공유 해야할 때가 있습니다.
아직 비공개이거나 일부 내용만 공개 하고 싶을 때 사용할 수 있는 온라인에서 코드 작성할 수 있는 에디터들을 몇가지 소개를 하려고 합니다.

UI Development Online Editor(HTML/CSS/JavaScript)

CodePen

 

CodePen은 제일 인기 있는 온라인 편입기 중에 하나입니다. codepen 무료 회원가입이 가능합니다.

아래는 무료 회원 가입 방법입니다.

1. 아래 갈무리에 Sign Up을 누르면 회원가입을 할 수 있습니다.

codepen 회원가입 갈무리

2. 아래 갈무리처럼 Join CodePen Free를 누르면 됩니다.

codepen 회원가입 갈무리2

3. 그러면 아래 갈무리처럼 나오는데 가입은 양식대로 작성해주면 됩니다.

codepen 회원가입 갈무리3

JSFiddle

JSFiddle는 HTML, CSS 및 JavaScript를 위한 인기있는 온라인 편집기 중에 하나이다. CodePen이 나오기전까지는 이 편집기가 많이 사용했었습니다. JSFiddle은 텍스트 및 음성 채팅을 포함한 무료 공동 편집 기능으로 사용하기 쉬운 라이브 코드 편집기입니다.

JSFiddle은 SCSS 및 CoffeeScript도 지원합니다. JSFiddle을 사용하면 코드 데모를 공유하거나 임베드(embed)로 사용 할 수도 있습니다.

JS Bin

JS Bin은 클라우드의 협업 JavaScript 디버깅 환경입니다. SCSS, Less, CoffeeScript, Jade 등과 같은 전처리 기의 지원을 포함합니다. Chrome이나 Firefox의 콘솔처럼 작동하는 코드 디버깅 및 검사 용 콘솔이 있습니다.

JS Bin은 코딩 세션을 기록하고 일반적으로 실시간으로 여러 참가자에게 전송할 수있는 코덱 캐스팅도 지원합니다. JS Bin은 등록 된 사용자와 익명 사용자 모두에게 무료로 코덱 캐스팅을 지원합니다. 데모 URL을 / watch 대신 / watch와 공유하면됩니다.

jsdo.it

Online HTML Editor

Liveweave

Liveweave는 실시간 미리보기가 있는 또 다른 온라인 HTML5, CSS3 및 JavaScript 편집기입니다. Liveweave에는 HTML5, CSS3, JavaScript 및 jQuery에 대한 컨텍스트 인식 코드 힌트가 내장되어 있으므로 프로젝트를 매우 편리하게 압축(zip) 파일로 다운로드 할 수 있습니다.

Liveweave를 사용하면 jQuery, AndgularJS, Bootstrap 등과 같은 외부 라이브러리를 프로젝트에 쉽게 추가 할 수 있습니다. 또한 반응 형 웹 디자인을 도와주는 통치자도 제공합니다. Liveweave는 JSFiddle 공동 편집과 동일한 기능을 가진 “Team Up”기능을 제공합니다.

Orion

Plunker

Plunker는 또한 웹 개발 아이디어를 만들고, 공동 작업하고 공유하기위한 CodePen과 같은 온라인 커뮤니티입니다. 그것은 MIT 라이센스하에 완전히 오픈 소스 온라인 코드 편집기입니다. Plunker의 소스 코드는 GitHub에서 찾을 수 있습니다.

Thimble by mozilla

Thimble은 HTML,CSS, JavaScript를 배우는 동안 자신만의 웹 페이지를 작성하고 편집할 수 있습니다.

Cloud9

Top

CSS Online Editor

dabblet

Lea Verou가 개발한 대화식 CSS 편집 및 코드 공유 도구입니다.
Dabbelt은 Githube의 요지의 저장하고 CSS편집을 위한 많은 편의를 제공합니다

CSS Desk

http://www.cssportal.com/online-css-editor/

CSS Deck

CSS Deck는 다른 것들에 비해 약간 간단한 도구이며 기본 기능과는 별도로 주석 기능을 제공합니다. CSS 데크에서도 데모를 공유하고 삽입 할 수 있습니다.

JSON Online Editor

JSON Edior Online

JSON Editor Online은 JSON을 보고 편집하고 서식을 지정하기위한 웹 기반 도구입니다. 명확하고 편집 가능한 트리뷰 및 코드 편집기에 데이터를 나란히 표시해줍니다.

JSON formatter

온라인 JSON Formatter 및 JSON Validator는 json 데이터를 형식화하고 JSON을 XML로 변환, JSON을 CSV로 변환, 유효성을 검사하는 데 도움을줍니다. JSON 저장 및 공유가 가능합니다.

정규 표현식 Online Editor

Online regex tester and debugger

온라인 정규표현식 테스트, PHP, PCRE, Python, Golang 및 JavaScript에 대한 디버깅이 가능합니다.

RegExr

Refiddle

refiddle.com refiddle.com

Regex Pal

Back-End Edior(PHP/Pytho)

Php Fiddle

PHP Sandbox

Angular

Angular-ml7gpe

vscode 기반으로 만들어졌으며 간단한 확인용, 테스트용으로 사용할 수 있습니다.

Top

Other

Coding Ground

프론트 엔드와 백엔드 엔드 개발에 필요한 다양한 온라인 에디터가 있습니다.

2017.11.20 추가

Markdown Editor

dillinger

StackEdit

각종 블로그에 바로 공유가 가능하다.

stackedit 사이트 갈무리

Top