실습환경: 구름IDE - 프레임워크를 위한 JavaScript ES6
프레임워크를 위한 JavaScript ES6
    • 01
      Intro
    • Orientation
      실습환경: 구름IDE
    • 02
      JS 준비운동
    • JS 숲을 보고 시작하자
      개발자답게 사용하는 Chrome Browser_1
      개발자답게 사용하는 Chrome Browser_2
      JS를 움직이는 다양한 데이터, 자료형과 연산
      JS에게는 온 세상이 객체다_1. 이론
      JS에게는 온 세상이 객체다_2. 실습
      코드의 흐름을 제어하는 조건문과 반복문_1. 이론
      코드의 흐름을 제어하는 조건문과 반복문_2. 실습
      JS에서 만나는 함수_1. 이론
      JS에서 만나는 함수_2. 실습
      생성자 함수로 객체 찍어내기
      객체로서의 함수
    • 03
      프레임워크를 위한 JS
    • 쉬어가기1. 문법 학습의 함정
      스코프: 이 변수, 어디까지 쓸 수 있을까?
      this의 모든 것_1. 개요
      this의 모든 것_2. 상세
      DOM 가지고 놀기_1. goormIDE
      DOM 가지고 놀기_2. CLI에서 JS 실행하기
      DOM 가지고 놀기_3. getElementbyid
      DOM 가지고 놀기_4. HTML 태그의 속성 조작하기
      DOM 가지고 놀기_5. input 태그 다루기
      callbak 함수: 넌 좀 기다렸다 오렴
    • 04
      하나씩 살펴보는 ES6
    • 변수, 상황별로 나눠 쓰자
      문자열을 좀 더 쉽게 사용하는 템플릿 리터럴
      화살표 함수: 시간도 없는데 함수도 복잡하게 쓰나?
      배열 가지고 놀기_1. 배열의 정체와 길이
      배열 가지고 놀기_2. 요소 추가
      배열 가지고 놀기_3. 배열을 순회하는 두 가지 방법
      배열 가지고 놀기_4. 필터링, 마무리
      쉬어가기2. 코드 스타일
    • 05
      깊게 알아보는 ES6
    • 구조분해할당으로 똑똑하게 값 빼내기
      Spread와 Destructuring
      클래스로 세상만물 프로그래밍
      Class 실습
      모듈로 여러 파일에 나눠 작업하기
      예외 처리
      Promise Async Await
    실습환경: 구름IDE
    01 Intro
    실습환경: 구름IDE

    본격적으로 학습을 시작하기에 앞서 본 과정에서 사용할 실습환경인 구름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!"이 출력된 것을 볼 수 있습니다. 만약 파일을 수정하였다면 저장 버튼을 클릭한 후 실행 버튼을 클릭해야 수정 사항이 반영되어 코드가 동작되니 유념하시기 바랍니다.

    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)