프론트 엔드 개발자를 위한 온라인 코드 에디터 소개

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

UI Development Online Editor(HTML/CSS/JavaScript)

CodePen

[contentcards url=”https://codepen.io” target=”_blank”]

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

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

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

codepen 회원가입 갈무리

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

codepen 회원가입 갈무리2

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

codepen 회원가입 갈무리3

JSFiddle

[contentcards url=”https://jsfiddle.net” target=”_blank”]

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

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

JS Bin

[contentcards url=”http://jsbin.com” target=”_blank”]

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

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

jsdo.it

[contentcards url=”http://jsdo.it/” target=”_blank”]

Online HTML Editor

[contentcards url=”https://html-online.com/” target=”_blank”]

Liveweave

[contentcards url=”http://liveweave.com/” target=”_blank”]

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

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