그동안 우리는 기본적으로 header 에 <script> 를 추가하거나 혹은 모듈로 import 를 했었다. 하지만 React 에선 하지 않아도 되는데 이는 리액트의 빌드 프로세스 덕분이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src=""></script>
<script src="" defer></script>
</head>
<body>
<script src=""></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
React 기본 index.html
양식을 봐도 import 혹은 <script> 가 따로 명시되어있지 않은 것을 확인할 수 있는데, 이는 build 하는 과정에 물론 React 코드가 그대로 실행되는 것이 아닌, 트랜스 파일링을 거친다. 그 후 dist 폴더를 확인하면 script 태그가 최종적으로는 추가된 것을 확인할 수 있다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<script type="module" crossorigin src="/assets/index-CbpcZO_M.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-n_ryQ3BS.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
그럼 왜 react 는 빌드 프로세스를 사용할까?
Raw, unprocessed React code won't execute in the browser
날것의, 즉 빌드 우리가 JSX 문법으로 작성한, 프로세스를 거치지 않은 날것의 React 코드는 브라우저에서 처리되지 않기 때문이다.
the code would not be optimized for production(e.g., not mean minified)
이는 웹사이트 방문자가 다운로드해야하는 코드의 양을 최대한 줄일 수 있도록 최적화한 코드이다.
여기서 create-reate-app, vite 와 같은 빌드 도구에서 이 빌드 프로세스 기능을 제공한다. 따라서 별도의 설정을 할 필요는 없다. 이러한 빌드 프로세스는 Node.js 가 필요하기 때문에 설치한 것이다.