​
WebIDE 미리보기

WebIDE Preview WebIDE 환경은 특히 다음과 같은 경우에 유용합니다.
  1. 다양한 프로그래밍 언어 (Java, JavaScript, Python 등) 로 코드 작성 및 디버깅
  2. 라이브 미리보기 기능을 갖춘 웹 개발 프로젝트, WebIDE 에서 첫 번째 HTML 페이지 만들기 참조
  3. 직관적인 인터페이스를 통해 프로젝트 파일 및 디렉터리 관리
  4. 명령줄 작업을 위한 통합 터미널 작업

​
환경 레이아웃

WebIDE 인터페이스는 몇 가지 주요 구성 요소로 구성됩니다.
  1. 왼쪽 사이드바:
    • 프로젝트 탐색을 위한 파일 탐색기
    • 검색 기능
    • Git 작업을 위한 소스 제어
    • 확장 패널
  2. 편집기 영역: 주요 코딩 작업 공간
  3. 하단 패널: 터미널, 문제 및 출력
  4. 상태 표시줄: 설정 및 라이브 미리보기에 빠르게 액세스

​
터미널 액세스

다음 두 가지 방법으로 터미널을 열 수 있습니다.
  1. 왼쪽 하단 모서리에 있는 아이콘을 클릭하고 터미널 탭으로 전환합니다. Terminal Access
  2. 상단 메뉴 사용: 터미널 > 새 터미널 Terminal Access

​
HTML 미리보기

HTML 파일을 미리 보려면:
  1. WebIDE 에서 오른쪽 하단 모서리에 있는 “Go Live” 버튼을 클릭합니다. Go Live button in WebIDE
  2. HTML 페이지가 렌더링된 새 브라우저 탭이 열립니다. HTML page rendered in browser tab
  3. 또는 “Web 8080” 탭을 클릭하여 미리보기를 열 수 있습니다. WebIDE Web 8080 tab preview
  4. 프로젝트가 하위 디렉터리에 있는 경우 탐색기에서 하위 디렉터리 이름을 클릭하여 액세스할 수 있으며, 그러면 해당 디렉터리의 index.html 파일이 자동으로 미리보기됩니다. WebIDE subdirectory preview
  5. 프로젝트에 index.html을 포함하여 여러 HTML 파일이 있는 경우 파일 이름을 URL 에 추가하여 직접 미리 볼 수 있습니다. 예를 들어, https://xxx.labex.io/another-file.html. WebIDE multiple HTML files preview
  6. “새 탭에서 열기” 버튼을 클릭하여 새 탭에서 미리보기를 열 수 있습니다. 새 브라우저 탭에서 미리보기가 열립니다. WebIDE Open in New Tab
“Go Live”는 자동으로 다음을 수행합니다.
  • 웹 서버 시작
  • 코드를 수정할 때 실시간 업데이트 제공
팁: LabEx VM 은 포트 8080 에서 미리보기를 호스팅합니다. 다른 사람과 미리보기 링크를 공유하여 작업을 선보일 수 있습니다. 랩 VM 이 중지되면 미리보기 링크가 더 이상 작동하지 않습니다.

​
사용 시나리오

첫 번째 Java 랩

LabEx WebIDE 를 사용하여 간단한 Java 프로그램을 작성, 컴파일 및 실행하는 방법을 보여주는 Java 랩 샘플입니다.
WebIDE 에서 Java 프로젝트 작업:Java Development
  1. 탐색기를 통해 새 Java 파일 만들기
  2. 구문 강조 표시로 Java 코드 작성
  3. 터미널에서 컴파일 및 실행:
javac MyClass.java
java MyClass
  1. 실시간으로 컴파일 오류 및 경고 보기

첫 번째 HTML 랩

LabEx WebIDE 를 사용하여 간단한 웹 페이지를 만드는 방법을 보여주는 HTML 랩 샘플입니다.
프런트엔드 개발 작업의 경우:Go Live Button
  1. HTML, CSS 및 JavaScript 파일 만들기
  2. 오른쪽 하단 모서리에 있는 “Go Live” 버튼을 클릭합니다.
  3. 다음을 통해 웹 페이지에 액세스합니다.
    • LabEx VM 상단의 Web 8080 탭
      • 버튼을 사용하여 새 포트 미리보기 탭 만들기
참고: 프로젝트는 LabEx 서버의 공용 URL 에 자동으로 배포되므로 웹 탭을 통해 액세스할 수 있습니다.

우주 비행사 이름표 프로세서 만들기

LabEx WebIDE 를 사용하여 우주 비행사 이름을 처리하는 방법을 보여주는 Python 챌린지 샘플입니다.
Python 프로그래밍의 경우:Python Development
  1. 탐색기에서 Python 파일 만들기
  2. 다음을 사용하여 Python 코드 작성:
    • 구문 강조 표시
    • 코드 완성
    • 오류 감지
  3. 터미널에서 스크립트 실행:
python3 script.py
  1. 통합 디버거를 사용하여 단계별 실행

​
자주 묻는 질문

LabEx VM 은 웹 프로젝트를 자동으로 배포합니다.Web Preview
  1. 기본 포트 8080:
    • LabEx VM 상단의 “Web 8080” 탭을 클릭합니다.
    • 애플리케이션은 공용 URL 을 통해 액세스할 수 있습니다.
  2. 사용자 지정 포트:
      • 버튼을 클릭하여 새 포트 미리보기 탭을 만듭니다.
    • 각 포트는 자체 공용 URL 을 얻습니다.
    • 여러 서비스 (예: 프런트엔드 및 백엔드) 를 실행하는 데 유용합니다.
참고: 로컬 개발과 달리 LabEx 는 클라우드에서 실행되므로 localhost 에 직접 액세스하지 않습니다.
WebIDE 의 일반적인 단축키:
  • 파일 작업
    • 새 파일: Ctrl+N
    • 저장: Ctrl+S
    • 찾기: Ctrl+F
    • 바꾸기: Ctrl+H
  • 패널 컨트롤
    • 사이드바 토글: Ctrl+B
    • 터미널 토글: Ctrl+`
    • 명령 팔레트: Ctrl+Shift+P
  • 편집기 기능
    • 다중 커서: Alt+ 클릭
    • 모든 항목 선택: Ctrl+Shift+L
    • 문서 서식 지정: Shift+Alt+F
예, Ubuntu 패키지 관리자를 사용하여 추가 도구를 설치할 수 있습니다.
sudo apt update
sudo apt install package-name
언어별 패키지 관리자의 경우:
  • Node.js/npm:
npm install package-name
  • Python/pip:
pip install package-name
설치는 임시적이며 세션이 종료되면 재설정됩니다.
WebIDE 는 파일을 관리하는 몇 가지 방법을 제공합니다.
  1. 파일 업로드:
    • 파일을 탐색기로 드래그 앤 드롭
    • 탐색기에서 마우스 오른쪽 버튼을 클릭한 후 업로드/다운로드 사용
    Upload Files
  2. 파일 다운로드:
    • 탐색기에서 파일을 마우스 오른쪽 버튼으로 클릭합니다.
    • “다운로드” 선택
  3. 복사/붙여넣기:
    • 텍스트 내용은 로컬 컴퓨터와 WebIDE 간에 직접 복사할 수 있습니다.
    • 바이너리 파일은 업로드/다운로드 기능을 사용해야 합니다.
모든 파일은 임시적이며 세션이 종료되면 손실됩니다.