태그: npm

0

(자작) async-to-sync (자바스크립트 비동기 함수 헬퍼)

async-to-syncasync-to-sync는 자바스크립트 비동기 함수를 동기 함수로 바꿔주는 헬퍼 함수이다.async/await는 물론 Promise를 몰라도 된다!! npm github 왜 async-to-sync를 만들었는가?드디어 async/await가 ES2017에 추가 되었다(아직 최종 스펙이 나온 건 아니지만).async/a

0

(Webpack 2) 상대경로 헬파티에서 탈출하기

상대경로 헬파티/app/src/lib/lib.js에는 아래와 같은 변수가 들어가있다.1export const num = 2; /app/src/lib/lib.scss에는 아래와 같은 변수가 들어가있다.1$var: 100px; 이제 이 변수를 사용하는 모듈이 /app/src/a/b/c/d/e/f 폴더 안에 있는 녀석들이다./app/src/a/b/c/d/e/f/

0

(Webpack 2) 최적화하기

들어가기에 앞서이 포스트들에서 말하는 내용들은 전부 배포용 파일에 적합한 작업이다.이런 압축 작업을 개발용 버전에서 매번 빌드할 때마다 실행하면 빌드 시간이 매우 느려지기 때문이다. 우리는 (Webpack 2) 트리 쉐이킹을 해보자!에서 모듈 전체가 로딩 되는 CommonJS 방식에서모듈의 필요한 부분만 로딩하는 ES2015 Native Module 방식

0

(Webpack 2) 트리 쉐이킹을 똑똑하게 해보자!

들어가기에 앞서이 포스트는 (Webpack 2) 트리 쉐이킹을 해보자!의 후속작이다.따라서 해당 포스트를 읽고 예제를 진행한 후에 보는 걸 추천한다.또한 내가 리액트 말고 할 줄 아는 게 별로 없어서 예제를 리액트로만 진행하다보니혹시 헷갈리면 다른 라이브러리로 진행해보길 바란다. 복습우리는 지난 포스트에서 리액트 라우터를 트리 쉐이킹하였다.아래와 같이

0

(React Hot Loader) v3로 마이그레이션 해보자!

들어가기에 앞서기본적으로 웹팩, 바벨, 리액트 라우터 등등은 안다는 전제 하에 글을 썼다.웹팩 2에 대한 모르는 부분은 아래 글을 조금씩 참조하면 도움이 될 것이다. (Webpack 2) 트리 쉐이킹을 해보자! (Webpack 2) 코드를 분할해보자! 또한 리액트 라우터 v4 예제로 진행할 것이므로 아래 포스트를 참고하고 소스 코드를 클

0

(React Router) v4로 마이그레이션 해보자!

들어가기에 앞서React Router v4가 정식으로 나와서 3은 deprecated 된 거나 마찬가지라고 본다.~현재 React Router v3은 디프리케잇 되지 않고 React Router v4와 다른 노선을 탔을 뿐, 지원은 계속 해주는 것 같다.따라서 레거시 환경을 싫어하기도 해서 한 번 마이그레이션을 간단하게 해보았다.기본적으로 웹팩, 바벨

0

(Webpack 2) 코드를 분할해보자!

들어가기에 앞서웹팩 2, 웹팩 1, 바벨, 리액트 등등에 대해서 기본적인 부분은 설명하지 않는다.또한 (Webpack 2) 트리 쉐이킹을 해보자!를 보고 나서 이 포스팅을 읽는 걸 추천한다. 코드를 왜 분할하지?SPA(Single Page Application)은 한 번에 모든 리소스를 로딩해서초기 로딩 이후에 페이지 이동이 매우 빠르다는 장점을 가지고 있

0

(Webpack 2) 트리 쉐이킹을 해보자!

들어가기에 앞서여기선 기본적으로 웹팩 1, 바벨, ES2015(ES6)을 알고 있다는 전제로 진행한다.리액트 대신에 다른 서드 파티(라이브러리/프레임워크) 가지고 테스트하면서 이 글을 봐도 된다.또한 이 글을 보고 나서 (Webpack 2) 코드를 분할해보자!도 보는 걸 추천한다. 트리 쉐이킹(Tree Shaking)??트리 쉐이킹이란 나무를 흔들어서 필요

0

(자작) perf-chk (Node.js 애플리케이션)

perf-chk (Performance Check)왜 perf-chk를 만들었나?나는 코드 실행 시간에 굉장히 관심이 많다.따라서 코드 실행 시간 측정을 위해 테스트를 종종 해보곤 한다.그럴 때 아래와 같은 코드를 사용하였다.1234567891011const iterations = 10000000;console.time("function A");for

0

(Webpack) 모듈? 번들링?

목차 들어가기에 앞서 모듈, 너는 누구니? 웹팩을 사용해보자 웹팩에게 모듈이란…? 개발용? 배포용? 부트스트랩, 폰트어썸, 제이쿼리, 이미지 모듈을 사용해보자. 홈페이지, IE8에서도 웹팩을 써보자. 마치며… 들어가기에 앞서아주 많이 참조한 링크웹팩입문자를 위한 튜토리얼 파트1 - 웹팩 입문 ! 이 포스트에서는 Node.js, npm, ES(ECM