104%

Mobx를 사용하려고 하던 찰나에 바벨 플러그인으로 @babel/plugin-proposal-class-properties의 loose:true가 사용되는걸 보고 이건 어떤 옵션일까 궁금해서 찾아봤습니다. @babel/plugin-proposal-class-properties이란? 자바스크립트에서도 Class를 사용할 수 있습니다. 하지만, Class내부의 속성들을 선언할때는 바벨 플러그인이 없으면 오류가 납니다. 보통은 아래처럼 class의 constructor에서 변수를 초기화 합니다. / class Example { constructor() { this.abc = '123'; } } 하지만 아래처럼 쓰고 싶은 경우도 있을겁니다. class Bork { // 속성 초기화 문법 instancePrope..

Mobx를 공부하려고 하는데 다른 예제에서 @babel/plugin-proposal-decorators의 legacy: true옵션을 사용하길래 이 옵션은 왜 사용하는건지 히스토리를 알고 싶어 정리했습니다. 아래 글은 바벨 7.1.0 버전이 출시되면서 변경된 내용을 정리한 바벨의 공식 문서입니다. https://babeljs.io/blog/2018/09/17/decorators TC39 Standards Track Decorators in Babel · Babel Babel 7.1.0 finally supports the new decorators proposal: you can try it out by using the [`@babel/plugin-proposal-decorators`](https://..

타입스크립트에는 esmoduleinterop라는 컴파일러 옵션이 있는데 이 옵션을 켜면 Commonjs방식으로 내보낸 모듈을 es모듈 방식의 import로 가져올 수 있게 해준다. 모듈 방식이 왜이렇게 많아? ES6에 정식으로 자바스크립트에 모듈 시스템이 도입 되기 전부터 사람들은 자바스크립트 파일을 여러개로 쪼개고 다시 합치는 번들러가 필요했다. 그래서 직접 라이브러리를 만들어서 사용하곤 했는데 그때 나온 유명한 모듈 시스템들이 CommonJS와 AMD이다. 그래서 ES6에 모듈 시스템이 도입되고 나서도 구형 브라우저를 지원하기 위해 바벨로 ES6 -> ES5로 변환하고 난 다음, ES모듈을 CommonJS방식으로 트랜스파일해서 기존 번들러가 잘 동작하도록 변환하여 사용했었다. 이미 CommonJS방식..

import 'bootstrap/js/dist/modal'; import 'bootstrap/js/dist/dropdown'; import 'bootstrap/js/dist/tooltip'; import 'bootstrap/dist/css/bootstrap.css'; 프로젝트에 summernote 에디터를 붙이는 도중 이 에디터가 내부적으로 부트스트랩을 사용해서 모듈을 설치하고 진행하던 중 bootstrap/dist/css/bootstrap.css를 로더가 처리하지 못하는 이슈가 발생했다. 그런데, 스토리북 기본 웹팩 설정을 살펴보면 기본적으로 style-loader, css-loader, post-cssloader등이 적절히 셋팅 되어 있다. 그럼에도 불구하고 왜 부트스트랩의 node_modules 내..

https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758 요약 번들 스플리팅 사람들은 코드 스플리팅이라고하면 런타임 코드 스플리팅만이 중요하다고 오해한다. 하지만 사실 더 중요한것은 빌드타임에 스플리팅하는것이다.(번들 스플리팅) 코드를 여러개의 번들로 잘 나누면 브라우저 캐시를 좀 더 잘 활용할 수 있게 된다. 하나의 큰 파일을 클라이언트로 내려주면 그 파일의 아주 일부분이라도 수정될 경우 브라우저 캐시를 활용하지 못하고 새로 파일을 서버에서 받아와야한다. 따라서, 최대한 작은 파일로 쪼개서 내려주어야 한다. 그렇게 되면 수정된 파일만 캐시 버스트 하면 되므로 훨씬 효율적으로 브라우저 캐시..

배열 형태의 entry index.js파일 끝에 googleAnaylytics.js를 append함. 객체 형태의 entry 멀티 페이지 애플리케이션에서 여러개의 html이 있는 경우 사용한다. 두개의 진입점을 통해 indexEntry.js, profileEntry.js 두개의 번들 파일이 만들어진다. //profile.html //index.html 각 html에서 번들된 js를 불러와서 사용하면 된다. 객체 + 배열 혼합 entry vendor.js, index.js, profile.js 3개의 번들 파일이 만들어진다. vendor.js는 jquery와 analytics, optimizely 3개의 자바스크립트 파일이 합쳐진 상태로 번들된다. Output Path: 웹팩이 번들파일을 어느 폴더에 놓을..

웹팩의 컴파일러는 엔트리부터 시작해서 모든 모듈을 재귀적으로 파싱하면서 require(), require.context(), import(), import 구문을 해석하여 의존성 그래프를 만든다. 보통 웹팩에서 context는 "모듈의 경로를 해석하기 위한 기준이 되는 base 디렉토리"를 의미한다. 예를들어, 현재 working directory가 default context로 사용된다면 require.resolve('../../../foo.js')요청에 대한 컨텍스트는 __dirname이 된다. 웹팩이 어떤 디렉토리를 기준으로 모듈들의 경로를 찾게 할것인지 결정하는것이다. require.context는 기준 디렉토리로부터 정규표현식에 해당하는 모든 모듈을 불러올 수 있는 웹팩 컴파일러의 특별한 기능이..

babel polyfill 바벨을 사용하면 es6+ 문법을 es5로 바꿔준다. 근데 바벨 자체는 문법 변환기이다. 말그대로 es6문법의 텍스트를 es5문법의 텍스트로 글자만 변경해준다는것이다. 문법 자체 뿐만아니라 es6에서는 새로운 객체와 그 객체의 API들이 추가 되었다. (새로 추가된 전역 객체들(Promise, Map, Set) ) 이 API들은 구형 브라우저에서 인식하지못한다. 그래서 babel polyfill을 사용하는것이다. 이 polyfill은 브라우저에서 인식하지 못하는 API들을 추가해준다.(정확히는 프로토타입에) 즉 babel + babel polyfill을 같이 사용해야지 es6+ 문법을 es5문법으로 바꾼뒤 실행까지 가능해지는것이다. 바벨만 사용하면 Promise() 함수 자체를 ..