"Mantis React Admin Dashboard"라는 React 애플리케이션의 기본 템플릿
Vite를 사용하여 빌드된 React 애플리케이션을 위한 구조
- html의 head에는 title또는 css의 링크, 메타 데이터를 정의하는 부분이다.
*메타데이터 : 데이터를 설명하는 데이터
<meta charset="utf-8" />charset : 문서에서 허용하는 문자 집합 encoding에 대해 표시
<link rel="icon" href="/favicon.svg" />웹 사이트의 파비콘을 지정해준다.
*favicon : 웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지
<meta name="viewport" content="width=device-width, initial-scale=1" />반응형 웹 디자인을 위한 뷰포트 설정한다.
width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정한다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 준다.
initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 한다. 0~10 사이의 값을 가진다.
*viewport : 뷰포트 meta 태그를 사용하면 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기를 조절할 수 있다.
<meta name="theme-color" content="#000000" />브라우저의 툴바 등 UI 요소의 색상을 설정한다.
<meta name="description" content="Mantis is react free admin template build using Vite" />웹페이지의 설명을 설정한다.
<link rel="apple-touch-icon" href="/logo192.png" />애플 터치 아이콘을 설정한다.
애플 버전의 favicon으로 생각하면 된다.
<title>Mantis React Admin Dashboard</title>브라우저 탭에 표시될 문서의 제목을 설정한다.
<script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>오래된 사파리 브라우저에서 리사이즈 이벤트를 지원하기 위한 폴리필을 포함한다.
*polyfill : 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트
- html의 body는 문서의 본문 콘텐츠를 포함한다.
<noscript>You need to enable JavaScript to run this app.</noscript>사용자가 자바스크립트를 비활성화한 경우 경고 메시지를 표시한다.
<div id="root"></div>React 애플리케이션이 렌더링될 루트 DOM 요소이다.
<script type="module" src="/src/index.jsx"></script>모듈형 자바스크립트 파일 /src/index.jsx를 포함하여 React 애플리케이션을 실행한다.
(모듈형 자바스크립트 설명 : https://jake-seo-dev.tistory.com/402)
