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