글쓰는 개발자

문제점 Vue Cli로 개발을 하다보면 가끔 이런 에러를 만나게 된다. you are using the runtime-only build of vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 해결법 위와 같은 에러는 아래처럼 Vue.js에서 동적 컴포넌트를 활용하려 할 때 발생하는 에러다. 이는 Vue Cli의 설정에서, 동적 컴포넌트에 대한 컴파일 기본값이 false 이기 때문에 발생하는 것(Vue Cli : runtimeCompiler)으로써, 해결법은 간단하게 vue.config.js 파일에 ru..

목차 1. ES11문법을 위한 babel의 최신화(Hi, Unexpected token, bye!) 2. polyfills는 Default를 가지고있다. 3. core-js 3 라고 왠만하면 명시하자. ...그리고 -1. 별첨. es6? es7? ㄴㄴ es! 1. ES11문법을 위한 babel의 최신화(Hi, Unexpected token, bye!) 문제점 현재 프로젝트에서 사용하고 있는 컴포넌트의, 새버전이 릴리즈되어 현장에 적용하려하였는데... 아래와 같은 에러 로그를 만나게 되었다. Module parse failed: Unexpected token Unexpected token 이라는 에러는 보통, Javascript 문법을 잘 못 썼거나 컴파일 단계에서 babel이 이해하지 못 하는 구분자(t..

문제점 npm run build 명령을 통해서 떨어지는 최종 결과물에, Code Split를 적용하기 위해서 아래와 같은 옵션을 적용했다. module.exports = { configureWebpack: { optimization: { minimize: true, splitChunks: { chunks: "all" // 이거 }, }, }, } Entry파일을 여러개로 나눈, Multiple Entry 형태의 구조로 개발을 하기위해서 공통으로 활용되는 npm 패키지들을 하나로 묶고자 위와 같이 설정한 것인데...위와 같이 정의하고 npm run build로 webpack을 동작시키면 의도한대로 최종 빌드된 html과 js파일들은 잘 생성이 된다. 하지만, npm run serve를 통해 webpack-..

문제점 npm run build 명령을 통해서, Vue Cli로 만든 프로젝트를 빌드하려했는데... Accessing non-existent property 'cd' of module exports inside circular dependency Accessing non-existent property 'chcmod' of module exports inside circular dependency Accessing non-existent property 'cp' of module exports inside circular dependency ..... 위와 같은 메세지가 콘솔창에 가득차며 되게 에러처럼 보이는 무언가를 뱉어낸다. 물론 이 메시지가 끝난 이후에도 build가 정상적으로 끝난 것처럼 정적 리..

문제점 개발중인 Vue.js 기반의 프로젝트에서, 배포를 위해 빌드를 하던중에 배포된 상태의 용량을 최대한 줄이기 위해서 import된 npm 패키지들을 분석하던 도중에, 컴포넌트 쪽 패키지가 생각보다 너무 크길래 줄이려고 시도하다가 난 이슈다. 확인결과 해당 컴포넌트 패키지를 import 하는 대상이, minify & uglify가 적용되지 않은 js를 사용하고 있었기에 minify & uglify 된 파일을 import 하는 형태로 바꿨는데...콘솔이 에러메시지로 가득차버렸다. did you register the component correctly? For recursive components, make sure to provide the "name" option. 사실, 이 에러는...Vue 파일..

문제점 npm install 명령어를 통해서 패키지를 설치하는데, 아래와 같이 run `npm audit fix` to fix them, or `npm audit` for details 라는 에러가 발생했다. npm을 다룬지도 한참됐는데...처음보는 에러라서 또 뭔가 프록시 설정을 누락했거나, npm config 설정값에 문제가 있는 줄 알았는데, 그게 아니고 npm audit 라고, 각 패키지들이 가진 취약점을 체크해주는 로직이 들어 왔다는 거였다. npm 패키지 자체가 install 시에 물고물고물린 의존성에 따라 여러 패키지들을 알아서 설치해주다보니, 그 과정에 발생할 수 있는 이슈를 대비하기위해 해주는 거라고 한다. 해결법 생각보다 심플하다. 해당 audit 옵션을 쓰지 않겠다는 옵션을 아래와 같..

문제점 Cannot read property 'coordinateSystem' of undefined at Object.layout (catesianAxisHelper.js:54) at ExtendedClass.render (CartesianAxisView.js:74) at echarts.js:1450 at Array.forEach () at each (util.js:300) at renderComponents (echarts.js:1448) at render (echarts.js:1434) at ECharts.update (echarts.js:861) at ECharts.echartsProto.setOption (echarts.js:411) 해결법 vue-echart의 초기 설정값에 문제가 있었다. 라..