JSFIDDLE이란?
웹의 프론트엔드 기술인 HTML, CSS, JavaScript를 웹에서 작성해서 바로 테스트 해볼 수 있고, 그 소스를 저장 공유할 수 있는 서비스이다.
URL : http://jsfiddle.net/
기본 사용법
1. http://jsfiddle.net/에 접속한다.
2. HTML, CSS, JavaScript 코드를 입력할 수 있는 화면이 보인다. Result는 입력된 결과가 출력되는 화면이다. 예제를 준비했다. 아래 URL로 접근해보자. http://jsfiddle.net/egoing/RDXDL/
3. 코드를 입력한다. HTML 입력 화면에는 <body> 태그 하위의 컨텐츠를 입력한다. jsfiddler이 <body> 태그를 만들어주기 때문이다. 마찬가지로 JavaScript, CSS도 시작 태그 없이 바로 코드를 입력하면 된다. jsfiddler이 이것들을 조합해서 하나의 결과물로 만들어주기 때문이다.
4. RUN 버튼을 누르면 입력된 코드가 조합된 결과가 Result 창에 출력된다.
5. SAVE 버튼을 누르면 입력한 코드가 저장되고, 이 코드로 접근할 수 있는 URL로 이동한다. 이 URL을 통해서 코드를 공개할 수 있다. 저장되면 SAVE 버튼이 UPDATE 버튼으로 변경된다. UPDATE 버튼은 저장할 때마다 하나의 버전이 생성되는데, 업데이트 할 때 마다 변경되는 URL로 각각의 버전에 접근할 수 있다.
FORK 버튼은 현재의 코드를 그대로 복제하는 기능이다. 버전관리 시스템으로 치면 Branch에 해당한다.
TidyUp 버튼은 소스코드의 가독성을 높여주는 기능이다.
JSLint 버튼은 JSLint를 이용해서 자바스크립트의 유효성을 검사하는 기능이다.
Share 버튼을 이용해서 소스코드를 공유할 수 있다. 이 중에 embed를 이용하면 아래와 같이 소스코드를 웹페이지 안에 삽입할 수도 있다.
사이드바
Choose Framework는 유명한 자바스크립트 라이브러리들을 손쉽게 로드할 수 있도록 도와준다. Normalize CSS는 브라우저 간에 엘리먼트들의 기본 모양새를 다르게 표시하는 것을 같은 모양으로 통일 시키는 CSS를 기본적으로 로드시키는 옵션이다.
Panel은 코드 입력창들에서 사용할 언어를 지정할 수 있다. 예를들어 CSS를 SASS로 변경하면 SASS 문법의 코드를 자동으로 CSS로 변경해준다.
Add Resources는 외부 리소스를 로드 할 수 있는 방법이다. 로드되는 리소스의 종류에 따라서 적당한 태그를 생성해서 Result 결과에 조합해준다.
Info는 이 코드의 제목과 설명을 입력하는 화면이다.
Testing Ajax Requests는 Ajax 통신을 하는 로직을 데모하기 위해서 서버로 전송한 데이터와 똑같은 데이터를 리턴해주는 기능이다. 자세한 내용은 메뉴얼을 참고한다. http://doc.jsfiddle.net/use/echo.html
