​
WebIDE 미리보기

WebIDE 환경은 특히 다음과 같은 경우에 유용합니다.

  1. 다양한 프로그래밍 언어 (Java, JavaScript, Python 등) 로 코드 작성 및 디버깅
  2. 라이브 미리보기 기능을 갖춘 웹 개발 프로젝트, WebIDE 에서 첫 번째 HTML 페이지 만들기 참조
  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 이 중지되면 미리보기 링크가 더 이상 작동하지 않습니다.

​
사용 시나리오

​
자주 묻는 질문