React/Babel과 WebPack 을 이용한 ES6 환경 구축 (2) 썸네일형 리스트형 Babel과 Webpack을 이용한 ES6 환경 구축(1) - Babel 이란? React로 개발하고 있다면 거의 대부분 babel도 함께 사용하고 있을 것 입니다. create-react-app 에도 기본으로 들어가있고 react 관련 튜토리얼을 따라 하다보면 자연스럽게 babel을 설치하게 된다. 굳이 react가 아니더라도 javascript를 사용한다면 babel를 사용해주는것이 좋다. [ babel 이란 ? ] babel은 javascript 컴파일러다 . 입출력 모두 javascript 코드이다. [ babel을 사용하는 이유 ] 최신 버전의 javascript 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6 , ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다. [ babel-pol.. Babel과 Webpack을 이용한 ES6 환경 구축(2) - Webpack 이란? WebPack5는 build콘솔에 여러 warning이 발생, 각종 plugin에서 아직 webpack5대응이 완벽하게 되어 있지 않은 것 같습니다. [ WebPack 이란? ] 모듈 번들링이라고 한다. 모듈 번들링이란 html 파일에 들어가는 필요한 다수의 의존관계에있는 모듈들을 하나의 Javascript 파일로 만들어주는 방식이다. [ WebPack을 사용하는 이유 ] 1. 여러개의 파일을 하나로 묶어줌 Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없다. 그리고 다수의 Javascript 파일을 하나의 파일로 번들링하므로 html 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다. 옛날에는 페이지마다 새로운 html을 .. 이전 1 다음
