카테고리: Front-end

0

rollup.js를 통해 모듈 번들링하기

이 글은 Typescript + TSLint + Mocha + Chai + ts-node + NYC로 모던한 프론트 엔드 테스트 환경 구축하기에서 이어지는 내용이며,이 글을 본 이후에 travis-ci와 coveralls를 이용하여 좀 더 안전하게 협업하기를 보는 걸 추천드립니다.여러 주제를 다루다보니 깊게 다루지는 않고 각각이 무엇을 하는 것인지만 간단

0

Typescript + TSLint + Mocha + Chai + ts-node + NYC로 모던한 프론트 엔드 테스트 환경 구축하기

이 글은 rollup.js를 통해 모듈 번들링하기, travis-ci와 coveralls를 이용하여 좀 더 안전하게 협업하기을 읽기 전에 읽어야할 포스트이며여러 주제를 다루다보니 깊게 다루지는 않고 각각이 무엇을 하는 것인지만 간단하게 설명과 예제를 곁들여 진행하고 있습니다.또한 예제 진행은 IntelliJ를 통해 진행했습니다.WebStorm으로 진행

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

(Webpack) 모듈? 번들링?

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