온라인 코딩 Web IDE 3가지 – 자바스크립트 연습하기

처음 자바스크립트 연습이 필요하다면, 온라인 코딩 툴을 사용하여 적응하는 것이 좋을 수 있습니다.

처음 프로그래밍을 관심을 갖고 사람들이 많이 쓴다고 하는 자바스크립트 연습 부터 하려고 마음을 먹었지만, 우선 개발 환경을 셋팅하는 것부터 많은 부담이 될 때가 있습니다.

용어나 개념도 익숙치 않은데, 환경 셋팅부터 막힙니다. 크롬브라우저를 설치해야하고 , Visual Studio Code를 설치하고, 각종 컴파일러를 설치하고, 각종 개발 관련 익스텐션 등도 설치를 해야합니다.

그러면 부담감에 학습에 대한 동기부여가 줄게 되어 시작이 쉽지 않습니다.

요즘에는 이러한 개발 환경을 온라인 클라우드 환경에서 아무런 설치없이 동작하도록 제공하는 사이트가 많습니다. 특히 자바스크립트는 인기가 많은 언어이기 때문에 100% 모든 코딩 연습 사이트에서 지원을 해주고 있습니다.

이러한 클라우드 환경의 온라인 코딩 사이트가 좋은 점은, 바로 소스 공유가 쉽다는 점입니다. 배우는 단계에서는 주변 잘하는 사람에게 물어봐야 할 상황도 많고, 또 누군가를 가르치거나 도와주는 역할에서는 간단히 공유받은 소스를 돌려보고 문제의 원인을 찾아주면 되는 것이기 때문입니다.

자바스크립트 연습 할 수 있는, 대표적으로 유용한 온라인 클라우드 코딩 사이트 3가지를 소개하도록 하겠습니다.

리플잇(repl.it)에서 온라인 코딩 하기

리플잇은 HTML, JavaScript, Python, node.js 등 50여가지의 프로그래밍 랭귀지를 지원합니다. github 연동도 가능할 뿐만 아니라 Private 하게 생성이 가능하여 나만의 공간을 만들 수도 있습니다.

특이하게도 오픈소스로써 MIT 라이센스를 따릅니다.

공식 홈페이지 : https://replit.com/

온라인 코딩 replit 에서 작업 공간 생성

github 로부터 import가 가능하고 Private으로 나만의 공간을 생성할 수 있습니다.

온라인 코딩 replit 에서 github import private 생성

html 파일과 자바스크립트 파일을 구성하고 실행하면 바로 결과를 볼 수 있습니다.

replit 에서 자바스크립트 연습

브라우저 결과 뿐만 아니라 console 도 지원을 합니다.

replit console로 결과 확인 가능

아래의 화면은 repl.it에서 SAPUI5 Quick Start를 실행해본 결과입니다.

온라인 코딩 replit console에서 SAPUI5 Quick start를 실행

 

코드 샌드박스(Code Sandbox) 온라인 자바스크립트 개발

공식홈페이지 : https://codesandbox.io/

대표적인 온라인자바스크립트 에디터 서비스 를 제공하는 코드 샌드박스는 다양한 자바스크립트 라이브러리를 지원합니다. 즉, 자바스크립트 뿐만 아니라 리엑트, 뷰, 앵글러 등 다양한 라이브러리를 지원합니다.

온라인 코딩 코드샌드박스는 다양한 자바스크립트 라이브러리 제공

프로젝트 생성시 공식적으로 여러가지 미리 만들어 둔 템플릿을 재공하고 있으며, 사용코자 하는 라이브러리나 코드를 쉽게 테스트 및 온라인 공유가 가능합니다.

코드샌드박스에서도 역시 SAPUI5 Quick start를 생성해 보았습니다.

코드샌드박스를 통해 sapui5 앱 생성

 

구름IDE 로 웹 IDE 기반 개발

공식 홈페이지 : https://ide.goorm.io/

구름 IDE는 국내 서비스로서, repl.it이나 code sandbox와 같은 클라우드 기반의 온라인 코딩 툴입니다. 국내 서비스인 만큼 한글이 지원되어 좀 더 편리하게 사용할 수 있습니다.

무료와 유료 플랜이 있으며, 무료 플랜의 경우 컨테이너(작업환경)를 5개까지 생성가능합니다.

통합 IDE인 만큼, HTML/자바스크립트 등 웹 뿐만 아니라 python이나 java 등도 활용이 가능합니다.

구름ide는 자바스크립트뿐만 아니라 파이썬 루비 자바 C 등 다양한 언어를 제공

Visual Studio Code 인터페이스를 옵션으로 선택할 수 있어 익숙한 개발 환경에서 코딩을 할 수 있습니다.

온라인 코딩 툴 구름ide는 Visual Studio Code 인터페이스를 제공

구름 ide에서 SAPUI5 Quick start를 실행해 보았습니다.

구름ide에서 sapui5 quick start 실행

이상으로 온라인 코딩 툴에 대해서 알아보았는데요, 개인적으론, 구름IDE가 기능은 가장 많고 VS Code 와 유사한 환경도 제공하여 좋았지만 컨테이너가 5개 밖에 제공되지 않고 좀 무거운 느낌을 받았습니다.

가볍게 자바스크립트 연습으론 repl.it이 여러모로 편리했습니다.

온라인 코딩이 아닌 직접 Visual Studio Code에 셋팅하여 개발하고자 한다면, 이 글을 참고해보시기 바랍니다.