개발도구

JSFIDDLE

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

댓글

댓글 본문
  1. 지구촌
    녹화된 장면이 똑똑히 보이지 않네요.
  2. 빨강머리앤
    감사합니다....
  3. 영상은 잘 봤는데 사이트 들어 가보니 완전 바뀌었더군요 ㅠㅠ
  4. 정원
    최근에 사이바에 있는 일부 기능의 위치가
    각 영역의 환경 아이콘(HTML, CSS, JAVASCRIPT 타이틀 오른쪽 버튼)으로 바뀐 것 같습니다.

    좋은 강의 감사드립니다. 많은 도움이 될 것 같아요.
  5. KinB
    먼저 답글 남기고, 공부 들어갑니다. 감사합니다!
  6. 김민지
    고맙습니다 .
    편리하네요.
  7. 유종수
    이런 훌령한 것들이 있었다니 감동입니다. 이클립스에서 하려고 했는데..... 이걸로 할랍니다.^^
  8. Jenny
    IE에서 실행하셨나요?
    버전 타는것 같던데.. 크롬이나 최신 IE에서 실행해보세요^^
    대화보기
    • 왕초보
      안녕하세요.
      문의 드립니다.
      jsfiddle.net 실행시키면 화면이 나누어지지않구 빈화면만 나오는데요
      뭐가 잘못된것인지요?
    • Azrael
      모바일 디버거 아주 유용해보이네요 ..
      이기종간에 다양한 브라우져에 적용된 결과를 확인하기 좋을것 같습니다.

      jsfiddle.3 - 모바일 리모트디버깅 1
      https://www.youtube.com......Jw8

      jsfiddle.3 - 모바일 리모트디버깅 2
      https://www.youtube.com......qk0
    • egoing
      현재 잘 지원되지 않는 것 같아서 동영상을 제거했습니다.
      http://opentutorials.org/cours...
      대신 위의 수업을 통해서 리모트 디버깅을 하는 법을 알 수 있습니다.
      알려주셔서 고맙습니다.
      대화보기
      • Yonggi Lee
        이 부분 모바일 리모트디버깅2에서 영상이 잘린 것 같아요~
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기