실제 프로젝트를 진행할때, cdn을 넣지않고
react create 해서 사용한다.
😎 create-react-app 이란?
react를 활용해 개발을 하기 위한
필수 모듈인 react, react-dom, react-scripts
외부 모듈 webpack, babel
기본 구조를 알기위해 CDN을 넣어 구조 생성
React CDN =>
https://ko.reactjs.org/docs/cdn-links.html#gatsby-focus-wrapper
바벨 CDN =>
https://babeljs.io/docs/en/babel-standalone
CDN 을 헤더 안에 붙여넣어주면 된다.
- 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- React CDN -->
<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>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"> 화면에 보이는 영역</div>
<script type="text/babel">
const el = React.createElement('h1',{},'제목1입니다.');
const dom =document.querySelector('#root');
ReactDOM.render(el,dom);
//render 화면에 그리기
</script>
</body>
</html>-> el이라는 태그를 dom에 끼워넣는다 라고 생각하면 된다.
😎 바벨
최신 ES6버전을 구 버전인 ES5로 변환해준다.
순수하게 실행할수 있는 자바스크립트로 변환해주는것
😎 웹팩
모듈 번들러(Module Bundler)
모듈 번들러란 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리
코딩할 때 편의를 위해 여러 개의 모듈로 나눠서 작업
리액트에서 웹팩을 디폴트로 제공 ( 모듈처럼 나눠서 작업할수있게 )
모듈 번들링, html에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식
728x90
반응형
'인강\개인공부 > React 강의' 카테고리의 다른 글
| [React] 리액트 기본 규칙, JSX 기본 규칙 (0) | 2021.11.23 |
|---|---|
| [React] 컴포넌트란? 함수형/클래스형 (0) | 2021.11.23 |
| [React] 컴포넌트 구조 - JSX영역/함수영역/Fragment 사용법 (0) | 2021.11.22 |
| [React] 프로젝트 생성 : CRA(Create-React-App) (0) | 2021.11.18 |
| [React] 실전 리액트 들어가기 전 , 기본 javascript 문법 es6(ecmascript) (0) | 2021.11.15 |
댓글