Q: reveal.js 프레젠테이션을 비디오(MP4/WebM)로 내보내는 방법?

Reveal.js는 기본적으로 비디오로 내보내기를 지원하지 않으며, ccapture.js는 에 의존하기 때문에 작동하지 않습니다(Reveal.js는 를 사용하지 않음). 권장되는 해결 방법은 운영 체제의 화면 녹화 도구(예: OBS Studio, macOS QuickTime, Windows Game Bar)를 사용하여 프레젠테이션이 자동 재생되는 동안 캡처하는 것입니다.

Question 1

왜 Decktape가 reveal.js v6 슬라이드를 PDF로 내보낼 때 'Cannot read properties of null (reading 'removeChild')' 오류로 충돌하나요?

Accepted Answer

이는 reveal.js v6의 알려진 버그로, `clearMediaPlaybackErrors()`가 무조건 `this.mediaPlayButton.remove()`를 호출하지만, 미디어가 없으면 `parentNode`가 null이 되어 `TypeError`가 발생합니다. 수정 사항(커밋 be6d7f8)은 null 검사를 추가합니다: `if (this.mediaPlayButton && this.mediaPlayButton.parentNode) this.mediaPlayButton.remove();`. 이 패치가 포함된 최신 reveal.js 버전으로 업그레이드하세요. 임시 해결 방법으로는 이전 reveal.js 버전을 사용하거나 슬라이드 변경 이벤트 대신 Reveal API를 통해 데크를 탐색하는 html2pdf-slides 같은 내보내기 도구로 전환하세요.

Question 2

Vite 8과 React 19를 사용할 때 @revealjs/react에서 와 같은 fragment 주석이 무시되는 이유는 무엇인가요?

Accepted Answer

@revealjs/react를 버전 0.2.1 이상으로 업그레이드하세요. 이 패키지는 Vite 8로 재빌드되어 useLayoutEffect의 실행 순서 문제를 수정했습니다. 이전에는 실행 순서 문제로 인해 fragment attributes가 너무 늦게 적용되었습니다. 대안 해결 방법: React hooks를 우회하고 data-element-attributes와 함께 reveal.js의 기본 markdown 플러그인을 사용하십시오.

Question 3

reveal.js가 Internet Explorer 8을 지원하나요?

Accepted Answer

아니요, reveal.js는 더 이상 Internet Explorer 8을 지원하지 않습니다. 이슈 #1303의 논의에 따라 브라우저 지원 문서가 업데이트되어 IE8 지원이 중단되었습니다. 사용자는 스크롤 불가 페이지 및 JavaScript 오류와 같은 문제를 피하기 위해 최신 브라우저(IE11+, Chrome, Firefox 등)를 사용해야 합니다.

Question 4

reveal.js 프레젠테이션을 비디오(MP4/WebM)로 내보내는 방법?

Accepted Answer

Reveal.js는 기본적으로 비디오로 내보내기를 지원하지 않으며, ccapture.js는

Question 5

npm을 사용하여 기존 React 프로젝트에 reveal.js를 통합하는 방법은 무엇인가요?

Accepted Answer

npm을 통해 reveal.js를 설치한 후(`npm install reveal.js`), 프레젠테이션을 초기화하는 React 컴포넌트를 생성합니다. 컴포넌트 파일에서 Reveal과 해당 스타일을 불러온 다음, `useEffect` 훅을 사용하여 컨테이너 div에서 초기화합니다. 예를 들어: ```jsx import React, { useEffect, useRef } from 'react'; import Reveal from 'reveal.js'; import 'reveal.js/dist/reveal.css'; import 'reveal.js/dist/theme/black.css'; const Presentation = () => { const deckDivRef = useRef(null); useEffect(() => { if (deckDivRef.current) { const deck = new Reveal(deckDivRef.current, { embedded: true, // other config options }); deck.initialize(); return () => deck.destroy(); } }, []); return (

Slide 1

Slide 2

); }; export default Presentation; ``` 또는 사용 가능하다면 `react-reveal-slides` 같은 커뮤니티 래퍼를 사용할 수도 있습니다. 추가 HTML 파일이 필요하지 않으며, 슬라이드를 JSX에 직접 포함시키면 됩니다.

reveal.js

주요 기능

할 수 없는 것

사용 사례

태그

시작하기

유사한 프로젝트