이 섹션에서는 앱에서 사용자 정의 헤더/본문 문자열을 관리하는 방법에 대해 다룹니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
리소스 문제로 현재 번역은 중단한 상태입니다. 저를 대신해 번역을 리드하고 싶은 분이 있다면 연락 주세요!
What is a cusotm header of body for
Custom headers
헤더의 내용은 페이지의 내용보다 먼저 로드되며 페이지가 로드되고 렌더링되기 전에 로드해야 하는 내용에 유용합니다.
사용자 정의 헤더는 앱의 모든 페이지의 <head> 섹션에 추가할 수 있는 HTML 콘텐츠를 나타냅니다. <head> 태그 내부의 내용은 페이지 자체에 나타나지 않지만 브라우저에 구체적인 지시를 보내며 다음과 같은 내용을 포함할 수 있습니다.
1.
메타 태그: 모든 페이지에 메타 태그를 추가해야 하는 경우(이미 Bubble에 내장된 태그 외에), 여기에 배치할 수 있습니다.
2.
외부 CSS에 대한 링크: 외부 스타일시트는 일반적으로 페이지 콘텐츠가 로드되기 전에 로드되도록 헤더에 연결됩니다.
3.
외부 JavaScript 라이브러리에 대한 링크: JavaScript는 헤더 또는 본문에 로드될 수 있지만 페이지 콘텐츠가 로드되기 전에 로드되어야 하는 특정 라이브러리 및 스크립트는 헤더에 배치됩니다.
4.
서드파티 통합: 일부 서드파티 통합에는 코드 스니펫을 헤더에 배치해야 하는 경우가 있습니다. 서드파티 문서에서는 일반적으로 코드를 배치해야 할 위치를 안내합니다.
Custom body
본문의 내용은 페이지가 렌더링되는 동안 로드됩니다. 페이지가 표시되기 전에 로드할 필요가 없는 요소 및 콘텐츠와 상호 작용하는 코드에 유용합니다.
사용자 정의 본문은 HTML 문서의 <body> 태그 내에 배치된 콘텐츠를 나타냅니다. 이곳은 웹페이지 자체에 표시되는 콘텐츠(Design 탭에서 페이지에 배치하는 모든 요소 포함)가 위치하는 곳입니다. 사용자 정의 본문을 다음과 같은 경우에 사용할 수 있습니다.
1.
사용자 정의 HTML 요소 임베딩: 모든 페이지에 존재해야 하는 특수한 콘텐츠에 사용됩니다.
2.
JavaScript 임베딩: 스크립트가 페이지 콘텐츠에 의존하거나 콘텐츠가 로드된 후 실행되어야 하는 경우, 일반적으로 본문 섹션의 끝 부근에 배치됩니다.
3.
서드파티 통합: 일부 서드파티 통합은 본문에 배치됩니다.
예시에서 볼 수 있듯이 어떤 종류의 콘텐츠가 어디에 배치되는지에는 약간의 중첩이 있습니다. 서드파티 코드 스니펫을 사용하는 경우 해당 서드파티의 문서를 확인하여 올바른 위치에 구현되었는지 확인하는 것이 좋습니다.
