Vue.js로 데일리리포트 앱만들기 12강 이슈

Vue.js로 데일리리포트 앱만들기 강의목록

원인

babel-core , babel-loader 버전문제 처음 Vue.js 설치시 옵션에 babel을 선택하여 설치하였는데 최신버전이었고 강의 내용은 babel 6.0기준인데 7.0버전부터는 stage-2가 더이상 권장되지 않아서 충돌이 난거 같음,
프리셋 대신 플러그인 형식으로 넣어야 한다고 함.

과정

  1. 강의자분께 에러메시지와 소스를 첨부하여 메일로 보냄.
  2. 구글링
  3. 같은 이슈의 문의글이 있어서 댓글을 보니 강의자분이 해당버전에 맞게 설치하라고 피드백주심, 하지만 현재 설치된 버전이 높아서 안될거라고는 생각을 못했음

해결

  1. 기존 babel 버전은 삭제하고 관련 플러그인도 전부 삭제 후 babel-core 6.26.3, babel-loader 7.1.5 설치 후 로컬서버 실행 ex) npm install –save-dev babel-loader@” 7.1.5”

  2. package.json에서 ^제거 (^을 제거하면 재설치시에도 버전이 업데이트안되고 고정된다고 함.)

해결2

강의자님의 피드백이 다음날(11월15일) 바로 와서 알려주신대로 해결

babel과 rc를 새로운 문법으로 업그레이드 하는 방법

  1. babel-upgrade 를 설치 npm i -g babel-upgrade
  2. 관리자 권한으로 전역설치
  3. babel-upgrade 툴로 package.json과 .babelrc를 업데이트 babel-upgrade –write
  4. 실행하면 위의 두 파일이 변경됩니다. 변경된 패키지로 새로 설치를 합니다. npm i 확인