[이 항목은 시험판 문서이며 변경될 수 있습니다.]
디자인 스튜디오에서 웹용 Visual Studio Code 사용하여 사이트 코드를 편집할 수 있습니다. 이 기능을 사용하면 다음 웹 사이트 메타데이터에 대한 정적 콘텐츠, HTML, CSS, Liquid 및 JavaScript를 편집할 수 있습니다.
| 메타데이터 | 콘텐츠 |
|---|---|
| 고급 양식(다단계 양식) | JavaScript |
| 기본 양식 | JavaScript |
| 콘텐츠 조각 | 지원되는 모든 콘텐츠 조각 콘텐츠 |
| 목록 | JavaScript |
| 웹 파일 | 미디어 파일을 보고 다운로드합니다. 텍스트(코드) 파일을 편집합니다. |
| 웹 페이지 | 지원되는 모든 콘텐츠(언어별), JavaScript 및 CSS |
| 웹 템플릿 | 모든 지원되는 콘텐츠 |
노트
메타데이터 레코드를 만들 수 없으며 콘텐츠, 코드 및 파일 첨부 파일 보기/다운로드만 추가 및 편집할 수 있습니다.
웹용 Visual Studio Code 브라우저에서 완전히 실행되는 무료 제로 설치 Microsoft Visual Studio Code 환경을 제공하여 사이트 코드를 찾아보고 간단한 코드를 빠르고 안전하게 변경할 수 있습니다. 추가 정보: 웹 환경용 Visual Studio Code.
중요
- 이는 프리뷰 기능입니다.
- 프리뷰 기능은 생산용으로 만들어진 것이 아니므로 기능이 제한될 수 있습니다. 이런 기능은 공식 릴리스 전에 사용할 수 있으므로 고객이 조기에 액세스하고 피드백을 제공할 수 있습니다.
노트
- 처음으로 웹용 Visual Studio Code 를 로드할 때, 이 기능에 필요한 확장을 설치하기 때문에 시간이 조금 걸릴 수 있습니다.
- 파일 만들기, 삭제 및 이름 바꾸기 작업은 지원되지 않습니다.
- 이 기능은 Power Platform Tools 웹 확장을 사용합니다. 웹 확장은 브라우저 샌드박스에 의해 제한되므로 일반 확장에 비해 제한 사항이 있습니다.
- Power Platform CLI는 지원되지 않습니다.
- Power Platform Tools 웹 확장 기능은 Power Pages 코드 편집 환경으로 제한됩니다.
- 이 기능은 GCC(Government Community Cloud), GCC High(Government Community Cloud), DoD(Department of Defense)에서 사용할 수 없습니다. 이 지역의 사용자는 포털 관리 앱을 사용하여 코드를 편집합니다. 자세한 내용은 포털 관리 앱에서 코드 편집을 참조하세요.
디자인 스튜디오에서 사용 가능한 편집 코드
Edit 드롭다운 메뉴에서 사이트 코드 편집 옵션을 선택하여 Power Pages 홈페이지에서 웹용 Visual Studio Code 사용하여 사이트 코드 편집을 시작할 수 있습니다.
디자인 스튜디오의 다음 영역에서 코드를 편집할 수도 있습니다.
- Pages 작업 영역에서 웹 페이지 코드 편집
- Pages 작업 영역의 헤더 템플릿 코드
- 스타일 작업 영역에서 사용자 지정 CSS 코드 편집
- 다단계 양식에 대한 사용자 지정 JavaScript 코드 편집
- 기본 양식에 대한 사용자 지정 JavaScript 코드 편집
- 목록에 대한 사용자 지정 JavaScript 편집
- 콘텐츠 조각 편집
- 웹 템플릿 편집
- 미디어 웹 파일(이미지)을 보고 다운로드합니다
- 텍스트 기반 웹 파일 편집(CSS, JavaScript, 기타)
이 영역을 사용하여 코드를 편집하는 방법을 살펴보겠습니다.
Pages 작업 영역에서 웹 페이지 코드 편집
Power Pages 디자인 스튜디오를 열면 페이지 메뉴 및 화면의 오른쪽 위 모서리에
Pages 작업 영역에서 코드 편집.
Pages 작업 영역의 헤더 템플릿 코드
사이트 헤더 편집을 선택한 다음 코드 편집을 선택하여 코드 편집기를 엽니다.
Pages 헤더에서 코드 편집.
스타일 작업 영역에서 사용자 지정 CSS 코드 편집
스타일 작업 영역으로 이동하여 사용 가능한 사용자 지정 CSS 코드 편집 메뉴를 선택하여 코드 편집기를 엽니다.
사용자 지정 CSS에서 코드 편집.
Power Pages 액션 보기
파일 탐색기 아래쪽에서 액세스할 수 있는 Power Pages 작업 보기를 사용하면 편집기 내에서 직접 Power Pages 사이트를 관리할 수 있습니다. 개발자가 편집기 내에서 일반적인 작업을 신속하게 수행할 수 있도록 하여 Power Pages 디자인 스튜디오로 전환할 필요가 줄어듭니다.
사용 가능한 작업
미리 보기 사이트
이 작업은 구성 캐시 를 지우고 VS Code에서 사이트를 엽니다. 개발자는 컨텍스트를 Power Pages 디자인 스튜디오로 전환할 필요 없이 사이트 코드의 변경 내용을 미리 확인하고 테스트할 수 있습니다.Power Pages 디자인 스튜디오에서 사용
코드를 변경한 후 이 작업을 사용하여 Power Pages 디자인 스튜디오로 이동합니다. 이는 코드 편집기에서 편집할 수 없는 인증 공급자, 웹 역할 및 기타 사이트 설정을 구성하는 데 유용합니다.VS Code Desktop에서 열기
VS Code Desktop이 설치된 경우 이 작업은 데스크톱 앱에서 사이트를 엽니다. 또한 사이트 다운로드를 트리거하여 코드를 로컬에서 사용할 수 있고 편집할 준비가 되도록 합니다.
충돌 알림 병합
다른 개발자와 공동 작업하는 경우 동일한 소스 코드에서 작업하는 경우가 있을 수 있습니다. 오래된 파일에 변경 사항을 저장하려고 하면 비교 또는 덮어쓰기 변경 사항에 대한 알림을 받게 됩니다.
코드를 비교하면 코드와 함께 현재 코드가 표시되고 기존 변경 사항으로 되돌리거나 각 변경 사항을 개별적으로 수락하거나 변경 사항을 사용하고 기존 콘텐츠를 덮어쓸 수 있습니다.
코드에서 충돌을 병합합니다.
최신 콘텐츠를 검토하고 코드를 병합 또는 덮어쓰거나 변경 사항을 삭제할 수 있습니다.
자습서: 웹용 Visual Studio Code 사용하여 사이트 코드 편집
이 자습서에서는 웹용 Visual Studio Code 사용하여 사이트 코드 편집을 안내합니다.
1단계: 웹용 Visual Studio Code 사용하여 사이트 코드 편집
오른쪽 위 모서리에서 코드 편집을 선택합니다.
확인 대화 상자에서 Visual Studio Code 열기를 선택합니다.
환경 자격 증명을 사용하여 Visual Studio Code 로그인합니다.
Power Platform Tools 웹 확장 프로그램이 초기화되고 웹 페이지 코드가 왼쪽 창에 로드될 때까지 기다립니다.
2단계: 콘텐츠 및 코드 업데이트
화면 왼쪽의 탐색기는 웹용 Visual Code를 사용하여 편집할 수 있는 각 웹 사이트 구성 메타데이터를 로드합니다.
웹 파일을 표시하는 제목 없는 작업 영역의 탐색기 메뉴.
각 메타데이터 파일을 변경하고 Ctrl+S를 눌러 변경 사항을 저장합니다.
디자인 스튜디오로 이동하여 동기화를 선택하여 현재 디자인 스튜디오 세션의 모든 업데이트를 가져옵니다.
Power Pages 사이트에서 변경 내용을 보려면 Preview를 선택합니다.
웹 또는 Visual Studio Code Desktop에 Visual Studio Code 사용
사용자는 외부 도구를 사용하지 않고도 웹용 Visual Studio Code 사용하여 페이지 편집 내용을 편집, 디버그 및 미리 볼 수 있습니다. Visual Studio Code Desktop은 모든 사이트 메타데이터를 편집하고 GitHub, 프레임워크 및 CI/CD(지속적인 통합/지속적인 개발) 프로세스와 통합하기 위한 다른 고급 기능을 제공합니다.
| 기능 | VS 웹용 Code | VS Code 데스크톱 |
|---|---|---|
| 새 웹 사이트 구성 메타데이터 레코드 생성 | 없음 | 웹 페이지, 페이지 템플릿, 웹 템플릿, 콘텐츠 조각 및 웹 파일로 제한됩니다. |
| 직접 사이트 편집 | 네 | 없음 |
| 사이트 메타데이터 편집 | 웹 페이지, 콘텐츠 조각, 기본 양식, 다단계 양식, 목록 및 웹 템플릿 편집으로 제한됩니다. | 모든 Power Pages 메타데이터 구성 |
| 사이트 미리 보기 | 예정 | 예정 |
| Power Platform CLI 지원 | 없음 | 네 |
| 고급 CPU 및 스토리지 바인딩 워크플로 - ReactJS 또는 기타 프레임워크 빌드 도구 지원 | 없음 | 네 |
| GitHub 코드 체크 인, 체크 아웃, 충돌 관리 및 병합과 같은 기능과 통합됩니다. | 없음 | 네 |
포털 관리 앱에서 코드 편집
노트
- 웹용 Visual Studio Code 사용하여 웹 사이트를 편집하는 것은 GCC(Government Community Cloud), GCC High(Government Community Cloud), DoD(Department of Defense)에서 지원되지 않습니다. 이러한 지역의 사용자는 포털 관리 앱을 사용하여 변경할 수 있습니다.
지역에서 웹용 Visual Studio Code 지원하지 않는 경우 명령 모음에서 코드 편집기 아이콘 </> 선택하면 Portal Management 앱 열립니다.
해당하는 웹 페이지, 기본 양식, 다단계 양식, 목록 또는 웹 템플릿 레코드로 이동하여 코드를 편집합니다.
| 유형 | 코드 위치 |
|---|---|
| 웹 페이지 | 웹 페이지 기록을 선택합니다. 지역화된 콘텐츠 섹션에서 웹 페이지 콘텐츠 레코드를 선택합니다. 페이지 사본은 일반 탭의 복사(HTML) 필드에서 편집할 수 있습니다.사용자 지정 JavaScript 및 사용자 지정 CSS 코드는 고급 탭에서 편집할 수 있습니다. |
| 기본 양식 | 기본 양식 레코드를 선택합니다. 추가 설정 탭에서 사용자 지정 JavaScript를 편집합니다. |
| 다단계 양식 | 다중 단계 양식 레코드를 선택합니다. |
| 목록 | 목록 레코드를 선택합니다. 옵션 탭에서 사용자 지정 JavaScript 를 편집 합니다 . |
| 웹 템플릿 | 웹 템플릿 레코드를 선택합니다. 일반 탭에서 원본을 편집합니다. |
레코드를 저장하고 웹 사이트를 미리 보고 코드를 테스트하십시오.