잉어빵

프로젝트 작업 중 작성 또는 할당은 하였지만 사용하지 않는 변수가 있을 경우 no-unused-vars 에러를 eslint에서 발생 시키는 경우가 있습니다.

사실 작업 시에 문제가 되고 있진 않지만 매번 터미널에 에러가 뜬다면 작업자 입장으로선 상당히 신경쓰일 수 있는데 이런 에러를 끄는 방법은 vue 프로젝트 기준 .eslintrc.js 에서 코드 한줄이면 나타나지 않게 할 수 있습니다.

rules에 "no-unused-vars" : "off" 를 입력후 내부 서버를 다시 재실행 시킨다면 해당 에러는 더 이상 발생되지 않는것을 확인할 수 있습니다!

상태관리와 Store

1. Store

• 컴포넌트끼리 데이터를 공유할 때 props나 event bus를 이용할 수 있지만 가장 효율적인 방법은 Store이다 (Vuex)
• 데이터를 Store에 담으면 프로젝트 내 컴포넌트에서 Store 에 담긴 데이터를 꺼내서 사용할 수 있다.

2. Vuex 설치 및 연결

• 설치

npm i vuex

• vuex는 프로젝트 내 package.json 의 dependencies에 들어가게 된다.

3. 프로젝트 세팅

• src/store 폴더 생성
• src/store/index.js 파일 생성

• src/main.js

• 사용할 컴포넌트 (ex. HelloWorld.vue)

그런데 간혹 아래와 vue2 버젼에서 this.$store를 사용 하려고 할 때 store가 인식 되지 않는 경우가 있습니다.

이 경우는 사용자가 vue2 버젼에서 vuex 4버젼 이상을 사용해서 일어나는 현상으로 vuex 4버젼은 vue3 버젼 에 서 vuex3 이하 버젼은 vue2 버젼에서 사용 가능하기 때문입니다.

4. 해결방법

• pakage.json 내 vuex 버젼을 4 -> 3버젼으로 변경하거나. vue2 -> vue3 버젼으로 변경처리
• npm i vuex@3 으로 vuex 최초 설치 시 3버젼으로 받아온다.

npm 서버 실행 시 npm run 스크립트 이름 (ex: npm runs serve)  후 로컬 상에서는 잘 되고 있지만 Invalid Host header 이 표시된다면 vue-cli 프로젝트 내부의 vue.confing.js에 아래와 같이 문장을 추가하면 해결됩니다

출처 : https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck

VScode로 작업 시에 Prettier랑 EsLint 설정 후 npm 서버를 실행 시킬 경우 아래 와 같은 에러가 뜰 수 있습니다.

해결방법

프로젝트 디렉토리 내 .eslintrc.js 파일에 아래의 코드를 추가 후 저장한 뒤 다시 서버를 실행 시키면 에러가 사라지는 것을 볼 수 있습니다.

{   
 
  "rules": {     
    "prettier/prettier": ["error", { "endOfLine": "auto" }]   
  }
}