Azure Static Web Apps를 사용하면 런타임 시 head 또는 body 요소에 사용자 지정 코드를 삽입할 수 있습니다. 이러한 코드 조각을 코드 조각이라고 합니다.
코드 조각은 핵심 코드베이스를 수정하지 않고도 사이트의 모든 페이지에 코드를 한 곳에 추가할 수 있는 유연성을 제공합니다.
코드 조각의 일반적인 사용 사례는 다음과 같습니다.
- 분석 스크립트
- 일반 스크립트
- 전역 UI 요소
비고
일부 프런트-엔드 프레임워크는 코드 조각을 덮어쓸 수 있습니다. 프로덕션 환경에 적용하기 전에 코드 조각을 테스트합니다.
코드 조각 추가
Azure Portal에서 정적 웹앱으로 이동합니다.
설정 메뉴에서 코드 조각을 선택합니다.
추가 단추를 선택합니다.
코드 조각 창에 다음 설정을 입력합니다.
설정 가치 코멘트 위치 코드를 삽입할 HTML 페이지 요소를 선택합니다. 이름 코드 조각 이름을 입력합니다. 삽입 위치 선택한 요소에 코드를 추가 하거나 추가할 지 여부를 선택합니다. 앞에 추가 하면 요소의 열린 태그 바로 뒤에 코드가 나타납니다. 추가 는 코드가 요소의 닫기 태그 바로 앞에 표시 된다는 것을 의미합니다. 환경 대상으로 지정할 환경을 선택합니다. 환경 선택을 선택하는 경우 다른 환경에서 대상으로 선택할 수 있습니다. 텍스트 상자에 코드를 입력합니다.
확인을 선택하여 창을 닫습니다.
저장을 선택하여 변경 내용을 커밋합니다.