앱 미리보기

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

Firebase Studio는 코드 편집기와 함께 애플리케이션의 실시간 뷰를 렌더링하는 미리보기를 제공합니다.

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

템플릿을 사용하는 경우 미리보기가 이미 구성되어 있는 경우가 많습니다. 템플릿에 아직 미리보기가 설정되어 있지 않은 경우 프로젝트의 Nix 구성 파일에서 미리보기를 구성할 수 있습니다.

1. 작업공간에서 .idx/dev.nix를 엽니다.

   Firebase Studio는 새 워크스페이스를 만들 때 이 파일을 자동으로 생성하며 선택한 템플릿에 따라 관련 미리보기 환경을 포함합니다. 파일이 Firebase Studio 코드 저장소에 없는 경우 파일을 만든 다음 idx.previews 속성을 true로 설정합니다. 그런 다음 다음 예와 같이 구성 속성을 추가합니다.

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in Firebase Studio, see
     # https://firebase.google.com/docs/studio/customize-workspace
   
     # 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";
           # Optionally, specify a directory that contains your web app
           # cwd = "app/client";
         };
         # The following object sets Android previews
         # Note that this is supported only on Flutter workspaces
         android = {
           manager = "flutter";
         };
       };
     };
   }
   

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

2. 환경을 다시 빌드합니다.

   • 명령어 팔레트 (Cmd+Shift+P/Ctrl+Shift+P)에서 Firebase Studio: 하드 리스타트 명령어를 실행합니다.
   • 환경 구성 업데이트됨 알림에서 환경 다시 빌드를 클릭합니다.

   dev.nix 파일을 수정한 후 환경을 다시 빌드하면 사용 설정한 항목에 따라 Android 및 웹 탭 중 하나 또는 둘 다를 보여주는 미리보기 패널이 작업공간에 표시됩니다.

앱 미리보기 사용

Firebase Studio는 미리보기 환경에 앱을 설치하는 Flutter 워크스페이스의 Chrome 및 Android 에뮬레이터에서 웹 미리보기를 제공합니다. 이렇게 하면 워크스페이스에서 직접 앱을 엔드 투 엔드로 완전히 테스트할 수 있습니다.

웹 및 Android용 미리보기 새로고침

Firebase Studio는 기본 프레임워크 (예: npm run start 및 flutter hot-reload)의 핫 리로드 기능에 후크되어 내부 개발 루프를 간소화합니다. Firebase Studio는 다음과 같은 유형의 새로고침을 제공합니다.

• 자동 핫 리로드: 파일을 저장할 때 핫 리로드가 자동으로 실행됩니다. 핫 리로드는 핫 모듈 교체 (HMR)라고도 하며, 페이지를 새로고침하지 않고 (웹 앱의 경우) 또는 앱을 다시 시작하거나 재설치하지 않고 (에뮬레이터의 경우) 앱을 업데이트합니다. 이 접근 방식은 앱의 실시간 상태를 보존하는 데 유용하지만 항상 의도한 대로 작동하지 않을 수 있습니다.

• 수동 전체 새로고침: 이 옵션은 페이지 새로고침 (웹 앱의 경우) 또는 앱 다시 시작 (에뮬레이터의 경우)과 같습니다. 대규모 코드 리팩터링과 같이 소스 코드의 중대한 변경사항을 포착하려면 전체 새로고침을 사용하는 것이 좋습니다.

• 수동 하드 재시작: 이 옵션은 앱의 웹 서버를 중지하고 다시 시작하는 등 Firebase Studio의 미리보기 시스템을 완전히 다시 시작합니다.

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

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

1. 새로고침 아이콘을 클릭하여 페이지를 새로고침합니다. 이렇게 하면 전체 새로고침이 강제됩니다. 다른 유형의 새로고침을 사용하려면 새로고침 아이콘 옆에 있는 화살표를 클릭하여 메뉴를 펼칩니다.

2. 메뉴에서 원하는 새로고침 옵션(핫 리로드, 전체 리로드 또는 하드 리스타트)을 선택합니다.

웹 미리보기를 다른 사용자와 공유하기

액세스를 사용 설정한 후 미리보기로 연결되는 직접 링크를 공유하여 의견을 얻기 위해 앱의 웹 미리보기를 다른 사용자와 공유할 수 있습니다.

1. 웹 미리보기 툴바에서 주소 표시줄 오른쪽에 있는 미리보기 링크 공유 아이콘을 클릭하여 공유 메뉴를 엽니다.

2. 다음 옵션 중 하나를 사용하여 다른 사용자가 내 워크스페이스에 액세스하도록 허용합니다.

   • 미리보기를 공개: 워크스페이스 미리보기를 공개적으로 액세스할 수 있도록 설정합니다. 이렇게 하면 인터넷에 있는 모든 사용자가 워크스페이스가 활성 상태인 동안 및 공개 액세스를 사용 중지할 때까지 워크스페이스에서 실행 중인 미리보기 서버에 액세스할 수 있습니다.

   • 작업공간 액세스 관리 액세스 권한을 부여할 사용자에게만 워크스페이스를 공유합니다.

3. 미리보기 URL 복사를 선택하여 워크스페이스 미리보기의 직접 링크를 복사한 다음 의견을 받고자 하는 사용자에게 보낼 수 있습니다. 표시되는 QR 코드를 사용하여 휴대기기에서 미리보기를 열 수도 있습니다.

자동 저장 및 핫 리로드 구성

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

다음 단계

• Firebase를 사용하여 게시
• 앱 모니터링