JavaScript 학습을 위한 환경구성

개요

JavaScript를 학습하고자 환경을 구축하려 합니다. 하지만 언제나 프로그래밍 학습은 실습환경을 구축하는 것에 많은 수고가 들어가기 때문에 이를 최대한 간략히 할 수 있었으면 하는 생각이 간절합니다. 구름 IDE는 이름과 같이 웹 브라우저를 통해서 접속 가능한 클라우드 통합개발환경을 제공해주는 서비스입니다. 이를 사용하면 간단히 제가 원하는 수준의 학습환경(Node.js가 설치된 리눅스)을 쉽게 구축할 수 있습니다.

과거에는 Cloud9, CodeAnyWhere와 같은 동일한 무료 서비스들이 존재하였으나 Cloud9은 Amazon에 인수되었으며 CodeAnyWhere는 더 이상 무료 요금제를 제공하지 않기 때문에 현재(20.07.01)는 구름 IDE가 거의 유일하게 무료로 사용할 수 있는 독립된 가상머신에 개발환경을 탑재해서 제공해주는 서비스입니다.

간단한 가입 절차를 통해 계정을 생성하는 것만으로 최대 5개의 가상머신을 이용할 수 있습니다.

학습환경 설정 @ 구름 IDE

웹브라우저를 이용하여 ① 구름 IDE 웹사이트에 접속합니다. 사이트의 안내에 따라 ② 계정을 만들고, ③ 컨테이너를 생성합니다. 컨테이너 생성시, 소프트웨어 스택 항목을 Node.js를 선택합니다.

이왕이면 추가 모듈/패키지 항목에 Node.js 버전 12.xx로 업그레이드도 선택합니다.

화면까지 포함된 상세한 설명은 구름 IDE에서 제공하는 도움말을 참고하시기 바랍니다.

컨테이너의 생성이 완료된 후, 정상적으로 접속하면 코딩 환경을 확인할 수 있습니다. 각 영역에 대한 상세한 설명은 역시 도움말을 참고하시기 바랍니다.

소스코드 실행법

우선 구름 IDE 에서 제공하는 기본 소스코드 (main.js)를 사용하여 작성된 소스코드를 실행하는 방법을 확인하겠습니다. 구름 IDE의 하단에는 터미널이 제공되어, 이를 이용하여 작성한 코드를 실행해 볼 수 있습니다. 터미널에 다음과 같이 입력합니다. (# 은 입력하지 않습니다.)

# node main.js

Hello goorm!이 표시된다면 실행이 정상적으로 된 것입니다.

매번 실행시마다 키보드로 명령어를 입력하는 것이 귀찮을 수 있기 때문에 조금 더 환경을 꾸며보도록 하겠습니다. 화면의 상단에는 실행이라는 버튼이 있습니다. 혹은 메뉴 > 프로젝트 > 실행입니다.

이 버튼을 클릭합니다.

새로운 화면(탭)이 표시되면 하단의 저장 후 실행이라는 버튼을 누릅니다. 터미널에 좀 전과 같이 Hello goorm!이라는 문장이 표시되는 것을 확인할 수 있습니다.

창을 닫고, 다시 실행 버튼을 누르면 이번에는 창이 새로 나오지 않고 바로 터미널에 동일한 내용이 표시되는 것을 확인할 수 있습니다.