프로젝트 IDX 시작하기

프로젝트 IDX를 사용하기 위해 필요한 기본사항을 읽어보세요.

시작하기 전에

시작하기 전에 브라우저에 서드 파티 쿠키를 사용 설정해야 할 수 있습니다. 프로젝트 IDX는 작업공간을 인증하기 위해 대부분의 브라우저에서 서드 파티 쿠키가 필요합니다.

Chrome
  1. Settings(설정)를 엽니다.
  2. 개인 정보 보호 및 보안 탭을 엽니다.
  3. 모든 쿠키 허용이 사용 설정되어 있는지 확인합니다.
  4. idx.google.com을 엽니다.
  5. 주소 표시줄 visibility_off에서 공개 상태 아이콘을 클릭하여 Tracking Protection 패널을 엽니다. 서드 파티 쿠키 설정을 켜서 서드 파티 쿠키를 일시적으로 허용합니다. 이렇게 하면 90일 동안 IDX에서 쿠키가 사용 설정됩니다.
Safari
  1. Safari > Settings(설정)...를 엽니다.
  2. 다음 설정을 사용 중지합니다.
    • 고급 > 모든 쿠키 차단
    • 개인 정보 보호 > 크로스 사이트 추적 방지
  3. idx.google.com을 엽니다.
Firefox

Firefox에서는 타사 쿠키를 활성화할 필요가 없습니다. idx.google.com으로 이동합니다.
오페라
  1. idx.google.com을 엽니다.
  2. 메뉴를 열고 설정을 클릭합니다.
  3. 개인 정보 보호 및 보안 섹션으로 이동하여 서드 파티 쿠키 옵션을 펼칩니다.
  4. 시크릿 모드에서 서드 파티 쿠키 차단 또는 서드 파티 쿠키 허용을 선택합니다.
  5. idx.google.com을 엽니다.
Arc
  1. arc://settings로 이동합니다.
  2. 개인 정보 보호 및 보안 섹션으로 이동하여 서드 파티 쿠키 옵션을 펼칩니다.
  3. 시크릿 모드에서 서드 파티 쿠키 차단 또는 서드 파티 쿠키 허용을 선택합니다.
  4. idx.google.com을 엽니다.
용감함

Brave의 경우 서드 파티 쿠키를 사용 설정할 필요가 없습니다. idx.google.com으로 이동합니다.

작업공간 만들기

IDX의 작업공간은 애플리케이션 개발에 필요한 모든 것이 포함된 개발 환경입니다. 여기에는 코드, 코드 편집기(프로젝트와 관련된 플러그인 포함), 앱 개발을 지원하는 도구 모음이 포함됩니다. 로컬 데스크톱 개발 환경에서 새 프로젝트를 만드는 방법과 비슷합니다. 단, 전체 컴퓨터와 OS가 사전 구성되어 애플리케이션 빌드 전용이라는 점이 다릅니다.

프로젝트 IDX 작업공간은 한 번에 하나의 코드베이스를 포함하도록 최적화되어 있으므로 다양한 애플리케이션의 환경과 시스템 수준 종속 항목을 서로 격리할 수 있습니다.

새 앱을 빌드하는 경우 IDX의 관리 작업공간 템플릿을 사용하여 빠르게 시작하세요. 또는 기존 애플리케이션 코드베이스를 IDX로 가져올 수도 있습니다

새 작업공간을 만들려면 다음 단계를 따르세요.

  • 약관에 동의하는 IDX 온보딩 흐름의 스크린샷
  • AI 기능을 사용 설정하는 IDX 온보딩 흐름의 스크린샷
  • AI 및 개인 정보 보호에 관한 메모가 표시된 IDX 온보딩 흐름의 스크린샷
  • 추천 템플릿과 github 가져오기를 보여주는 IDX 대시보드의 스크린샷

  1. 프로젝트 IDX를 엽니다.

  2. IDX를 처음 열면 Google 제품, 생성형 AI, Android SDK의 서비스 약관을 읽고 동의하라는 메시지가 표시됩니다. 제품 업데이트 및 공지사항이나 사용자 연구에 관한 커뮤니케이션에 수신 동의하여 제품 개선을 할 수도 있습니다. 자신에게 적합한 옵션을 선택하세요. 제공된 링크를 클릭하여 서비스 약관을 읽은 다음 옵션을 선택하여 동의하고 계속을 클릭합니다. 그런 다음 IDX를 처음 사용할 때 AI 기능을 사용 설정할지, 나중에를 클릭하여 사용하지 않을지 결정할 수 있습니다 (나중에 언제든지 사용 설정할 수 있음). 이 화면에서 AI 및 개인 정보 보호에 대한 참고사항을 읽은 후 계속을 클릭하여 설정을 유지하거나 뒤로를 클릭하여 AI 기능을 사용 중지합니다.

  3. 만들려는 작업공간 유형을 선택합니다.

    • 템플릿: 필요할 수 있는 기본 파일과 패키지가 미리 로드된 작업공간을 만듭니다. 추천 템플릿 중 하나를 선택하거나 모든 템플릿 보기를 클릭하여 사용 가능한 프레임워크, API, 언어의 전체 목록을 확인하세요. 템플릿 라이브러리에서도 빈 작업공간 템플릿을 찾을 수 있습니다.
    • GitHub 저장소: 저장소 가져오기를 선택하여 GitHub 저장소를 작업공간에 클론합니다.

템플릿

사용 가능한 웹 템플릿을 보여주는 IDX 템플릿 라이브러리 페이지

  1. 애플리케이션 유형별로 템플릿을 탐색하거나 오른쪽 상단의 검색창을 사용하여 전체 템플릿 라이브러리를 키워드별로 필터링합니다. 빈 작업공간 템플릿은 기타 카테고리에서 사용할 수 있습니다.

  2. 작업공간의 이름을 입력하고 추가 옵션을 설정합니다.

  3. 만들기를 클릭합니다. IDX에서 선택 항목을 기반으로 새 작업공간을 만듭니다.

Google에서는 항상 새로운 템플릿을 추가하고 있으므로 계속 확인해 주시거나 원하는 템플릿을 Google에 알려주세요.

GitHub 가져오기

  1. Repo URL(저장소 URL)을 입력합니다.

  2. 만들기를 클릭합니다. IDX에서 선택 항목을 기반으로 새 작업공간을 만듭니다.

  3. 작업공간이 로드된 후 GitHub에 인증합니다.

  4. 프로젝트를 가져온 후 IDX 터미널에서 npm install (또는 flutter pub get)를 실행합니다. 기본적으로 IDX는 프로젝트를 가져올 때 npm 종속 항목을 설치하지 않습니다.

작업공간 구성

IDX는 Nix를 사용하여 각 작업공간의 환경 구성을 정의합니다. Nix는 순전히 기능하는 패키지 관리자이며 각 종속 항목에 고유 식별자를 할당합니다. 즉, 환경에 동일한 종속 항목의 여러 버전이 원활하게 포함될 수 있습니다. 또한 재현 가능하고 선언적입니다. 즉, IDX의 컨텍스트에서 Nix 구성 파일을 작업공간 간에 공유하여 동일한 환경 구성을 로드할 수 있습니다. Nix + IDX 자세히 알아보기

.idx/dev.nix 파일 만들기 또는 수정

환경 구성은 코드 저장소의 .idx/dev.nix 파일에 정의됩니다. 이 파일을 사용하면 설치된 패키지, 환경 변수, 코드 OSS 확장 프로그램을 지정할 수 있습니다.

IDX에서 앱 미리보기를 사용 설정하는 기본 작업공간 환경 구성은 다음 .idx/dev.nix 파일 예를 참고하세요.

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_18
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
      };
    };
  };
}

새 구성 적용

dev.nix 구성 파일을 추가하거나 업데이트할 때마다 IDX에서 오른쪽 하단에 환경을 다시 빌드하라는 메시지를 표시합니다. 환경을 다시 빌드하는 데 걸리는 시간은 구성에 필요한 패키지 수에 따라 다릅니다.

환경 빌드 실패 디버그

구성 파일은 컴퓨터가 읽을 수 있는 코드이므로 오류가 발생할 수 있습니다. 이 경우 환경이 빌드되지 않고 시작되지 않을 수 있습니다. IDX에 복구 환경을 시작하는 옵션이 표시됩니다. 이 작업공간은 정의한 구성이 없으며 기본 코드 OSS만 실행합니다. 이렇게 하면 dev.nix 구성 파일의 오류를 수정하고 환경을 다시 빌드할 수 있습니다.

IDX에는 결국 환경 빌드 오류가 표시됩니다. 지금은 직접 문제를 해결해야 합니다.

다음 단계