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 기반으로 만들어졌으며 간단한 확인용, 테스트용으로 사용할 수 있습니다.

www.tutorialspoint.com www.tutorialspoint.com

Top

Other

Coding Ground

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

2017.11.20 추가

Markdown Editor

dillinger

StackEdit

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

stackedit 사이트 갈무리

Top