LabEx VM WebIDE 인터페이스
LabEx WebIDE 는 코딩 작업을 위한 최신 VS Code 와 유사한 개발 환경을 제공합니다. Ubuntu 22.04 를 기반으로 구축되었으며, 여러 프로그래밍 언어에서 코드를 작성, 컴파일 및 실행하기 위한 익숙한 인터페이스를 제공합니다.
WebIDE 미리보기
WebIDE 환경은 특히 다음과 같은 경우에 유용합니다.
- 다양한 프로그래밍 언어 (Java, JavaScript, Python 등) 로 코드 작성 및 디버깅
- 라이브 미리보기 기능을 갖춘 웹 개발 프로젝트, WebIDE 에서 첫 번째 HTML 페이지 만들기 참조
- 직관적인 인터페이스를 통해 프로젝트 파일 및 디렉터리 관리
- 명령줄 작업을 위한 통합 터미널 작업
환경 레이아웃
WebIDE 인터페이스는 몇 가지 주요 구성 요소로 구성됩니다.
- 왼쪽 사이드바:
- 프로젝트 탐색을 위한 파일 탐색기
- 검색 기능
- Git 작업을 위한 소스 제어
- 확장 패널
- 편집기 영역: 주요 코딩 작업 공간
- 하단 패널: 터미널, 문제 및 출력
- 상태 표시줄: 설정 및 라이브 미리보기에 빠르게 액세스
터미널 액세스
다음 두 가지 방법으로 터미널을 열 수 있습니다.
- 왼쪽 하단 모서리에 있는 아이콘을 클릭하고 터미널 탭으로 전환합니다.
- 상단 메뉴 사용: 터미널 > 새 터미널
HTML 미리보기
HTML 파일을 미리 보려면:
- WebIDE 에서 오른쪽 하단 모서리에 있는 “Go Live” 버튼을 클릭합니다.
- HTML 페이지가 렌더링된 새 브라우저 탭이 열립니다.
- 또는 “Web 8080” 탭을 클릭하여 미리보기를 열 수 있습니다.
- 프로젝트가 하위 디렉터리에 있는 경우 탐색기에서 하위 디렉터리 이름을 클릭하여 액세스할 수 있으며, 그러면 해당 디렉터리의
index.html
파일이 자동으로 미리보기됩니다. - 프로젝트에
index.html
을 포함하여 여러 HTML 파일이 있는 경우 파일 이름을 URL 에 추가하여 직접 미리 볼 수 있습니다. 예를 들어,https://xxx.labex.io/another-file.html
. - “새 탭에서 열기” 버튼을 클릭하여 새 탭에서 미리보기를 열 수 있습니다. 새 브라우저 탭에서 미리보기가 열립니다.
“Go Live”는 자동으로 다음을 수행합니다.
- 웹 서버 시작
- 코드를 수정할 때 실시간 업데이트 제공
팁: LabEx VM 은 포트 8080 에서 미리보기를 호스팅합니다. 다른 사람과 미리보기 링크를 공유하여 작업을 선보일 수 있습니다. 랩 VM 이 중지되면 미리보기 링크가 더 이상 작동하지 않습니다.
사용 시나리오
Java 개발 샘플
Java 개발 샘플
첫 번째 Java 랩
LabEx WebIDE 를 사용하여 간단한 Java 프로그램을 작성, 컴파일 및 실행하는 방법을 보여주는 Java 랩 샘플입니다.
WebIDE 에서 Java 프로젝트 작업:
- 탐색기를 통해 새 Java 파일 만들기
- 구문 강조 표시로 Java 코드 작성
- 터미널에서 컴파일 및 실행:
- 실시간으로 컴파일 오류 및 경고 보기
웹 개발 샘플
웹 개발 샘플
첫 번째 HTML 랩
LabEx WebIDE 를 사용하여 간단한 웹 페이지를 만드는 방법을 보여주는 HTML 랩 샘플입니다.
프런트엔드 개발 작업의 경우:
- HTML, CSS 및 JavaScript 파일 만들기
- 오른쪽 하단 모서리에 있는 “Go Live” 버튼을 클릭합니다.
- 다음을 통해 웹 페이지에 액세스합니다.
- LabEx VM 상단의 Web 8080 탭
-
- 버튼을 사용하여 새 포트 미리보기 탭 만들기
참고: 프로젝트는 LabEx 서버의 공용 URL 에 자동으로 배포되므로 웹 탭을 통해 액세스할 수 있습니다.
Python 개발 샘플
Python 개발 샘플
우주 비행사 이름표 프로세서 만들기
LabEx WebIDE 를 사용하여 우주 비행사 이름을 처리하는 방법을 보여주는 Python 챌린지 샘플입니다.
Python 프로그래밍의 경우:
- 탐색기에서 Python 파일 만들기
- 다음을 사용하여 Python 코드 작성:
- 구문 강조 표시
- 코드 완성
- 오류 감지
- 터미널에서 스크립트 실행:
- 통합 디버거를 사용하여 단계별 실행
자주 묻는 질문
웹 애플리케이션에 어떻게 액세스합니까?
웹 애플리케이션에 어떻게 액세스합니까?
LabEx VM 은 웹 프로젝트를 자동으로 배포합니다.
-
기본 포트 8080:
- LabEx VM 상단의 “Web 8080” 탭을 클릭합니다.
- 애플리케이션은 공용 URL 을 통해 액세스할 수 있습니다.
-
사용자 지정 포트:
-
- 버튼을 클릭하여 새 포트 미리보기 탭을 만듭니다.
- 각 포트는 자체 공용 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 패키지 관리자를 사용하여 추가 도구를 설치할 수 있습니다.
언어별 패키지 관리자의 경우:
- Node.js/npm:
- Python/pip:
설치는 임시적이며 세션이 종료되면 재설정됩니다.
파일 업로드 및 다운로드는 어떻게 처리합니까?
파일 업로드 및 다운로드는 어떻게 처리합니까?
WebIDE 는 파일을 관리하는 몇 가지 방법을 제공합니다.
-
파일 업로드:
- 파일을 탐색기로 드래그 앤 드롭
- 탐색기에서 마우스 오른쪽 버튼을 클릭한 후 업로드/다운로드 사용
-
파일 다운로드:
- 탐색기에서 파일을 마우스 오른쪽 버튼으로 클릭합니다.
- “다운로드” 선택
-
복사/붙여넣기:
- 텍스트 내용은 로컬 컴퓨터와 WebIDE 간에 직접 복사할 수 있습니다.
- 바이너리 파일은 업로드/다운로드 기능을 사용해야 합니다.
모든 파일은 임시적이며 세션이 종료되면 손실됩니다.