웹 소스 코드 공유 및 테스트 방법

소스코드,코드사이트,프로그래밍,언어,코드펜,w3schools,html,css,javascript,웹,프론트,백엔드

웹 프로그래밍 코드 테스트 및 공유하는 방법

웹 개발을 하면서 다른 사람들과 소스 코드를 공유할 때 어떤 식으로 공유를 하시나요? 보통 복사 - 붙여 넣기로 바로 공유하는 경우도 있지만 쉽고 조금 더 알아볼 수 있도록 공유할 수 있는 방법에 대해서 알아보도록 하겠습니다. 더욱 많은 사이트가 있지만 제가 사용해봤던 것 중 일부를 소개해드리니 보시고 여러분이 편하게 사용할 수 있는 사이트를 이용하시면 됩니다.

목차

CodePen [#]

ⓒ CodePen

코드펜의 경우 제가 가장 많이 사용하고 있는 사이트 중 하나입니다. 웹 개발할 때 쉽고 간편하게 수정하고 테스트할 수 있어 그 자리에서 확인을 할 수 있다는 것과 다른 사람들에게 바로 공유도 할 수 있다는 것이 가장 큰 장점인 것 같습니다.

왼쪽 메뉴 중 StartCoding을 누르게 되면 바로 소스코드를 테스트하고 입력할 수 있는 페이지로 이동합니다.

HTML/CSS/JS 영역으로 각각 나눠져 있고 아래 부분은 결과(테스트)를 바로 볼 수 있도록 만들어져 있습니다. 그리고 각각 HTML/CSS/JS의 톱니바퀴 모양을 누르면 일부 설정이 가능합니다.

 

회원 기능이 따로 있고 저장이나 공유도 따로 지원을 하고 있습니다.

W3Schools [#]

ⓒ W3Schools

W3Schools의 경우 웹 교육 자료들도 꽤 많이 있어 처음 배우는 사람들은 한번 이상 접속을 해서 문서를 읽어봤으리라 생각합니다. 해당 사이트의 경우 당연하게 테스트를 바로 진행할 수 있는 곳이 따로 만들어져 있습니다.

홈페이지에 접속을 하게 되면 제일 먼저 보이는 것은 HTML이 보입니다. 화면에서 오른쪽에 HTML Example 밑에 보면 Try it Yourself를 누르게 되면 HTML 관련하여 테스트할 수 있습니다. 메인 화면에서 스크롤하여 내리게 되면 HTML, CSS, JavaScript, Python, SQL 등을 테스트할 수 있습니다. 다만 아쉽게도 코드펜과 다르게 HTML/CSS/JS 등을 한 번에 테스트는 할 수 없습니다.

왼쪽 부분에 소스코드를 입력할 수 있는 부분과 오른쪽 해당 코드를 실행한 모습을 바로 볼 수 있도록 되어있습니다.

 

해당 사이트의 경우 간단한 테스트에 적합한 것 같습니다. 또한 HTML/JS/CSS/SQL 등 다양한 언어에 대한 기본적인 문서가 제공이 되기 때문에 처음 배우는 사람들에게는 매우 도움이 될 것으로 보입니다.

마무리

웹 프로그래밍을 할 때 조금 더 쉽고 간편하게 할 수 있는 사이트 두 가지를 알아보았습니다. 해당 사이트 외 더욱 많은 사이트가 있지만 제가 사용했던 것 중 위 두가지 사이트가 제일 괜찮은 것 같아 공유합니다. 혹시나 궁금한 점이나 추가했으면 좋겠는 사이트가 있으면 댓글로 남겨주시면 확인 후 추가하도록 하겠습니다.