20240709_v
vue-template-compiler 버전이 맞지 않는 문제 발생
* 해결 1
1. vue-template-compiler 삭제
2. package-lock.json 파일, node_modules 폴더 삭제
3. npm install
4. 재기동 확인
>> 같은 문제 지속적으로 발생함
* 해결 2
1. vue-template-compiler 업데이트
2. npm install
3. 재기동 확인
>> 정상적으로 기동됨을 확인함
* 해결 3
1. vue-template-compiler 삭제 (npm uninstall vue-template-compiler)
2. compiler-sfc 설치 (npm i -D @vue/compiler-sfc
3. npm install vue-loader@next
4. package.json 에 작성한 의존성 패키지들 하나씩 업데이트/설치 시도
5. 재기동
>> 왜 잘 됨?
vue-loader 버전이 10 이상인 경우 vue-template-compiler 업데이트를 하면 된다는 메시지를 보긴 하였지만,
구글 검색 중 찾은 다른 글에는 vue 3.x 부터는 vue-template-compiler 를 사용하지 않는다는 내용도 존재했다.
오히려 사람을 더 헷갈리게 하는 글들이 많은 것 같다.
** 조심
package-lock.json
> package.json 파일, node_modules 폴더 수정 시 npm 에 의해 생성/업데이트 된다.
> 또한, 당시 의존성에 대한 모든 정보를 가지고 있다.
>> 커밋하는 것을 추천한다.
1. 의존성 트리에 대한 정보를 모두 가지고 있다.
2. 커밋하는 것을 추천한다
3. node_modules 없이 배포하는 경우 반드시 필요하다.
node_modules/ : 모든 패키지 설치, 사용중인 모든 패키지 확인 가능, npm 으로 설치된 패키지 파일 포함
public/ : webpack 을 통해 관리되지 않는 정적 리소스가 모여있는 곳
src/assets/ : image, css, font, etc...
src/components/ : Vue 컴포넌트 파일이 모여있는 곳
App.vue : Root component
main.js : 가장 먼저 실행되는 자바스크립트, Vue 인스턴스 생성 역할
.gitignore : github 업로드 시 제외할 파일 설정
babel.config.js ; Babel 설정 파일
package-lock.json : 설치된 package 의 dependency 정보 관리 파일
package.json : 해당 파일 공유하여 모든 패키지 설치 가능, 프로젝트에 필요한 package 정의/관리 파일
README.md : 프로젝트 정보 기록 파일
** package.json 파일내 속성들
name : 프로젝트명
version : 프로젝트 버전
private : npm 배포 가능 여부
scripts : 프로젝트 실행과 관련된 명령어 등록, 개발자가 정의 시 npm run 사용, npm 에서 제공되는 명령어는 npm 사용
dependencies : 사용중인 패키지 정보 (패키지 설치지 자동 등록)
devDependencies : 개발시에만 필요한 패키지 정보 (패키지 설치지 자동 등록)
eslintConfig : ESLint 는 일괄성 있게 코드를 작성하고 버그를 회피할 목적으로 ECMAScript/Javascript 에서 발견된 패턴을 알려주는 플러그인, 구문 분석을 위해 babel-eslint 를 파서로 사용함 (패키지 설치지 자동 등록)
browserslist : >1%, last 2 versions, not dead, not ie 11, ...
>> 대부분 수동 등록
기본 : vue.config.js
환경 : dev.config.js, prd.config.js, ...
각환경변수 : .dev.env, .prd.env, ...
2개 이상의 단어 구성으로 네이밍 시 해결 가능
