[소개] CodePen.io

■ [소개] CodePen

---

이번 포스팅에서는 유용한 사이트를 하나 소개하고자 합니다.

CodePen이라는 사이트 인데요. 온라인에서 바로 간단한 프론트엔드 코딩이 가능합니다.

주소는 codepen.io 입니다.

전체 Titel은 꽤 기네요. 그렇지만 사이트에 대한 소개가 한줄로 요약된 것 같습니다.

CodePen - Front End Developer Playground & Code Editor in the Browser

그럼 전체적인 사이트의 모습을 보겠습니다.

회원가입 후 사용하면 더욱 많은 기능을 사용할 수 있습니다. (프로젝트, 포스트 등)

하지만 로그인 하지 않아도 간단한 코딩 테스트는 가능합니다.

우측 상단의 'Create' 를 클릭하시고 'New Pen' 을 클릭합니다.

그럼 아래와 같이 아주 직관적인 레이아웃을 확인할 수 있습니다.

간단히 HTML에 입력해보면 바로바로 반영이 됩니다. 

매우 간단합니다. 마찬가지로 CSS, JS 또한 쉬운 방법으로 테스트가 가능합니다.

진짜 CodePen의 장점은 여기가 끝이 아닙니다. 

쉽고 빠르게 다양한 Preprocessor 지원, 다양한 외부 리소스 추가 등이 가능합니다.

예를 들어, 까다로운 세팅 없이 React, Angular, Backbone, BootStrap 등의 기술을

사용할 수 있습니다. 설정 방법은 매우 간단합니다.

JavaScript 설정을 예로들어 볼까요. 우측 상단에 Pen Settings을 클릭합니다.

JavaScript Preprocessor에는 CoffeeScript, LiveScript, Babel등이 있습니다.

그래고 아래 외부 리소스를 추가할 수 있는데요. 

맨 아래 보이시는 Quick-add를 클릭하시면 주요 리소스들을 바로 선택가능합니다.

여기에 React, jQuery, BootStrap, Angular 등등이 있습니다.

이렇게 설정하면 설정이 그냥 끝납니다.

이후 HTML, JS 코딩을 하면 테스트가 바로 가능합니다. 

---

개인적인 생각으로는 비슷한 여러 사이트 중에 CodePen이 제일 괜찮은 것 같습니다.

실제 프로젝트 적용전에 해당 기능을 한번 테스트하기에 좋은 것 같아요.

이러한 종류의 프론트엔드 테스트 사이트 찾으시는 분들은 한 번 써보시길 추천합니다.

그럼 포스팅을 마치겠습니다. 감사합니다.