프로젝트 IDX는 베타 버전입니다. 베타 제품 및 기능은 지원이 제한될 수 있으며 베타 제품 및 기능의 변경사항이 이전 버전과 호환되지 않을 수 있습니다.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

앱 미리보기

프로젝트 IDX를 사용하면 코드 편집기와 함께 애플리케이션의 실시간 뷰를 렌더링하여 작업을 미리 볼 수 있습니다. IDX 웹 미리보기는 앱 웹 서버 및 클라우드 기반 Android 에뮬레이터의 인라인 프레임 (iFrame)을 렌더링합니다.

미리보기 환경 사용 설정 및 구성

작업공간에서 앱을 미리 보려면 미리보기 환경을 구성해야 합니다.

.idx/dev.nix 구성 파일에서 미리보기를 사용 설정합니다. IDX는 사용자가 새 작업공간을 만들 때 이 파일을 자동으로 생성하고, 개발자가 선택한 템플릿을 기반으로 적용 가능한 미리보기 환경을 포함합니다. 파일이 IDX 코드 저장소에 없으면 만듭니다. 다음 예에 표시된 것처럼 idx.previews 속성을 true로 설정하고 구성 속성을 추가합니다.

{ pkgs, ... }: {

# NOTE: This is an excerpt of a complete Nix configuration example.
# For more information about the dev.nix file in IDX, see
# https://developers.google.com/idx/guides/customize-idx-env

# Enable previews and customize configuration
idx.previews = {
  enable = true;
  previews = {
    # The following object sets web previews
    web = {
      command = [
        "npm"
        "run"
        "start"
        "--"
        "--port"
        "$PORT"
        "--host"
        "0.0.0.0"
        "--disable-host-check"
      ];
      manager = "web";
    };
    # The following object sets Android previews
    # Note that this is supported only on FLutter workspaces

    android = {
      manager = "flutter";
    };
  };
};

IDX의 Nix 속성 전체 목록은 Nix + IDX를 참고하세요.

환경을 다시 빌드합니다.
- 명령어 팔레트에서 프로젝트 IDX: 하드 다시 시작 명령어를 실행합니다(Cmd+Shift+P/Ctrl+Shift+P).
- 환경 구성 업데이트됨 알림에서 환경 다시 빌드를 클릭합니다.
dev.nix 파일을 수정한 후 환경을 다시 빌드하면 사용 설정한 항목에 따라 Android 및 웹 탭을 표시하는 미리보기 패널이 작업공간에 표시됩니다. 하지만 환경이 다시 빌드될 때까지 잠시 기다려야 할 수 있습니다. 작업공간을 닫은 후 IDX 대시보드에서 다시 열어보세요.

앱 미리보기 사용

IDX는 미리보기 환경에 앱을 설치하는 Chrome 및 Android Emulator (Flutter 작업공간)에서 웹 미리보기를 제공하므로 작업공간에서 직접 엔드 투 엔드로 완전히 테스트할 수 있습니다.

웹 및 Android 미리보기 새로고침

IDX는 기본 프레임워크(예: npm run start 및 flutter hot-reload)의 핫 리로드 기능에 후크하여 긴밀한 내부 개발 루프를 제공합니다. 이 섹션에서는 IDX의 기본 동작이 사용 사례에 잘 작동하지 않는 경우 문제를 해결하는 데 도움이 되는 다양한 유형의 새로고침에 대해 설명합니다.

자동 핫 리로드: 파일을 저장할 때 핫 리로드가 자동으로 실행됩니다. 핫 모듈 교체 (HMR)라고도 하는 핫 리로드는 페이지를 새로고침하지 않거나 (웹 앱의 경우) 앱을 다시 시작 또는 재설치하지 않고 (에뮬레이터의 경우) 앱을 업데이트합니다. 이 접근 방식은 앱의 라이브 상태를 보존하는 데 효과적이지만 때때로 의도한 대로 작동하지 않을 수도 있습니다.
Manual Full Reload: 이 옵션은 페이지 새로고침 (웹 앱의 경우) 또는 앱 다시 시작 (에뮬레이터의 경우)과 같습니다. 전체 새로고침을 사용하여 대량의 코드 청크를 리팩터링할 때와 같이 소스 코드의 중요한 변경사항을 캡처하는 것이 좋습니다.
Manual Hard Restart: 이 옵션은 IDX의 미리보기 시스템을 완전히 다시 시작하는 작업을 실행합니다. 여기에는 앱의 웹 서버를 중지했다가 다시 시작하는 작업이 포함됩니다.

모든 새로고침 옵션은 IDX 카테고리의 미리보기 툴바 또는 명령어 팔레트 (Mac의 경우 Cmd+Shift+P, ChromeOS, Windows, Linux의 경우 Ctrl+Shift+P)를 사용하여 사용할 수 있습니다.

미리보기 툴바를 사용하려면 다음 단계를 따르세요.

새로고침 아이콘을 클릭하여 페이지를 새로고침합니다. 이렇게 하면 강제로 완전히 새로고침됩니다. 다른 새로고침 유형의 경우 새로고침 아이콘 옆에 있는 화살표를 클릭하여 메뉴를 펼칩니다.
메뉴에서 Hot Reload, Full Reload, Hard Restart 중에서 원하는 새로고침 옵션을 선택합니다.

자동저장 및 핫 리로드 구성

기본적으로 IDX는 입력을 중지한 지 1초 후에 작업을 자동으로 저장하여 자동 핫 리로드를 트리거합니다. IDX에서 다른 간격으로 작업을 저장하도록 하려면 자동저장 설정을 변경합니다. 자동저장을 사용 중지할 수도 있습니다.

자동저장 구성

프로젝트 IDX를 엽니다.
설정 아이콘을 클릭합니다. 설정 창이 나타납니다.
Files: Auto Save를 검색하고 필드가 `afterDelay`로 설정되어 있는지 확인합니다.
파일: 자동 저장 지연을 검색합니다. 자동 저장 지연 입력란이 표시됩니다.
새 자동저장 지연 간격을 밀리초 단위로 입력합니다. 이제 작업의 변경사항이 새로운 자동저장 지연 설정에 따라 자동으로 저장됩니다.

자동저장 사용 중지

프로젝트 IDX를 엽니다.
설정 아이콘을 클릭합니다. 설정 창이 나타납니다.
파일: 자동 저장을 검색합니다.
드롭다운을 클릭하고 off를 선택합니다. 그러면 자동저장이 사용 중지됩니다.