[React #5] 바벨 / 웹팩

 

 

 

<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 src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

 

 

 

 

CDN 링크 – React

CDN은 클라이언트와 웹 사이트 서버 간에 중간 서버를 두어 효율성을 높인다. 이러한 CDN 서버는 클라이언트-서버 통신의 일부를 관리 한다. 웹 서버에 대한 웹 트래픽을 줄이고, 대역폭 소비를 줄이며, 애플리케이션의 사용자 환경을 개선

 

 

 

 

 

 

 

Babel · The compiler for next generation JavaScript

#바벨 Babel 은 JSX를 실습할 수 있는 환경을 제공한다. 왼쪽 텍스트 필드에 JSX 코드를 입력하면, 오른쪽 텍스트 필드에 Virtual DOM 을 구성하는 JavaScriot 코드가 출력되는 것을 확인할 수 있다.

 

https://babeljs.io/

>> 순수하게 실행할 수 있는 자바스크립트로 변환

 

JSX 소개 – React

 

 

 

 

webpack

#웹팩 webpack

모듈 번들러(Mudule Bundler)

모듈 번들러란 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리

코딩할 때 편의를 위해 여러 개의 모듈로 나눠서 작업

리액트에서 웹팩을 디폴트로 제공 (모듈처럼 나눠서 작업할 수 있다)