배경 크로스 브라우징 크로스 브라우징의 혼란을 해결해 줄 수 있는 것은 바벨이다. 모든 브라우저에서 동작하도록 호환성을 지켜준다. 크로스 브라우징이란? 간단하게, 웹 페이지의 상호 호환성 === 서로 다른 브라우저들끼리 서로 호환이 가능하도록 하는 것을 의미한다. 그래서 우리는 각 다른 브라우저 IE, Edge, Chrome, Sfari 들의 호환성을 가능하도록 개발해야한다. ex) IE는 CSS 속성중 grid가 적용되지 않아 혼란을 줬다. 하지만 IE는 서비스를 종료했다...좋을지도 바벨의 기본 동작 바벨은 ES6 이상의 코드를 적당한 하위 버전으로 바꾼다. 바뀐 코드는 IE와 같은 구버전 브라우저처럼 최신 자바스크립트 문법을 이해하지 못하는 환경에서 ES6 -> ES5 문법으로 변환하여 이해할 수 있도록 도움을 준다. 바벨을 세 단계를 걸쳐 빌드한다. 파싱 : 코드를 받아서 각 토큰 별로 분해하는 작업 ex) const, al

로더의 역할 웹팩은 모든 파일을 모듈로 바라본다. 자바스크립트로 만든 모듈 뿐만 아니라 스타일, 이미지, 폰트까지 전부 모듈로 바라본다. 이것들이 가능한 이유는!! 웹팩의 로더 덕분이다! Ts -> Js 변환 우리가 타입스크립트로 쓴 언어도 로더를 통해 자바스크립트로 문법적으로 변환해주어 브라우저가 인식을 할 수 있다. 이미지 문자열로 변환 이미지 또한 data URL 형식의 문자열로 변환한다. css 파일 로딩 CSS 파일을 자바스크립트에서 직접 로딩할수 있도록 해준다. 로더의 역할 정리정리 엔트리 포인트부터 모듈을 검색하다가 설정한 파일에 패턴을 검색하고 ( ex. test : /\.css$/) 해당 패턴을 찾으면 use에 설정한 로더 함수를 실행한다. (ex. use : ["css-loader"] ) 자주 사용하는 로더 css-loader 웹팩은 모든것을 모듈로 바라보고 있기에 스타일시트도 불러올 수 있다.

웹팩을 번들러라고 부른다. 왼쪽에 있는 여러 js 파일들을 웹팩을 통해 왼쪽에 있는 파일들(번들)로 만들어낸다. 즉, 여러개의 js 파일을 하나의 번들로 만드는 역할 엔트리 자바스크립트 모듈들이 여러개 의존관계가 있는데 의존관계가 있는 것들 중에 첫번째를 가르킨다. 처음 시작하는 js 파일 === 시작점 아웃풋 번들링 결과물을 위치할 경로 webpack.config.js filname을 [name]으로 한 이유? entry가 한개일 필요가 없으므로 main1, main2, main3과 같은 엔트리가 여러개 생길 수 있다. package.json 정리 엔트리란, 자바스크립트 모듈들이 여러개 의존 관계가 있는데 의존 관계가 모듈중에 첫번째를 가르킨다. 웹팩은

웹팩이 필요한 이유 배경 모듈을 지원한 시기는 ES2015부터 모듈을 지원하기 시작했다. ES2015 이전에는 흔히 사용하는 import/export 구문이 없다. 그럼 어떻게 import 했을까? 다음 두 파일을 만들고 index.html 안에서 스크립트를 로딩해야만 실행 할 수 있다. math.js 가 로딩이 되었으면 app.js 는 sum 을 찾은뒤 실행한다. 이는 무슨말이냐? sum 이 전역으로 사용된다는 것! 다른 파일에서 sum 함수를 만들었다면? 같은 이름을 사용중이므로 런타임에러를 뱉는다. math.js app.js IIFE 방식 위와 같은 문제를 해결하기 위해서 스코프를 사용한다. 함수 스코프를 만들고 외부에서 접근하지 못하게 공간을 분리하는 것이다. 스코프 안에서는 자신의 이름 공간이 존재하므로 스코프 외부에서 같은 이름이 있어도 런타임에러가 발생하지 않는다. math.js 이렇게 작성해주면 외부 파