[jsFiddle] Online 웹개발 및 공유 서비스

온라인상에서 웹개발 및 테스트, 공유가 가능한 서비스가 있다.

바로 jsFiddle 이다.

• jsFiddle: http://jsfiddle.net/
• jsFieele Document: http://doc.jsfiddle.net/

단순한 회원가입 과정을 거치면 다음과 같은 화면이 나온다.

Create a new Fiddle 버튼을 누르면 자기만의 프로젝트를 하나 만들 수 있다.

• 4개로 나뉜 에디터가 나타나고 각각 HTML, CSS, Javascript 를 입력 할 수 있고, Result 창에서는 결과를 볼 수 있다.
• HTML 을 입력할때에는 HTML 태그를 비롯하여 META 태그, HEAD 태그, BODY 태그는 없어도 된다.
• 창에 보이는 CSS, Javascript 에디터의 소스는 기본적으로 HTML 소스에 반영이 된다.
• 외부 Javascript, CSS 소스는 좌측에 External Resources 버튼을 클릭하여 링크를 걸어줄 수 있다.

상단메뉴

• Run
• 현재 프로젝트를 실행하는 버튼으로 우측하단에 Result 화면에서 확인 할 수 있다.
• Debug on Mobile
• Remote resources 를 Debugging 하는 버튼으로 weinre 을 통해 가능하다고 한다.
• http://doc.jsfiddle.net/use/remote_debugging.html
• Save
• 현재 프로젝트를 저장하여 다른사람과 공유 가능하다.
• Save 를 하면  Update, Fork, Share 메뉴가 더 생긴다.
• 
• Update
  
• 현재 프로젝트를 Update
• Fork
• 현재 프로젝트를 Fork
• Base
• Base 프로젝트로 이동
• Share
• 다른사람에게 현재 프로젝트를 공유가능
• 

• TidyUp
• Editor 의 Indentation 을 정렬해주는 버튼
• JSHint
• Javascript Validation

좌측 네비게이션

• jsFiddle Settings Sidebar Document
• Frameworks & Extensions
• jQuery, jQuery Mobile, YUI 등 다양한 외부 라이브러리를 적용한 프로젝트를 구성 할 수 있다.
• 
• onLoad, onDomready 등의 함수를 overloading 가능하다.
• Fiddle Options
• Title, Description
• jsFiddle 에서 보여지는 Tilte bar, Description 을 수정 할 수 있다.
• Normalized CSS
• 기본 CSS 인 normalized.css 적용여부
• Body Tag
• body 에 class 등을 적용하는 등의 customizing 가능
• DTD
• HTML5, XHTML, HTML4 등의 DTD 설정
• Freamwork <script> attribute
• 
• External Resources
• 외부 Resources 의 URI 를 포함 할 수 있다.
• 
• Languages
• 다음과 같이 다양한 웹언어지원
• HTML, CSS, SCSS, JavaScript, Coffeescript, JavaScript 1.7
• 
• Ajax Requests
• Ajax 를 통한 json 등의 시뮬레이션이 가능한 기능으로 보인다.
• 
• Example
• 다양한 자바스크립트 라이브러리 예제를 제공한다.
•