[javascript] Parcel에서 전체화면 모드를 구현하는 방법은?

22 Nov 2023

javascript

HTML 파일 생성하기: Parcel을 사용하기 위해 프로젝트 디렉토리 안에 index.html 파일을 생성합니다. 다음과 같이 기본 HTML 구조를 작성합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>전체화면 모드</title>
  </head>
  <body>
    <h1>전체화면 모드</h1>
    <button id="fullscreen-button">전체화면으로 보기</button>

    <script src="./index.js"></script>
  </body>
</html>

CSS 파일 생성하기 (선택 사항): 필요에 따라 CSS 파일을 생성하여 전체화면 모드에 대한 스타일을 지정할 수 있습니다. 프로젝트 디렉토리에 style.css 파일을 생성하고 원하는 스타일을 작성합니다.
```
body {
  background-color: black;
  color: white;
}
```

JavaScript 파일 생성하기: 프로젝트 디렉토리에 index.js 파일을 생성하고 아래 코드를 작성합니다.

const fullscreenButton = document.getElementById('fullscreen-button');

fullscreenButton.addEventListener('click', toggleFullscreen);

function toggleFullscreen() {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    document.documentElement.requestFullscreen();
  }
}

프로젝트 빌드하기: 터미널에서 다음 명령어를 실행하여 Parcel을 사용하여 프로젝트를 빌드합니다.
```
npx parcel build index.html
```
빌드가 완료되면 “dist” 폴더에 번들된 파일이 생성됩니다.
애플리케이션 실행하기: index.html 파일을 브라우저에서 열거나, 로컬 서버를 실행하여 전체화면 모드를 테스트할 수 있습니다.

위 예시 코드에서는 “전체화면으로 보기” 버튼을 클릭하면 현재 페이지가 전체화면 모드로 전환되며, 이미 전체화면 모드인 경우 전체화면 모드가 해제됩니다.

Parcel을 사용하여 전체화면 모드를 구현하는 방법을 알아보았습니다. 필요한 경우 자세한 가이드는 Parcel 공식 문서를 참조할 수 있습니다.