The HTML presentation framework | reveal.js
Documentation and demos for the open source reveal.js HTML presentation framework.
revealjs.com
개발자에게 ppt(발표자료) 제작 프로그램 (키노트, 파워포인트)로 발표자료를 만드는 작업은 여간 고된 일이 아닙니다.
만약 발표자료를 css와 html, 때때로 js를 활용하여 만든다면 어떨까요?
특히 개발자들이 문서 작성 시애용하는 markdown을 이용하면, 더 쉽게 문서를 만들 수 있을 것입니다.
reveal.js를 이용해 웹 기술로 간단한 발표자료를 만들어 보겠습니다.
기본 설정하기
해당 튜토리얼은 코드 샌드박스에서 실행하기 위해 공식문서와 다르게 진행합니다.
(공식문서에 튜토리얼이 없긴 합니다.)
reveal.js의 경우, 웹 서버에서 동작하는 모습을 보는게 좋습니다.
따라서 codesandbox.io 를 이용하는 것을 추천합니다.
물론 오프라인에서도 동일하게 진행하실 수 있습니다.
회원 가입 후 Vanila 설정을 눌러줍니다.
1. revealjs 라이브러리를 설치 후 index.js를 다음과 같이 바꿉니다.
기본 플러그인과 디폴트 설정을 import합니다.
import Reveal from "reveal.js";
import Markdown from "reveal.js/plugin/markdown/markdown.esm.js";
import RevealHighlight from "reveal.js/plugin/highlight/highlight.esm.js";
import Notes from "reveal.js/plugin/notes/notes.esm.js";
import Math from "reveal.js/plugin/math/math.esm.js";
let deck = new Reveal({
plugins: [Markdown, RevealHighlight, Notes, Math]
});
deck.initialize({
controls: true,
progress: true,
history: true,
center: true
});2. index.html을 다음과 같이 바꿉니다.
공식문서 + reveal.js 예제를 분석해서 알아낸 활용 방법입니다.
아래 주석의 ---, --의 의미는 마크다운에서 설명하겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css" />
<link
rel="stylesheet"
href="/node_modules/reveal.js/dist/theme/black.css"
/>
<link
rel="stylesheet"
href="/node_modules/reveal.js/plugin/highlight/monokai.css"
/>
</head>
<body>
<script src="src/index.js"></script>
<div id="app" class="reveal">
<div class="slides">
<!-- Use external markdown resource, separate slides by three ---; vertical slides by two -- -->
<section
data-markdown="markdown.md"
data-separator="^\n---\n$"
data-separator-vertical="^\n--\n$"
></section>
</div>
</div>
</body>
</html>
위 마크업에 보면 아래 세 가지 속성이 있습니다.
첫번째는 우리가 사용할 마크다운 파일명 (동일한 디렉터리에 위치)
---는 다음 페이지로 넘어가기.
--는 서브 페이지 보여주기입니다.
앞으로 해당 기능을 사용하며 확인해 보겠습니다.
data-markdown="markdown.md"
data-separator="^\n---\n$"
data-separator-vertical="^\n--\n$"markdown.md 파일을 만들어 아래와 같이 입력합니다.
화면이 안나오면 새로고침을 반복합니다.
# reveal.js Demo
---
## 목차
- 잠자기
- 드러눕기
- 밥먹기
--
- ~칼퇴하기~
---
다른 마크다운 문법도 사용 가능합니다만, 특정한 경우 레이아웃을 조절해 주어야 할 필요가 생깁니다.
## 코드 리뷰하기
선언적으로 반복문 표현하기
```typescript[1-2]
const range = (size: number, startAt: number = 0): number[] =>
[...Array(size).keys()].map((i) => i + startAt);
```
- for문 내의 명시적인 순회 방법을 숨긴다.
- how to do (X)
- what to do (O)
웹 기술일 뿐입니다!
css로 레이아웃을 잡으면 됩니다.
<div class="container" style="display:flex; align-items:start">
<div class="col" style="width:40%" >
<img src="./react.png" style="width:100%" >
</div>
<div class="col" style="width:60%">
- 페이스 북에서 개발한 UI 라이브러리
- Virtual DOM 사용
- JSX 문법 사용
- `Hooks`로 클래스의 상태관리를 함수로 분리
</div>
</div>
지금까지 reveal.js를 이용해 간단한 장표를 만들 수 있는 방법을 알아보았습니다.
reveal.js는 웹 서버에서 동작하기 때문에 api 호출 등으로 외부에서 조작이 가능하며,
전체 페이지 보기 기능, 발표자 화면 보기 기능 등 제가 설명하지 않은 기능들도 상당히 많습니다.
해당 라이브러리는 오픈소스지만, SaaS 형태로도 제공됩니다.
마치며
최근에 마이크로소프트에서 babylon.js 5.0 라이브러리를 공개했습니다.
js로 메타버스를 개발하기 위한 라이브러리라 합니다.
Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best
Babylon.js is one of the world's leading WebGL-based graphics engines. From a new visual scene inspector, best-in-class physically-based rendering, countless performance optimizations, and much more, Babylon.js brings powerful, beautiful, simple, and open
www.babylonjs.com
웹 기술을 통해 할 수 있는 일이 무궁무진해 지고 있습니다. 신나지 않을 수가 없네요.
재밌게 읽으셨다면 buy me a coffee!
https://www.buymeacoffee.com/hyeoki
hyeoki is creating sw
Hello. I'm poor SW engineer in south korea. I will work hard with the power of the coffee you bought. thank you.
www.buymeacoffee.com
'FrontEnd' 카테고리의 다른 글
| resizable table(row, col) with React (0) | 2022.05.19 |
|---|---|
| Recoil 실전 패턴 : 상태의 계층화와 분리 (0) | 2022.05.18 |
| [Recoil]Jotai의 구현으로 알아보는 atom 종속성 추적 (2) | 2022.05.15 |
| Recoil Pattern : Selector Composition (셀렉터 조합하기) (0) | 2022.05.15 |
| Recoil 패턴 : Intermediate Selectors (중간 선택자로 리렌더링 최적화) (0) | 2022.05.15 |
