jsFiddle 사용법 – 프론트엔드 (html,css,javascript) 코딩 테스트 툴

jsfiddle

JSFiddle 은?

JSFiddle 은 프론트엔드(front-end) 기술인 HTM,CSS,JAVASCRIPT 의 코딩 결과를 즉석에서 테스트 해볼 수 있고, 다른 사람과 협업 또는 학습을 위해 코드를 공유할 수 있는 코딩 툴 입니다. 기본적으로 회원 가입 없이 사용할 수 있으며 여러 환경의 기기에서 사용 가능하기에 활용도가 높습니다. 간단한 jsFiddle 사용법을 공유해볼까 합니다.

JSFiddle 바로가기

목차
0. 인터페이스
1. 코드실행
2. 공유하기
3. 설정

0. 인터페이스

jsfiddle 사용법

누구나 당장 기본 기능을 사용할 수 있도록 직관적인 UI 를 갖고 있습니다.

큰 사각형 4곳은 각각 HTML,CSS,JAVASCRIPT 입력란과 결과를 보여주는 공간으로 구성되어 있습니다.

1. 코드 실행

HTML,CSS,JAVASCRIPT 에 코드를 작성하고 왼쪽 상단의 ‘RUN‘ 버튼을 누르면 우측 하단 박스에 결과가 출력됩니다.

2. 공유하기

JSFiddle 과 같은 코드 테스트 툴의 좋은 점은 코드와 결과를 타인과 공유할 수 있다는 것입니다. 문제 발생했을시에 다른 사람의 의견을 구하기에 편하기 때문에 코드를 배우는 초심자에게 아주 좋은 수단이 될 수 있습니다.

– url 주소를 통한 코드 공유

JSFiddle  에 코드를 작성후 상단의 Save 를 누르면 현재 URL에 코드가 저장 됩니다. 그 URL 주소로 다른 사람이 접속을 하게 되면 해당 코드와 결과를 보고 테스트 할 수 있습니다.

jsfiddle 사용법

 ex) https://jsfiddle.net/vtepw9zw/3/

페이스북이나 정보 공유 커뮤니티에서 다른 사람들의 의견을 구할때 이 방법을 통하면  편리하겠지요.

– embed (iframe) 을 이용한 공유

iframe 을 통한 공유를 할 수 있습니다. 보는 사람입장에서 편하고 깔끔하지만 HTML 코드를 사용할 수 있는 환경에서만 가능하다는 단점이 있습니다.

jsfiddle 사용법
위의 이미지의 2번 부분이 이미 iframe 이 선택 되었기 때문에 ‘Use Javascript’ 로 되어 있네요.

ex 임베드 공유

 

– 실시간 공유 (실시간 공동작업)

‘Collaborate’ 메뉴를 통해 실시간 공동 작업이 가능합니다.
Collaborate 를 선택하면 우측에 창이 뜨는데 이 창에서 제공하는 주소를 다른사람과 공유하면 그 사람과 공동작업이 가능합니다. 코드수정, 음성 대화, 채팅이 가능합니다.

jsfiddle 사용법

3. 설정

언어별 버전, 라이브러리 설정

HTML, CSS, JAVASCRIPT 의 버전과 라이브러리를 선택 가능합니다. javascript 경우는 jQuery 등 유명 라이브러리는 바로 선택해서 사용할 수 있어서 매우 간편합니다.

JAVASCRIPT 경우는 언어버전 선택 외에 라이브러리와 로드 방식 등의 설정이 추가로 있습니다.

jsfiddle 사용법
맨 아래는 뭔지 잘 모르겠네용.ㅎㅎ;
외부 리소스 사용

사이드바의 ‘External Resources‘ 에 외부 소스파일 url 을 입력하면 플러그인이나 프레임웍 등을 사용할 수 있습니다.

결론

JSFiddle 은 에디터 같이 전체 큰 프로그램을 만들 수는 없지만, 작은 코드의 테스트나 학습에 아주 효과적으로 사용 가능합니다.
공유하기를 통해 URL 이나 실시간 공유를 통해 토론하거나 질문을 하기에 적합 하므로 많이 사용하도록 합시다!! 저도 많이 써야겠네요~

JSFiddle 바로가기

자바스크립트 제대로 배우기 페이스북 그룹

의견을 남겨주세용