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”기능을 제공합니다.
Orion
[contentcards url=”https://orionhub.org/” target=”_blank”]Plunker
Plunker는 또한 웹 개발 아이디어를 만들고, 공동 작업하고 공유하기위한 CodePen과 같은 온라인 커뮤니티입니다. 그것은 MIT 라이센스하에 완전히 오픈 소스 온라인 코드 편집기입니다. Plunker의 소스 코드는 GitHub에서 찾을 수 있습니다.
[contentcards url=”http://plnkr.co/” target=”_blank”]Thimble by mozilla
Thimble은 HTML,CSS, JavaScript를 배우는 동안 자신만의 웹 페이지를 작성하고 편집할 수 있습니다.
[contentcards url=”https://thimble.mozilla.org/ko/” target=”_blank”]Cloud9
[contentcards url=”https://c9.io/” target=”_blank”]CSS Online Editor
dabblet
[contentcards url=”http://dabblet.com/” target=”_blank”]Lea Verou가 개발한 대화식 CSS 편집 및 코드 공유 도구입니다.
Dabbelt은 Githube의 요지의 저장하고 CSS편집을 위한 많은 편의를 제공합니다
CSS Desk
[contentcards url=”http://www.cssdesk.com/” target=”_blank”]http://www.cssportal.com/online-css-editor/
[contentcards url=”http://www.cssportal.com/online-css-editor/” target=”_blank”]CSS Deck
[contentcards url=”http://cssdeck.com/” target=”_blank”]CSS Deck는 다른 것들에 비해 약간 간단한 도구이며 기본 기능과는 별도로 주석 기능을 제공합니다. CSS 데크에서도 데모를 공유하고 삽입 할 수 있습니다.
JSON Online Editor
JSON Edior Online
[contentcards url=”http://jsoneditoronline.org/” target=”_blank”]JSON Editor Online은 JSON을 보고 편집하고 서식을 지정하기위한 웹 기반 도구입니다. 명확하고 편집 가능한 트리뷰 및 코드 편집기에 데이터를 나란히 표시해줍니다.
JSON formatter
[contentcards url=”https://jsonformatter.org/” target=”_blank”]온라인 JSON Formatter 및 JSON Validator는 json 데이터를 형식화하고 JSON을 XML로 변환, JSON을 CSV로 변환, 유효성을 검사하는 데 도움을줍니다. JSON 저장 및 공유가 가능합니다.
정규 표현식 Online Editor
[contentcards url=”https://regex101.com/” target=”_blank”]Online regex tester and debugger
온라인 정규표현식 테스트, PHP, PCRE, Python, Golang 및 JavaScript에 대한 디버깅이 가능합니다.
RegExr
[contentcards url=”https://regex101.com/” target=”_blank”]Refiddle
[contentcards url=”http://refiddle.com/” target=”_blank”]Regex Pal
[contentcards url=”https://www.regexpal.com/” target=”_blank”]Back-End Edior(PHP/Pytho)
Php Fiddle
[contentcards url=”http://phpfiddle.org/” target=”_blank”]PHP Sandbox
[contentcards url=”http://sandbox.onlinephpfunctions.com/” target=”_blank”]Angular
Angular-ml7gpe
[contentcards url=”https://stackblitz.com/edit/angular-ml7gpe” target=”_blank”]vscode 기반으로 만들어졌으며 간단한 확인용, 테스트용으로 사용할 수 있습니다.
[contentcards url=”https://www.tutorialspoint.com/online_angularjs_editor.php” target=”_blank”]Other
Coding Ground
[contentcards url=”https://www.tutorialspoint.com/codingground.htm” target=”_blank”]프론트 엔드와 백엔드 엔드 개발에 필요한 다양한 온라인 에디터가 있습니다.
2017.11.20 추가
Markdown Editor
dillinger
[contentcards url=”https://dillinger.io/” target=”_blank”]StackEdit
[contentcards url=”https://stackedit.io/” target=”_blank”]각종 블로그에 바로 공유가 가능하다.
stackedit 사이트 갈무리
답글 남기기