brunch

You can make anything
by writing

C.S.Lewis

by 최승필 Jun 13. 2017

웹개발자를 위한 HTML/CSS/JS 온라인 코드에디터

별도의 서버 없이 온라인에서 HTML/CSS 코드를 테스트해보자

- 앞으로 기술 용어나 설명이 필요한 용어들에 대해선 주석으로 따로 설명을 적도록 하겠습니다. 제 브런치는 개인 기록용의 성격이 강하다 보니 생각 없이 용어들을 사용하곤 했는데 생각보다 다양한 곳에 공유가 되고 있더라고요. 그래서 비전공자 분들도 쉽게 접근하실 수 있도록 최대한 풀어서 작성하는 방향으로 진행할까 합니다. 물론 제가 적은 내용들이 백프로 확실하지 않을 수 있습니다. 잘못된 부분이 있다면 바로 알려주시길 바랍니다. 우리 모두의 지식을 위해! 피스!

프론트(Front-end) 작업을 하다 보면 결과물을 바로바로 확인을 하고 싶거나 작업한 내용을 구분해서 관리하고 싶을 때가 있습니다. 가령 탬플릿을 만들었는데 바로 사용을 하지 않고 만들어 놨다가 필요할 때 적용하고 싶은데 이 때 파일을 일일이 다 저장해서 관리하기가 많이 번거롭습니다.

이럴때 온라인 에디터를 이용해 실시간으로 코드를 작성하고 저장했다 나중에 필요할 때 불러와서 사용하면 어떨까요?

#프론트엔드(Front-end) - 흔히 프론트엔드(Front-end), 백엔드(Back-end)라는 표현을 많이 씁니다. 여기서 프론트엔드는 사용자에게 드러나는 외부적인(클라이언트) 부분을 담당하고, 백엔드는 사용자에게 드러나지 않는 내부적인(서버) 것들을 수행하는 부분을 담당한다고 보시면 됩니다.

유저-프론트엔드-백엔드의 관계를 함축적으로설명해 줍니다

말 그대로 HTML/CSS/JS 등 클라이언트단에서 실행되는 부분을 전통적인 프론트엔드 개발 영역이라고 보시면 되고, PHP/ASP/JSP/DB 등과 같이 서버에서 처리하는 부분을 백엔드 개발 영역이라고 생각하시면 됩니다.

더 쉽게 설명하자면.. 다음 이미지를 참고해서 보시면 편하실 거 같습니다.

백엔드는 티나지 않아요..그래서 서글퍼요..

여기 온라인으로 HTML/CSS/JS를 서버 없이 작성, 관리가 가능한 툴들이 있습니다. 그래서 제가 좀 정리를 해봤습니다. 확인해 보시죠.

Front-End (HTML/CSS/JS)

1. https://jsfiddle.net

Create a new fiddle - JSFiddle

jsfiddle.net

가장 잘 되어있습니다. 무료로 사용이 가능하고요. 제가 쓰고 있습니다. 임베디드 기능이 포함되어있습니다.

요렇게 외부에 코드를 공유할 수 있기도 합니다. 다른 이들과 협업 할수 있는 기능도 제공해 줍니다. .

https://jsfiddle.net/pilsogood/9r8btc3p/

2. https://codepen.io

CodePen

A front end web development playground.

codepen.io

jsfiddle 처럼 잘 되어있지만 회원가입은 유료입니다. 물론 임베디드 기능이 포함되어있습니다.

3. http://jsbin.com

JS Bin

Sample of the bin:

jsbin.com

4. http://jsdo.it

jsdo.it - Share JavaScript, HTML5 and CSS

jsdo.it - share JavaScript, HTML5 and CSS - jsdo.it is a service to write JavaScript, HTML5, CSS in your browser and share it. You can copy and modify others' code. And also Ask questions about JavaScript, HTML5, CSS

jsdo.it