초기화가 완료된 리엑트의 src/App.js는 다음과 같다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
|
cs |
위 코드에서 import를 하는 부분은 원래 브라우저에는 없던 기능이다. 따라서 브라우저는 이런 기능을 사용하기 위해서 웹팩, Rarcel등의 번들러를 사용한다. 번들러를 사용하면 import로 불러온 모듈을 모두 합쳐서 하나의 파일을 생성한다. 또 최적화 과정에서 여러개의 파일로 분리 될 수 있다.
2017년 부터 웹브라우저에서도 import사용이 가능 하지만 이는 단순히 다른 경로에 있는 js를 불러오는 용도만 있을 뿐 프로젝트 번들링과는 차이가 존재한다. 웹책을 사용하면 SVG, CSS파일을 불러와 사용할 수 있고 이는 file loader가 담당한다.
1. css-loader: CSS파일을 불러올 수 있게 한다
2. file-loader: 웹 폰트, 미디어 파일 등을 불러온다
3. babel-loader: js파일 들을 불러오면서 최신 js 문법으로 작성된 코드를 ES5문법으로 변환한다.
*최신 js문법을 ES5로 변환하는 이유는 구형 브라우저가 최신 js문법을 지원하지 않기 때문이다. 또 한 JSX가 표준 js 문법이 아니기 때 문에 이 역시 ES5로 변환이 필요 하다.
웹팩의 로더는 원래 직접 설치해야 하지만 create-react-app이 이 과정을 대신해 준다.