[React] Webpack & Babel

항상 create-react-app으로 react프로젝트를 시작해왔는데, 규모가 있는 프로젝트를 만드려다보니 공부의 필요성을 느끼며 쓰는 글 !!!!

1. Webpack?

웹팩은 모듈번들러이다. 코딩할 때 편의를 위해 여러 개의 모듈로 나눠 작업하는 경우가 많지만, 이렇게 되면 네트워크의 비용 낭비를 하게된다.
-> 하나의 파일로 묶어서 모듈 번들러로 보냄.

-속성 ?

1. Entry: 웹 자원을 변환하기 위해 필요한 최초 진입점, 자바스크립트 파일 경로임. entry를 통해 모듈을 로딩하고 하나의 파일로 묶음

2.Output: entry로 찾은 모듈을 하나로 묶은 결과물을 반환할 위치

3.Loader: 웹팩은 JS와 JSON만 빌드가능하지만, 다른 자원을 빌드할 수 있게 도와줌.

4.Plugin: 웹팩의 기본적인 동작 외 추가적인 기능을 제공하는 속성

Babel?
JS의 es6문법을 es5로 변환해주는 트렌스파일러. 이걸 통해서 React를 일반 브라우저에서 실행할 수 있다.

개발환경 구성하기

1.의존성 초기화
-> npm 프로젝트를 시작하는 모든 옵션을 yes로 설정.

npm init -y