기초부터 다시 시작해야지 마음먹은 가운데.... 전부터 항상 궁금 했던것..!
Create React App 없이 React를 초기 설정 하려면 어떻게 하면 될까 였다.
일단 단 한번도 해본적이 없기 때문에, 찾아보니 내가 직접 만드려면 중요한 포인트는 다른 설정도 다 중요하지만
webpack, babel을 사용하는 것이 중요하다고 한다. 오늘 내가 쓸 것은 webpack에 대한 것이다.
웹팩이란?
웹팩은 모듈 번들러 라고한다.
여기서 모듈 번들러란 Module + Bundling을 혼합한 용어인데,
module = 분리된 코드 조각, bunding는 묶는다의 의미로 분리된 코드 조각들을 아래의 이미지와 같이 묶는다는 의미라고 생각하면 된다.
(모듈 번들러에 대한 정리 링크)
네트워크 병목을 줄여준다.
각 브라우저 별 브라우저별 HTTP 요청 숫자의 제약이 있기 때문에, script 태그를 여러개 사용하여 웹 페이지를 로드하면 네트워크 병목현상이 생길 수 있다. 이런 문제를 해결하려면, 하나의 js파일로 로드하면 되지만 하나의 js파일로 개발할 경우 코드의 가독성이나 전역공간의 오염 같은 문제가 발생하게 된다. Webpack은 여러개의 파일을 하나로 묶어주기 때문에 이와 같은 문제를 해결할 수 있고 네트워크 병목현상을 최소화할 수 있다.
모듈단위의 개발이 가능하다!
모듈단위의 개발이 가능하기 때문에, 전역 스코프에 대한 걱정을 하지 않아도 되고 하나의 파일에 모든 것을 넣지 않고 모듈 단위로 분리해서 코드를 짜기에
가독성이 좋아지고, 각 필요한 부분만을 담을 수 있기 때문에 유지보수 효율이 높다.
코드를 압축, 최적화할 수 있다.
여러가지의 js파일도 하나의 js파일로 압축시켜 준다.
ES6+ 스크립트를 지원한다.
webpack은 babel-loader를 사용하여 babel을 지원하기 때문에 컴파일 과정에서(코드를 번들링하는 과정에서)
구형 브라우저가 사용 가능한 문법으로 코드를 변환해 준다.
현재 내가 찾아본 결과, 내가 이해할 수 있는 부분들은 이정도가 되는 것 같다. 각 모듈간의 의존성, 종속상 이런 것들은 아직
정확히 이해하지 못했기 때문에 글로는 남기지 않겠다.
CRA없이 프로젝트를 하나 진행을 해보면서 웹팩에 대해 더 채워 넣어야 겠다.