Web / App / Data
본 포스팅에서는 DllPlugin이 무엇인지, 어떻게 동작하는지, 그리고 어떻게 설정해야 하는지를 다루고, Webpack4의 zero-configuration라는 캐치프라이즈는 역시 거짓부렁이었다는 것을 증명한다. DLL Dynamic Link Library. 윈도우 프로그램을 설치한 뒤에 보이는 .dll 확장자처럼 외부 라이브러리들을 미리 Compile 해놓는 기법이다. 프로젝트에서 파일을 갱신할 때 마다 Webpack이 번들링하는 범위를 줄일 수 있다는 첫 번째 장점, 그리고 프로덕션 환경에서 라이브러리 스택이 변경되지 않은 경우에 재방문하는 […]
요즘 React를 다시 써보고 싶어졌다. Vue로 너무 많은 프로젝트를 진행했고, Vue도 나름 메인스트림에 올라온 것 같지만, 아직도 React의 기세는 멈출 줄을 모르는 느낌. 그래서 만만한 Flurry를 다시 작성해보기로 했다. Vue -> React, Vuex -> Relay, Bootstrap4 -> Mobile Ant Design, Front-end only -> Back-end enabled, … Test도 하나 없이 짜던 프로젝트였는데, jest, nightwatch로 테스트 세팅도 […]
현재 Storybook 최신 버전에서는 Webpack3을 사용하고 있다. 본 프로젝트에서 TypeScript를 Webpack4와 사용 중이었다면, 스토리북의 Webpack3와 ts-loader가 충돌한다. ts-loader의 최신버전이 Webpack3과 완벽하게 호환되지 않기 때문이다. Webpack3과 호환되는 ts-loader는 3.5.0이 있다. ts-loader의 버전을 내리면 본 프로젝트에서 터지게 되는 딜레마에 빠진다. 다행히도, Webpack에서 TypeScript Loader는 두 가지가 공존하고 있다! 1) 본 프로젝트에서 Webpack4 + ts-loader를 사용중이었다면 awesome-typescript-loader 4.0.1을 설치하여 […]
모바일에서는 탭으로 인식해야하는 터치 입력인지, 더블 탭으로 인식되야하는 터치 입력인지를 판별하기 위해 첫 번째 탭이 인식되기 전 까지 300ms의 딜레이가 있고, 대부분의 사용자들은 더블탭을 사용하지 않기 때문에 이 딜레이는 대부분 무용지물이다. 오히려, 길게 탭하거나 iOS의 포스터치를 쓰는 것이 더 일반적이기 때문. 그래서 그걸 없애기 위한 라이브러리도 당연히 존재한다. FastClick Github 단순히 import하는 것 만이 아니라, […]
다음과 같은 Vuex store가 있다고 하자. 이 user를 Vue Component의 computed에 …mapState를 이용해서 주입해서 사용하고 있는 상황. 이 때 mutation을 통해서 user의 id나 email을 바꾸면 그것이 실시간으로 Vue Component에 반영되는 것을 확인할 수 있으나, user에 새로운 key를 추가하면 Vuex는 그 key가 생겨났다는 사실을 인지하지 못한다. 예를 들어서 user: { id: ‘adoji’, email: ‘[email protected]’ }가 어떤 Mutation에 […]