JSFiddle는 웹 상에서 자바스크립트, HTML, CSS 코드를 입력하고 그 결과를 확인해볼 수 있는 도구입니다. 클라우드 IDE라고 부르기도 하는군요.
개인적으로 쓰기에는 4분면 공간이 부족하지 않은데 스터디나 강의 등에서 누군가에게 보여줄 경우에는 공간이 모호할 수 있습니다. 이럴 경우에는 Embed 기능을 활용할 수 있습니다.
예를 들어 2차 SVG 시간에 샘플로 보여준 데모를 보죠 (s65라는 스터디입니다. 이 글을 스터디 복습용으로 작성한 것이라 스터디 예제를 사용했습니다. 나중에 아래 링크는 연결이 안될 수도 있습니다).
https://jsfiddle.net/oveRock/wqocobq0/
그냥 이 주소로 들어가면 아래와 같이 보이죠. 아래 같은 경우에는 코드가 많지 않으니깐 크게 불편함은 없습니다. 하지만 자바스크립트 코드가 많아져서 확인할 코드가 많아지면 불편해지는거죠.
하지만 Embed 기능을 사용하면 아래와 같이 넓은 화면에서 코드를 볼 수 있습니다. 사실 4분면 공간을 탭으로 나누고 약간의 스타일만 더해준겁니다. 기존 주소에 embedded/js,html,result/dark/ 이렇게 추가만 해주면 됩니다. 원하는 코드만 보일 수 있으니 화면 확대를 해도 불편하지 않습니다.
https://jsfiddle.net/oveRock/wqocobq0/embedded/js,html,result/dark/
물론 원래 기능은 특정 페이지 내에 코드를 삽입하는 기능입니다만... 이렇게 데모로 사용할 경우에 유용하게 쓸 수 있습니다. 기타 옵션은 아래 링크를 참고하세요. 아~ 실제 기능은 업데이트되었는데 문서는 아직 이전 상태네요. ㅠㅠ
http://doc.jsfiddle.net/use/embedding.html?highlight=embed
* JSFiddle은 로그인 없이도 사용할 수 있습니다. 로그인하면 작성한 코드를 저장할 수 있는 기능을 제공합니다. 필요에 따라 선택적으로 사용하시면 될 듯.
* ES6 코드를 테스트할 때는 http://www.es6fiddle.net/ 이라는 사이트를 사용할 수 있습니다. 여기에서는 스크립트와 콘솔 출력만 테스트해볼 수 있지만 환경이 갖추어지지 않은 곳에서 급하게 테스트할 때는 어느 정도 유용합니다.
