Project IDX 사용을 시작하는 데 필요한 기본 사항을 알아보세요.
시작하기 전에
시작하기 전에 다음에서 서드 파티 쿠키를 사용하도록 설정해야 할 수도 있습니다. 있습니다. Project IDX는 대부분의 브라우저에서 서드 파티 쿠키를 요구합니다. 작업공간을 인증합니다.
Chrome
- 설정을 엽니다.
- 개인 정보 보호 및 보안 탭을 엽니다.
- 모든 쿠키 허용이 사용 설정되어 있는지 확인합니다.
- idx.google.com을 엽니다.
- 주소 표시줄에서 공개 상태 아이콘을 클릭합니다. visibility_off 추적 보호 패널 사용 설정 서드 파티 쿠키 설정을 통해 서드 파티 쿠키. 이렇게 하면 IDX에서 90일 동안 쿠키가 활성화됩니다.
Safari
- Safari > 설정...을 탭합니다.
- 다음 설정을 사용 중지합니다.
- 고급 > 모든 쿠키 차단하기
- 개인 정보 보호 > 크로스 사이트 추적 방지
- idx.google.com을 엽니다.
Firefox
Firefox에서 타사 쿠키를 사용하도록 설정할 필요는 없습니다. idx.google.com으로 이동합니다.
오페라
- idx.google.com을 엽니다.
- 메뉴를 열고 설정을 클릭합니다.
- 개인 정보 보호 및 보안 섹션을 열고 서드 파티 쿠키 옵션.
- 시크릿 모드에서 서드 파티 쿠키 차단을 선택합니다. 서드 파티 쿠키 허용
- idx.google.com을 엽니다.
Arc
- arc://settings로 이동합니다.
- 개인 정보 보호 및 보안 섹션으로 이동하여 서드 파티 쿠키 옵션.
- 시크릿 모드에서 서드 파티 쿠키 차단을 선택합니다. 서드 파티 쿠키 허용
- idx.google.com을 엽니다.
용감함
Brave에 대해서는 서드 파티 쿠키를 사용 설정할 필요가 없습니다. idx.google.com으로 이동합니다.
작업공간 만들기
IDX의 작업공간은 모든 것을 포함하는 개발 환경입니다 애플리케이션을 개발해야 합니다 여기에는 코드, 코드 편집기 (프로젝트와 관련된 플러그인 포함) 및 앱을 지원하는 도구 모음 살펴봤습니다 다음과 비슷합니다. 로컬 데스크톱 개발 환경에서 새 프로젝트 만들기 컴퓨터 전체와 OS가 사전 구성되어 있으며 애플리케이션을 빌드할 수 있습니다
Project IDX 작업공간은 코드베이스를 한 번에 하나씩 포함하도록 최적화되어 있으므로 여러 애플리케이션의 환경 및 시스템 수준 종속 항목을 애플리케이션입니다
새 앱을 개발하는 경우 IDX의 관리형 작업공간 템플릿을 사용하여 빠르게 시작할 수 있습니다 또는 기존 애플리케이션을 가져올 수 있습니다. 코드베이스를 IDX로 변환합니다
새 작업공간을 만들려면 다음 단계를 따르세요.
Project IDX를 엽니다.
IDX를 처음 열면 Google 제품, 생성형 AI, Android SDK의 서비스 약관이 적용됩니다. 또한 제품 업데이트 및 제품 개선을 위한 공지사항 또는 사용자 연구 원하는 옵션을 이해하는 것이 중요합니다. 제공된 링크를 클릭하여 서비스 약관을 읽은 후 옵션을 선택하세요. 수락하고 계속을 클릭합니다. 그런 다음 IDX를 처음 사용할 때부터 AI 기능을 사용 설정하거나 나중에를 클릭합니다. 나중에 사용 설정할 수 있습니다.) 이 화면에서 사용 설정하는 경우 참고하고 계속을 클릭하여 설정을 유지합니다. AI 기능을 사용 중지하려면 뒤로 이동하세요.
만들려는 작업공간 유형을 선택합니다.
- 템플릿: 기본 파일과 코드가 포함된 사전 로드된 작업공간을 패키지로 묶는 것이 좋습니다. 추천 템플릿 중 하나를 선택하거나 모든 템플릿에서 사용 가능한 프레임워크, API, 언어입니다. 빈 작업공간 템플릿은 다음 위치에서도 찾을 수 있습니다. 사용할 수 있습니다.
- Git 저장소: 저장소 가져오기를 선택하여 작업공간에 저장소를 클론합니다.
템플릿
애플리케이션 유형별로 템플릿을 찾아보거나 검색창을 사용하여 전체 템플릿 라이브러리를 필터링할 수 있습니다. 있습니다. 빈 작업공간 템플릿은 기타 카테고리에서 사용할 수 있습니다.
워크스페이스의 이름을 입력하고 추가 옵션을 설정합니다.
만들기를 클릭합니다. IDX는 프로젝트 ID를 기반으로 새 작업공간을 선택할 수 있습니다.
항상 새로운 템플릿이 추가되니 자주 확인해 주세요. 또는 보고 싶은 콘텐츠를 알려주세요.
Git 저장소 가져오기
Repo URL을 입력합니다. 저장소는 GitHub, GitLab 또는 Bitbucket에서 호스팅할 수 있습니다.
만들기를 클릭합니다. IDX는 프로젝트 ID를 기반으로 새 작업공간을 선택할 수 있습니다.
비공개 저장소의 경우 각 제공업체에 인증하라는 메시지가 표시됩니다.
npm install를 실행합니다 (또는flutter pub get)가 프로젝트를 가져올 수 있습니다 기본적으로 IDX는 npm을 설치하지 않음 종속 항목을 제거합니다.
작업공간 구성
IDX는 Nix 사용 각 작업공간의 환경 구성을 정의합니다. Nix는 순전히 패키지 관리자를 사용하고 각 종속 항목에 고유 식별자를 할당합니다. 이는 궁극적으로 자체 환경이 원활하게 포함할 수 있도록 지원합니다 또한 복제 가능하고 선언적일 수 있습니다 즉, IDX의 맥락에서 이는 동일한 구성 파일을 로드하기 위해 여러 작업공간 간에 Nix 구성 파일을 구성할 수 있습니다 다음에 대해 자세히 알아보기 Nix + IDX
.idx/dev.nix 파일 만들기 또는 수정
코드의 .idx/dev.nix 파일에 환경 구성이 정의되어 있습니다.
저장소 이 파일을 사용하면 설치된 패키지, 설치 환경,
변수 및 코드 OSS 확장 프로그램을 포함합니다.
기본 작업공간 환경은 다음 예시 .idx/dev.nix 파일을 참고하세요.
IDX에서 앱 미리보기를 사용 설정하는 구성을 보여줍니다.
{ 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에 환경 빌드 오류가 표시될 것입니다. 지금은 스스로 문제를 해결해야 합니다