<body>
<div id="root"></div> ----------------------------------- ➋
<script type="module" src="/src/main.tsx"></script> ----- ➌
</body>
</html>
➊ HTML 문서의 기본 언어 설정을 의미합니다. 기본값은 영어(en)이지만, 한국어 프로젝트에서는 "ko"로 바꾸는 것이 좋습니다.
➋ 해당 <div> 요소는 리액트 애플리케이션이 화면에 출력되는 위치, 즉 루트 요소를 의미합니다. 관례적으로 id="root"를 사용하지만, 다른 이름을 써도 동작하는 데 문제없습니다. 단, main.tsx에서 동일한 ID로 연결해야 합니다.
➌ 리액트 애플리케이션의 시작점인 main.tsx 파일을 불러오는 코드입니다. type="module" 속성은 해당 파일 내부에서 모듈 기능(import, export)을 사용할 수 있게 웹 브라우저에 알려주는 역할을 합니다. 이 스크립트를 통해 리액트 컴포넌트, 상태, 라우터 등 애플리케이션 전체가 실행됩니다.