Create React App, Webpack

출처: https://create-react-app.dev/

Create React App 이란?

create-react-app 은 페이스북에서 만든 react 웹 개발용 boilerplate입니다. react는 es6 버전의 javascript로 작성하는 것이 일반화되어있기 때문에 webpack이라는 모듈 번들러로 컴파일 및 빌드 하는 것이 필수라 이 환경을 세팅해 줘야 합니다. 직접 모든 개발 환경을 설정하지 않아도 페이스북이라는 거대한 기업에서 지속적으로 업데이트를 해주고 있고 쉽게 프로젝트 기본 환경을 구축할 수 있어서 많은 사람들이 사용하고 있습니다. 

 

설치

- js

yarn create react-app my-app

- typescript

yarn create react-app my-app --template typescript

 

출처: https://webpack.js.org/

Webpack 이란?

웹팩(webpack) 은 웹에서 사용되는 모든 자원(assets) 을 번들링 해주는 도구입니다. 번들링의 개념은 여러개 의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정을 의미합니다. 웹팩을 사용하면 자바스크립트 간의 종속성 뿐만 아니라 자바스크립트 내에서 필요한 css나 img와 같은 파일(.css, .jpg)도 번들링 해서 하나의 파일로 합쳐줘서 네트워크 요청을 최소화시킬 수 있습니다.

 

웹팩은 노드 모듈 중에 하나입니다. 웹팩을 사용하려면 Node.js 가 설치되어 있어야 합니다.

 

설치

yarn add webpack