세상을 살아가는 지혜

#Turn on debugger without lint error. debugger; // eslint-disable-line no-debugger

웹팩 번들러 사용시, 번들 파일을 여러 청크파일로 나눠야할 때가 있을 수 있다. 예를들면 하나의 파일 크기가 너무 큰 경우, 초기 로딩이 오래 걸리기 때문에 나눠주는 것이 좋은데, 그 경우 아래와 같은 방법으로 lazy load가 가능하다. 이렇게되면 호출 시점에 로드함으로써 기존의 높은 bundle파일의 용량을 줄어줄 수 있다는 장점이 있다. 초기에 모든 frontend 코드를 로드할지, 페이지 이동시 여러번 호출할지는 상황에 따라 결정하면된다. const Home = () => import ("../views/Home");

webpack 번들링시 gz 파일을 만들기 위해서는 'compression-webpack-plugin'을 사용해야한다. 사용법은 검색을 좀 해보면 나온다. 근데 중요한건 compression-webpack-plugin과 webpack 버전이 맞아야된다. 이게 안맞으면 tappromise 에러가 난다. 난 webpack4를 사용중이였는데 compression-webpack-plugin버전도 4.0.0으로 사용해야했었다. package.json을 해당 버전으로 고친뒤 재설치하니 잘되었다. 보통은 하위 버전까지 고려해서 패키지를 배포하는데, 희안하게 버전이 올라가면 이전 버전을 지원해주지 않더라. 이것때매 한 10분 헤맸다.

:include에는 router에 등록해준 view의 컴포넌트 이름을 추가해주면 해당 뷰만 캐시된다. 이전의 상태 정보를 기억하게 한다는것은 사실 매우 까다로운 일인데, 이렇게 간단하게 해결할 수 있다는걸 보고 새삼 놀라웠다. 이 문제 때문에 pagination으로 고칠까도 생각했다가, 이렇게 해결할 수 있는 방법이 있다는걸 알고 약간의 헤맴을 통해서 해결했다. 쓰면 쓸수록 vue와 django의 조합은 엄청 난것 같다. validation 처리만 좀 더 간단해지면 좋을듯한데, 처음 접근하는 사람은 django의 다양한 error message 포맷으로 인해서 약간 헤맬 수 있을듯하다. form validation error는 field명으로 serializer단의 validation 에러는 detail..