프론트엔드/Vuejs
-
vue Quasar 에 axios 추가하기프론트엔드/Vuejs 2023. 6. 22. 19:34
Axios 모듈 패키지 추가/설치 패키지에 axios 패키지 추가해서 쓸 수 있다. $ yarn add axios or $ npm install axios --save Boot File 에 추가하기 quasar new boot axios 명령어를 입력하면 src/boot 폴더에 axios.js 파일이 생긴다. 여기에 import { boot } from 'quasar/wrappers' import axios from 'axios' const api = axios.create({ baseURL: 'https://api.example.com' }) export default boot(({ app }) => { // for use inside Vue files (Options API) through this...
-
[vue] vee-validation yup 자바스크립트 validation 체크프론트엔드/Vuejs 2021. 9. 15. 18:05
npm install -S yup 기본사용법 import * as yup from 'yup'; let schema = yup.object().shape({ name: yup.string().required(), age: yup.number().required().positive().integer(), email: yup.string().email(), website: yup.string().url(), createdOn: yup.date().default(function () { return new Date(); }), }); // check validity schema .isValid({ name: 'jimmy', age: 24, }) .then(function (valid) { valid; // =>..
-
[vue] vuex binding helper - vue store 사용하기프론트엔드/Vuejs 2021. 6. 25. 15:23
vue 에서 vuex 를 사용하여 store 를 만들면, getters 의 경우 this.$store.getters.[getter이름] 로 사용가능 actions 의 경우 this.$store.dispatch(‘[action이름]’, data) 과 같이 사용할 수 있다. 또는 직접 state 에 바로 접근해서 this.$store.state.book.message 로도 사용가능은 하다. helper 없이 기본적으로 사용 {{getMsg}} Click store/index.js store 를 하나만으로는 사용하기 어려우므로 기능별 또는 페이지별로 분리해야한다. 기능/페이지별로 store를 분리하고, 하나의 store에는 state, mutations, actions, getters를 포함해서 관리하는게 편..
-
vue3 에서 vuex4 시작하기 - module 관리프론트엔드/Vuejs 2021. 6. 14. 17:03
vue3 를 사용하게 되면 vuex4 를 사용하여 store 를 관리 할 수 있다. vuex 4 설치 npm install --save vuex@4.0.1 store 작성 vuex 의 store를 module 형식으로 구성 |-- store | |-- index.js | |-- mutation-types.js | |-- modules | |-- person.js mutation-types.js : 뮤테이션 타입 정의를 담당 modules : vuex 에서 각 모듈들을 담아두는 폴더 index.js : vuex 의 store 를 정의 다음과 같은 구조로 해야 소스관리가 편하다. mutation-types.js 작성 export const PERSON = { SET_NAME: 'SET_NAME', // 이름..
-
vue cli 실행모드 설정 및 node 환경변수 설정(NODE_ENV)프론트엔드/Vuejs 2021. 6. 1. 18:33
실행 모드 vue cli 에는 기본적으로 3개 모드가 있다. vue cli 뿐 아니라 다른곳에서도 마찬가지. 1) development, 2) production, 3) test 그 외에 사용자가 정의한 모드를 추가 할 수 있다. 사용자 정의 모드 // 최상단 경로 /package.json "scripts": { .. 생략 // local 로컬 모드 추가 "local": "vue-cli-service serve --mode local", "mymode": "vue-cli-service serve --mode mymode", // 임의로 생성 .. 생략 }, > npm run local > npm run mymode 로 정의된 모드를 실행할 수 있다. 환경변수 실행 모드에 따라 변수 설정을 달리 할 수 있..
-
[vue] prop data 사용하기 - Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders - 비동기상황에서 props 데이터 사용하기프론트엔드/Vuejs 2020. 11. 18. 00:59
vue prop data 를 사용하다가 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders 이 오류를 본 적이 있다. 이 오류가 난 경우는 props data 를 받고 이 props 데이터를 변경해주었더니 생긴 오류다. 이 props 데이터를 위로 올리고 이 올린 데이터를 또 props 로 내려서 하위 자식에서 쓰려했더니 생긴 오류다. props 에 대한 vue 의 공식 문서 설명이다. 일반적으로 prop을 변경시키고 싶은 유혹을 불러 일으킬 수있는 두 가지 경우가 있습니다. 1. 이 prop는 초기 값을 전달 하는데만 사용되며 하위 컴포넌트는 이후에 이를 로컬 데..
-
mac os gyp: No Xcode or CLT version detected! 오류 (맥 npm 패키지 설치 오류)프론트엔드/Vuejs 2020. 9. 18. 17:23
맥에서 npm 패키지를 설치하다가 오류가 난적이 있습니다. 해당오류는 gyp: No Xcode or CLT version detected! 과 같이 나옵니다. 저의 경우에는 nuxt 신규 프로젝트 하려고 명령어를 치다 다음과 같은 오류를 발견했습니다. npx create-nuxt-app frontend 이 명령어를 치니 패키지를 가져오는 부분에서 오류가 생겼습니다. No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'..
-
[vue] vue nuxt 시작하기프론트엔드/Vuejs 2020. 8. 17. 17:59
서버사이드 렌더링이 가능한 nuxt 를 하려고 한다. nuxt 장점으로는 서버사이드 렌더링이 가능하다는 점과, vue 에서 각각 해줘야 하는 일들을 한번에 처리 가능하다는 점이다. Nuxt.js 설치 create-nuxt-app을 npx를 통해서 설치하면된다. npx는 NPM 5.2.0 버전 이후 기본적으로 제공되기 때문에 별도로 설치할 필요는 없다. $ npx create-nuxt-app 이미 npm 을 설치했다면, npx 를 따로 설치할 필요가 없다. 나는 해당 폴더를 생성하고, 프로젝트 명을 frontend 라고 했다. npx create-nuxt-app frontend 입력하면 다음과 같이 프로젝트가 생성된다. 나는 vuetify 를 기본 ui 로 설정, eslint 및 jest 를 선택했다. 제..