주요 콘텐츠로 건너뛰기
이 브라우저는 더 이상 지원되지 않습니다.
최신 기능, 보안 업데이트, 기술 지원을 이용하려면 Microsoft Edge로 업그레이드하세요.
웹용 Visual Studio Code를 사용한 코드 편집(프리뷰)
- 아티클
- 10/12/2022
- 읽는 데 8분 걸림
이 문서의 내용
[이 항목은 시험판 설명서이므로 변경될 수 있습니다.]
디자인 스튜디오에서 웹용 Visual Studio Code 를 사용하여 사이트 코드를 편집할 수 있습니다. 이 기능을 사용하면 단일 페이지의 콘텐츠, 사용자 지정 CSS 및 사용자 지정 JavaScript를 편집할 수 있습니다.
웹용 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), 정부 커뮤니티 클라우드(GCC High) 및 국방부(DoD)에서 사용할 수 없습니다. 이 지역의 사용자는 디자인 작업 영역의 코드 편집기를 사용하여 변경합니다. 추가 정보: 코드 편집기 사용
디자인 스튜디오에서 사용 가능한 편집 코드
코드 편집 기능을 통해 사용자는 다음 영역에서 코드를 편집할 수 있습니다.
- Pages 작업 영역에서 웹 페이지 코드 편집
- Pages 작업 영역의 헤더 템플릿 코드
- 스타일 작업 영역에서 사용자 지정 CSS 코드 편집
이 영역을 사용하여 코드를 편집하는 방법을 살펴보겠습니다.
Pages 작업 영역에서 웹 페이지 코드 편집
Power Pages 디자인 스튜디오를 열면 페이지 메뉴 1와 화면 2의 오른쪽 상단 모서리에 코드 편집 옵션이 표시됩니다.
Pages 작업 영역의 헤더 템플릿 코드
사이트 헤더를 선택한 다음 코드 편집 을 선택하여 코드 편집기를 엽니다.
스타일 작업 영역에서 사용자 지정 CSS 코드 편집
스타일 작업 영역 으로 이동하여 사용 가능한 사용자 지정 CSS 코드 편집 메뉴를 선택하여 코드 편집기를 엽니다.
자습서: 웹용 Visual Studio Code를 사용하여 사이트 코드 편집
이 자습서에서는 웹용 Visual Studio Code를 사용하여 사이트 코드를 편집하는 과정을 안내합니다.
1단계: Visual Studio Code를 사용하여 사이트 코드 편집
Power Pages 디자인 스튜디오에서 사이트 열기
오른쪽 상단 모서리에서 코드 편집 선택
확인 대화 상자에서 Visual Studio Code 열기 를 선택합니다.
환경 자격 증명을 사용하여 Visual Studio Code에 로그인합니다.
Power Platform Tools 웹 확장 프로그램이 초기화되고 웹 페이지 코드가 왼쪽 창에 로드될 때까지 기다립니다.
2단계: 웹페이지 코드 업데이트
화면 왼쪽의 탐색기는 웹 페이지 복사 내용과 함께 각 사용자 지정 CSS 및 사용자 지정 JS 파일을 로드합니다.
각 파일을 변경하고 Ctrl+S 를 눌러 변경 사항을 저장합니다.
디자인 스튜디오로 이동하여 동기화 를 선택하여 현재 디자인 스튜디오 세션의 모든 업데이트를 가져옵니다.
Power Pages 사이트에서 변경 사항을 보려면 미리 보기 를 선택하십시오.
웹용 Visual Studio Code 또는 Visual Studio Code 데스크톱 사용
사용자는 외부 도구를 사용할 필요 없이 웹용 Visual Studio Code를 사용하여 페이지 편집 내용을 편집, 디버그 및 미리 볼 수 있습니다. 데스크톱용 Visual Studio Code는 모든 사이트 메타데이터를 편집하고 GitHub, 프레임워크 및 CI/CD(지속적 통합/지속적 개발) 프로세스와 통합하기 위한 기타 고급 기능을 제공합니다.
| 직접 사이트 편집 | 네 | 없음 |
| 사이트 메타데이터 편집 | 사용자 지정 CSS 및 웹 페이지로 제한됨 | 모든 Power Pages 구성 엔터티 |
| 사이트 미리 보기 | 예정 | 예정 |
| Power Platform CLI 지원 | 없음 | 네 |
| 고급 CPU 및 스토리지 바운드 워크플로 - ReactJS 또는 기타 프레임워크 빌드 도구 지원 | 없음 | 네 |
| 코드 체크인, 체크아웃, 충돌 관리 및 병합과 같은 기능과 GitHub 통합. | 없음 | 네 |
코드 편집기 사용
참고
- 웹용 Visual Studio Code를 사용하여 웹사이트를 편집하는 것은 GCC(정부 커뮤니티 클라우드), GCC High(정부 커뮤니티 클라우드) 및 국방부(DoD)에서 지원되지 않습니다. 이 지역의 사용자는 디자인 스튜디오의 코드 편집기를 사용하여 변경할 수 있습니다.
- Visual Studio Code 편집기를 지원하는 지역에는 디자인 스튜디오 코드 편집기가 표시되지 않습니다.
캔버스에서 페이지의 소스 코드를 보려면 명령 모음에서 코드 편집기 아이콘 </>을 선택합니다.
소스 코드는 화면 하단의 코드 편집기 창에 표시됩니다. 이전에 변경한 사항은 소스 코드에서 업데이트됩니다. 변경하려면 소스 코드를 업데이트한 다음 저장 을 선택합니다. 변경 사항이 캔버스에 반영됩니다.
코드 편집기는 하단에 도킹, 오른쪽에 도킹 또는 전체 화면 편집 모드의 세 가지 도킹 옵션을 지원합니다.
코드 편집기 캔버스는 HTML 편집을 지원합니다. JavaScript 또는 사용자 지정 CSS을 편집하려면 CSS 및 JS 편집 을 선택하세요. 그러면 포털 관리 앱으로 이동합니다. 거기에서 고급 탭을 선택하여 JavaScript 및 CSS 섹션에서 원하는 대로 수정합니다.
참조 항목
- Visual Studio Code 및 Microsoft Power Platform CLI 사용