728x90
CDN
Content Delivery Network, 웹에서 사용되는 다양한 컨텐츠(리소스)를 저장하여 제공하는 시스템
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>이를 html에 추가해주면, React, ReactDOM모두 사용할 수 있다.
개발용으로 적합하지만, 배포용 버전에는 적합하지 않다.
UNPKG
UNPKG
UNPKGunpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:unpkg.com/:package@:version/:file Examples Using a fixed version: You may also use a semver range or a
unpkg.com
npm으로 할 수있는 모든 것들을 CDN 서비스로 제공.
Babel
Javascript 컴파일러, Javascript로 결과물을 만들어주는 컴파일러이다.
https://unpkg.com/@babel/standalone/babel.min.js.위를 통해 Babel을 사용할 수 있다.
example
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js."></script>
<div id="root">
</div>
<script type"text/babel">
const rootElement = document.getElementByID("root");
const element = React.createElement(
"h1",
{
className: "title"
},
["Hello,", "World!"]
);
ReactDOM.render(element, rootElement);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js."></script>
<div id="root">
</div>
<script type"text/babel">
const rootElement = document.getElementByID("root");
const element = <h1 className="title">Hello, world!</h1>;
ReactDOM.render(element, rootElement);
</script>
</body>
</html>위 코드를 아래와 같이 사용할 수 있다.
728x90
300x250
