본격적으로 학습을 시작하기에 앞서 본 과정에서 사용할 실습환경인 구름IDE에 대해 살펴보겠습니다.

이제까지 여러분은 문서를 작성하기 위해 워드, 한글, 메모장 등의 프로그램을 사용해오셨을 겁니다. 이러한 문서를 작성하거나 편집하는 프로그램을 '문서 편집기(Text Editor)'라고 합니다. 그렇다면 코드를 작성하거나 편집하는 프로그램은 무엇일까요? 코드를 작성하기 위한 도구는 '코드 에디터(Code Editor)'라고 부릅니다. 이 코드에디터에 디버깅(논리적 오류인 버그를 검출 및 제거하는 과정), 컴파일(작성한 코드를 기계어로 번역하는 작업) 등의 기능을 추가하여, 사람이 작성한 코드를 컴퓨터가 이해할 수 있도록 변환하고 동작시키는 프로그램을 통합개발환경인 IDE(Integrated Development Environment)라고 합니다. 하지만 C/C++은 Visual Studio, 자바는 Eclipse 등 프로그래밍 언어마다 사용되는 IDE 및 설치과정이 제각각 다르며, 언어를 하나만 다룰지라도 여러 가지 이유로 IDE를 여러 번 설치하는 번거로움이 발생할 수 있습니다. 이러한 불편함을 해결하기 위해 등장한 것이 클라우드 IDE입니다.

클라우드 IDE는 프로그램 설치 과정 없이 컨테이너를 생성하는 것만으로 개발환경이 자동 구축되며, 집에서 작성하던 코드를 학교에서 이어 작성하는 등 어디서나 같은 환경으로 사용할 수 있습니다. 구름IDE(https://ide.goorm.io/)는 협업을 위해 여러 사용자가 동시 접근할 수 있는 컨테이너를 제공하는 클라우드 IDE입니다.

구름IDE로 실습하기

실습에서 사용할 구름IDE 사용법을 간략히 설명하겠습니다.

먼저 구름IDE에 접속하여 로그인한 뒤 오른쪽 상단에서 '대시보드'를 클릭합니다.

대시보드 페이지 오른쪽 상단의 '새 컨테이너 생성'을 클릭합니다.

컨테이너 정보를 작성한 뒤 소프트웨어 스택을 HTML/CSS/JS로 선택합니다. 필요한 옵션이 있다면 마저 설정한 뒤 오른쪽 상단의 컨테이너 생성 버튼을 클릭합니다.

컨테이너 구성이 완료되어 실행을 묻는 알림창이 뜨면 '컨테이너 실행'을 클릭해 컨테이너로 이동합니다.

프로젝트를 로딩하면 위와 같은 IDE 페이지를 볼 수 있습니다.

파일 목록에서 index.html 파일을 더블클릭하면 "Hello, goorm!"을 출력하는 코드가 작성된 것을 볼 수 있습니다. 이제 오른쪽 상단에서 실행 버튼(원 안에 ▶ 모양이 배치된 버튼)을 클릭해봅시다.

코드 실행 완료 후 'Open Preview'를 클릭하면 웹 페이지 미리보기 화면에 "Hello, goorm!"이 출력된 것을 볼 수 있습니다. 만약 파일을 수정하였다면 저장 버튼을 클릭한 후 실행 버튼을 클릭해야 수정 사항이 반영되어 코드가 동작되니 유념하시기 바랍니다.