front-end developer

지난 포스팅(Babel Polyfill을 적용하는 방법들)에서 @babel/plugin-transform-runtime 플러그인에 corejs 옵션을 줘서 폴리필하는 방법을 소개했었는데 최근에 @babel/preset-env의 useBuiltIns, corejs 옵션으로도 폴리필을 적용할 수 있다는걸 알게 되어서 각 방법에 어떠한 차이가 있는지 간단히 조사해 보았다. 먼저 Promise 를 사용하는 코드를 작성했다. class Controller { constructor() { new Promise(resolve => { setTimeout(resolve, 1000); }) .then(() => { console.log("Complete!!", Promise); }); } } 그리고 각각의 방법을 적용한..

babel은 기본적으로 es6(ecma2015) 문법으로 작성한 코드를 es5 환경에서 동작할 수 있도록 문법적인 변환을 해주지만 es5에 존재하지 않는 es6의 메서드나 생성자들까지 지원해주지는 않는다. 그래서 es5로 동작하는 하위 브라우저를 지원하는 서비스를 개발할 때에는 폴리필을 추가하여 개발 편의성을 향상시킬 수 있다. 폴리필을 추가하는 방법은 다양한데 대표적인 몇가지 방법을 소개한다. 전역에 폴리필 추가하기 (전역 오염 O) babel 7.4.0 이후부터 @babel/polyfill이 deprecated 되고 core-js와 regenerator-runtime을 직접 사용하는 방식을 제안하고 있다. 아래처럼 2개의 스크립트를 불러오면 전역 스코프에 폴리필이 추가되어 IE 하위 브라우저에서도 P..

Webpack을 사용하여 번들링되는 모듈을 분석해서 시각적으로 표현해주는 모듈이다. 모듈이 차지하는 용량에 따라 눈에 보이는 영역도 커지기 때문에 어떤 모듈이 얼만큼의 용량을 차지하는지 쉽게 파악알 수 있다. 설치 npm install --save-dev webpack-bundle-analyzer 사용 방법 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] } 레포트 화면 Webpack 빌드를 실행하면 아래와 같은 화면이 새창으로 뜬다. 부가 기능 레포트 화면을 static 파일로 생성하기 new ..

단일 책임 원칙책임에 따라 객체를 분리 한다.예를 들면 아이템 목록을 관리하는 객체, 유저의 정보를 관리하는 객체 등정보 은닉객체는 상태와 행위를 가진다.외부에서 객체의 상태에 직접 접근하지 않고, 객체의 API를 통해야 한다.예를 들어 외부에서 목록객체가 가득 찼는지를 판단하고 싶을때 목록 객체의 아이템 갯수와 최대값을 직접 비교하는 것이 아니라 목록 객체에 물어보면 된다. ex) objList.length >= objList.max (X) objLIst.isFull() (O)복합 객체의 API는 구성 요소의 API보다 단순해야 한다.큰 객체를 협력 객체의 그룹으로 나누기작은 객체들을 큰 그룹으로 묶어서 감추기