vue.js

Vuex Helper 함수 사용

vuex 에서 Store 4가지 속성을 아래와 같이 변경하여 간편하게 불러올 수 있다. state > mapState getters > mapGetters mutations > mapMutation actions > mapActions 단, helper 을 알아보기 전에 ES6의 Object Spread Operator 에 대해 미리 숙지해야한다. ES6의 Object Spread Operator 사용은 ... 으로 하고 ... 예시 let kim = { field: 'back-end', language: 'java' }; let developer = { nation: 'korea', ...kim }; console.log(developer); 결과 [object Object] { field: "back..

Vuex 설치하고 등록하기

Vuex 설치 1. 터미널에 명령어 입력 - 설치 시 버전을 명시해야하니 사용하는 vue 프로젝트 환경과의 호환성을 잘 확인 할 것. > cd [설치경로] > npm i vuex@3.6.2 --save PS C:\Users\kim\Desktop\learnVue\PFV> cd .\todo\ PS C:\Users\kim\Desktop\learnVue\PFV\todo> npm i vuex@3.6.2 --save added 1 package, and audited 951 packages in 1s 102 packages are looking for funding run `npm fund` for details found 0 vulnerabilities 2. 설치 되었는 지, package.json파일 내 dep..

Vue CLI 설치하고 프로젝트 파일 생성하기

CLI 설치하기 node.js 를 설치하면 npm이 자동 설치된다. (위 링크 클릭 후 좌 우 중 좌측 LTS 다운로드) (npm이란? 노드 패키지 매니저다) 아래 명령어로 버전 확인 하고 > node -v v18.15.0 > npm -v 9.6.2 install 명령어 npm install -g @vue/cli 를 입력하면 설치 된다. 설치 완료 되었는지 아래 명령어로 버전을 확인하면 된다. > npm install -g @vue/cli > vue --version 공식문서 설치 가이드 주의 사항 - vs코드 터미널에서 실행 시, 윈도우는 vue가 아니라 vue.cmd로 실행해야 관리자 모드로 명령할 수 있다. - 외부 터미널에서 실행 시 cmd를 관리자 권한으로 실행해야 한다. - 환경변수 추가가 필..