JSFiddle 은?
JSFiddle 은 프론트엔드(front-end) 기술인 HTM,CSS,JAVASCRIPT 의 코딩 결과를 즉석에서 테스트 해볼 수 있고, 다른 사람과 협업 또는 학습을 위해 코드를 공유할 수 있는 코딩 툴 입니다. 기본적으로 회원 가입 없이 사용할 수 있으며 여러 환경의 기기에서 사용 가능하기에 활용도가 높습니다. 간단한 jsFiddle 사용법을 공유해볼까 합니다.
목차
0. 인터페이스
1. 코드실행
2. 공유하기
3. 설정
0. 인터페이스
누구나 당장 기본 기능을 사용할 수 있도록 직관적인 UI 를 갖고 있습니다.
큰 사각형 4곳은 각각 HTML,CSS,JAVASCRIPT 입력란과 결과를 보여주는 공간으로 구성되어 있습니다.
1. 코드 실행
HTML,CSS,JAVASCRIPT 에 코드를 작성하고 왼쪽 상단의 ‘RUN‘ 버튼을 누르면 우측 하단 박스에 결과가 출력됩니다.
2. 공유하기
JSFiddle 과 같은 코드 테스트 툴의 좋은 점은 코드와 결과를 타인과 공유할 수 있다는 것입니다. 문제 발생했을시에 다른 사람의 의견을 구하기에 편하기 때문에 코드를 배우는 초심자에게 아주 좋은 수단이 될 수 있습니다.
– url 주소를 통한 코드 공유
JSFiddle 에 코드를 작성후 상단의 Save 를 누르면 현재 URL에 코드가 저장 됩니다. 그 URL 주소로 다른 사람이 접속을 하게 되면 해당 코드와 결과를 보고 테스트 할 수 있습니다.
페이스북이나 정보 공유 커뮤니티에서 다른 사람들의 의견을 구할때 이 방법을 통하면 편리하겠지요.
– embed (iframe) 을 이용한 공유
iframe 을 통한 공유를 할 수 있습니다. 보는 사람입장에서 편하고 깔끔하지만 HTML 코드를 사용할 수 있는 환경에서만 가능하다는 단점이 있습니다.
ex 임베드 공유
– 실시간 공유 (실시간 공동작업)
‘Collaborate’ 메뉴를 통해 실시간 공동 작업이 가능합니다.
Collaborate 를 선택하면 우측에 창이 뜨는데 이 창에서 제공하는 주소를 다른사람과 공유하면 그 사람과 공동작업이 가능합니다. 코드수정, 음성 대화, 채팅이 가능합니다.
3. 설정
언어별 버전, 라이브러리 설정
HTML, CSS, JAVASCRIPT 의 버전과 라이브러리를 선택 가능합니다. javascript 경우는 jQuery 등 유명 라이브러리는 바로 선택해서 사용할 수 있어서 매우 간편합니다.
JAVASCRIPT 경우는 언어버전 선택 외에 라이브러리와 로드 방식 등의 설정이 추가로 있습니다.
외부 리소스 사용
사이드바의 ‘External Resources‘ 에 외부 소스파일 url 을 입력하면 플러그인이나 프레임웍 등을 사용할 수 있습니다.
결론
JSFiddle 은 에디터 같이 전체 큰 프로그램을 만들 수는 없지만, 작은 코드의 테스트나 학습에 아주 효과적으로 사용 가능합니다.
공유하기를 통해 URL 이나 실시간 공유를 통해 토론하거나 질문을 하기에 적합 하므로 많이 사용하도록 합시다!! 저도 많이 써야겠네요~