웹 팩
실제 개발을 하다보면 서비스에는 수 천 ~ 수 만 개의 컴포넌트들이 존재하게 된다. 각각의 코드들을 일렬로 나열한다고 한다면 코드의 길이는 수십 수백만 줄이 될 것이다. 그렇다면 현실적으로 유지보수는 불가능에 가깝게 된다.
이를 막기 위해 여러 개의 스크립트를 나누고 각각 스크립트를 이식하는 방식을 사용할 수 있을 것이다. 하지만 그렇다면 각 스크립트마다 사용하는 코드들의 중복 문제를 피하기 어려울 것이다.
웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 웹 팩을 코드를 모듈화하고 이를 통해서 자바스크립트의 중복을 방지하고, 유지보수를 용이하게 할 수 있다.
node.js
웹 팩을 사용하기 위해서는 node를 설치해야 한다. 설치 이후 개발할 폴더에서 터미널을 실행한다
npm init : node를 시작하고 필요 정보를 기입한다.
npm i react react-dom : react와 react-dom을 설치한다.
npm i -D webpack webpack-cli : 개발용으로만 사용한 웹 팩을 설치한다
설정과 모듈
폴터에 webpack.config.js를 생성해준다.
module.exports = {
}
client.jsx파일을 생성해준다.
jsx확장자는 jsx문법을 담은 리액트 전용 확장자라고 생각하면 된다.
const React = require('react');
const ReactDom = require('react-dom');
---------------------------------------
html코드
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>이와같이 작성해주면 코드에서 더 이상 script파일로 길게 react와 babel등을 불러내지 않아도 된다. 이제 npm을 통해 불러온다.
<script src="./dist/app.js"></script>이와 같이 설정해주면 node를 통해서 react를 사용할 세팅을 하게 된다.
create react app이라는 application이 있다. 이는 react 설정을 도와주는 편리한 도구지만 지금은 설정도 공부해야 하므로 나중에 공부하기로 한다.
