본문 바로가기
반응형

Vue.js29

[Vue3] vite.config.js 에서 환경변수 사용하기 .env root 경로에 .env 파일이 있고, 내용은 아래와 같을 때 VITE_APP_API_PREFIX=http://localhost:9000 vite.config.js 에서 위의 변수를 사용하려고 한다면 import { defineConfig } from 'vite'; // .env 파일에서 환경 변수 가져오기 const { VITE_APP_API_PREFIX } = import.meta.env; export default defineConfig({ server: { proxy: { '/api': { target: VITE_APP_API_PREFIX 대부분 이렇게 쓰라고 나옵니다. VITE_ 로 변수명을 정해야 합니다. 하지만 무슨 이유인지 모르겠는데, 저 환경변수를 못가져오는 경우가 있었습니다. 그럴때 해.. 2023. 10. 11.
[vue] SweetAlert2 사용하기. (Utils Class 만들어서 사용하기) 설치 npm install sweetalert2 사용 결과는 아래와 같이 나옵니다. Toast.fire({ icon: 'error', title: 'The current password is incorrect' }) 여기에서 icon 에 들어갈 수 있는 것은 아래와 같습니다. 예제 코드 Swal.fire({ title: 'Are you sure?', text: "You won't be able to revert this!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!' }).then((result) => { .. 2023. 9. 27.
[vue] Composition api 에서 property로 받은 변수 watch 하는 방법 사용하려는 컴포넌트 vue 에서 다음과 같이 props를 사용하고 있을 때, import {useStore} from "vuex"; import {computed, watch} from "vue"; const store = useStore() const props = defineProps({ isDialogVisible: { type: Boolean, required: true, } }) // 생략 isDialogVisible 을 watch 하고 싶다면 watch(isDialogVisible, (newVal, oldVal) => {}) watch(props.isDialogVisible, (newVal, oldVal) => {}) 이 방법들은 안되고 아래와 같이 사용하면 됩니다. watch(()=>prop.. 2023. 9. 10.
[Vue] computed 사용할 때 파라메터 넘기기 아래와 같이 사용하면 됩니다. Hello~ Bryan~ const alertColor = computed(()=>(num) =>{ ... 이 부분이 중요한거 같은데요. computed( (num) => { ... 로 사용하니 안되더라고요. 간단한 조건문 같은 경우는 굳이 computed 를 사용하지 않아도 될거같아요. Hello~ Bryan~ 저는 저 조건문의 변수가 상황에 따라 바뀌고, 경우의 수도 다양해서 computed 를 사용하려고 알아봤습니다. 2023. 9. 10.
[Vue3] Vuex 에서 parameter 가 context? {commit}? 기본 파라메터 첫번째 파라메터는 호출할 때 따로 넘기지 않아도 됩니다. fetchQuery(context, param){ return new Promise((resolve, reject) => { axios .post('/user/query', param) .then(r=>resolve(r)) .catch(error => reject(error)) }) } 이렇게 첫번째 paramter 를 context (다른 이름도 가능 ctx 등..) 로 입력하면, 아래의 property 들이 보입니다. state 를 사용하려면 context.state getters 를 사용하려면 context.getters context 가 아니라 { } 를 사용해서 필요한것만 가져올 수도 있습니다. // fetchQuery(co.. 2023. 9. 5.
[Vue3] Router 에서 권한 체크해서 login 페이지로 보내기 router/index.js import {createRouter, createWebHistory} from 'vue-router' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/posts', component: PostsLayout, children: [ { path: 'new', component: PostsNew, // only authenticated users can create posts meta: { requiresAuth: true }, }, { path: ':id', component: PostsDetail, // anybody can read a po.. 2023. 9. 5.
[Vue] vuex 설치 yarn 사용 시 yarn add vuex npm 사용 시 npm install vuex --save yarn package.json 에 추가된 것 확인. 2023. 8. 20.
[Vue3] Stand Alone #6. Component 만들기 Vuejs 3 Stand Alone Component 만들기 Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..), 홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다. Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~ npm build 없이 php 나 html 에서 사용하려면 .vue 를 import 못하기 때문에 js 로 component 를 만들어서 사용해야합니다. 우선 javascript 파일을 만듭니다. baseCard.js const BaseCard = { props:{ title: String, content: { type: String, default: "", description: "card content" }, but.. 2022. 3. 21.
[Vue3] Stand Alone #5. bootstrap CDN 으로 사용하기 안에 bootstrap js, css 를 포함시키면 됩니다. cdn 주소는 여기 또는 여기 를 참고하셔서 버전을 고르시면 됩니다 bootstrap5 의 starter template 으로는 click me 이제 button 에 bootstrap css class 를 사용할 수 있습니다. 더 많은 style 은 아래 사이트에서 확인하 실 수 있습니다. https://getbootstrap.kr/docs/5.0/components/buttons/ 버튼 다양한 크기, 상태 등을 지원하는 폼, 대화상자 등의 작업에 Bootstrap의 사용자 지정 버튼 스타일을 사용하세요. getbootstrap.kr 2022. 3. 21.
[Vue3] Stand Alone #4. fetch post (php json 호출하기) Vuejs 3 Stand Alone 으로 사용하기 Fetch : GET, POST Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..), 홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다. Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~ GET 방식 data.json 파일을 만들고 내용은 아래와 같습니다. [ { "name": "Kim", "age": 12 },{ "name": "Park", "age": 15 },{ "name": "Lee", "age": 13 },{ "name": "Choi", "age": 11 } ] 버튼을 클릭했을 때 fetch() 로 저 데이터를 가져오기로 합니다. 데이터를 받아와서 json 으로 변환한 후 .. 2022. 3. 21.
728x90
반응형

티스토리툴바