유데미, 스나이퍼팩토리,10주완성 프로젝트 캠프, 프론트엔드(리액트/react) - React CDN

YoungWook·2023년 6월 22일

React 스나이퍼팩토리 웅진씽크빅 유데미 프로젝트캠프

유데미, 스나이퍼팩토리 프로젝트 캠프

목록 보기

6/8

☁️ CDN 이란 ?

🧐 CDN (Contents Delievery Network)

분산되어 있는 서버 그룹에서 특정 Contents를 빠르게 전달 할 수 있는 서비스
즉, 하나의 서버에서 가져오지 않고, 미리 인터넷 서버와 가까운 위치에 파일을 여러 서버에 미리 복사해두고 이를 가져가 사용하는 방식
HTML / JAVASCRIPT 파일, CSS 등을 전송할 수 있다.

✏️ 사용법

React CDN 링크 추가하기.

<title> 태그 밑에 아래 코드를 붙여 넣는다.

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

react, react-dom 모듈

BABEL 링크 추가.
- 마찬가지로 <title> 태그 밑에 아래 코드를 붙여 넣는다.
```
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
```
- 바벨(babel) 모듈
- 🧐 바벨이란 ?
  - 최신 ES6버전을 구 버전인 ES5로 변환해준다.
  - 쉽게말해 순수하게 실행할 수 있는 자바스크립트로 변환해 주는 것이다.
    
    https://babeljs.io/
JSX문법으로 HTML태그에 추가 후 생성.
- <div id="root"></div> 안에 만든 것을 넣어줘야한다.

⛏️ 실습

간단하게 버튼 클릭 시 배경화면이 랜덤으로 바뀌는 페이지 실습

<!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 crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    const App = () => {
      const [bg, setBg] = React.useState('');
      const images = [
        'https://i.pinimg.com/564x/a6/55/f5/a655f51a8ad5243c87bf4c03c6d9fd2b.jpg',
        'https://i.pinimg.com/564x/57/e3/db/57e3dba80aac4db56f1ae8d3a9129a85.jpg',
        'https://i.pinimg.com/736x/47/c8/85/47c885fc86915be61c37aa76960da502.jpg',
        'https://i.pinimg.com/564x/0f/84/b2/0f84b27d63c19878d95fb34cf29b6059.jpg',
        'https://i.pinimg.com/564x/08/28/6a/08286a47f3694a58e1f671899f5e77a7.jpg',
        'https://i.pinimg.com/564x/c5/77/6c/c5776ca92518590fa0b67c75e327cc78.jpg',
        'https://i.pinimg.com/564x/82/53/8e/82538e03f0c4674ac59d67308677411f.jpg'
      ]
      const handleBgChange = () => {
        const num = Math.floor(Math.random() * (images.length - 1));
        const img = images[num];

        setBg(img);
      }
      React.useEffect(() => {
        setBg(images[0]);
      }, [])
      return (
        <div>
          <img src={bg} alt="배경" width='500px' height='500px' onClick={handleBgChange} />
        </div>
      )
    }
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>
</html>