Online Front-end prototype code edit sites (간단한 HTML, CSS, Javascript 온라인 코드 편집 사이트)

소개

웹 Front-end 작업을 하다보면 웹페이지에 대해 간단히 테스트를 해보고 싶거나 프로토타입을 만들고 싶을 때가 종종 있습니다.

이럴 경우 로컬에 환경 세팅을 하는 것은 번거롭기에, 그때마다 사용할 수 있는 온라인 front-end 코드 편집 사이트 몇개를 소개해보고자 합니다.

• jsbin
• jsfiddle
• codepen
• codesandbox

이 중에는 심플하게 HTML, CSS, Javascript 에디터와 함께 실시간 보기를 지원합니다. 더불어 codesandbox 같은 경우 추가 적인 다양한 기능들도 포함하는 사이트도 있으니 시간날때 한번씩 둘어보시는 것도 좋을 듯합니다.

대부분 typescript 를 지원하며, 다양한 라이브러리 지원도 약간이 차이가 있으니, 테스트하고자 할때 필요한 요구사항에 맞게 사이트를 선택하면 되지 않을까 합니다.

jsbin

JS Bin

Sample of the bin:

심플하게 HTML, CSS, Javascript, Console, 실시간 Output 을 나누어진 패널에서 한번에 확인가능하도록 구성되어있습니다.

간단하게 테스트하고 결과를 확인하고 싶을 경우 유용합니다.

jsfiddle

jsbin 과 비슷합니다. color palettle generator가 css 작성 패털에서 바로 확인가능하여 편리한듯하고, js 라이브러리도 훨씬 많이 지원하고 있습니다.

codepen

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen 역시 심플합니다. 다만 좀더 디자인 중심의 코드에 더 적합하다고 합니다.

codesandbox

codesandbox.io

New

온라인 코드 에디터로서 다양한 기능을 포함하고 있습니다. git 통합도 가능합니다.