Programing Language/Vue.js
-
Vue.js) vue3.0에서 쿠기 기간 설정하기Programing Language/Vue.js 2021. 11. 16. 12:02
거의다 cookies 설정이 vue 3.0 이전 버전으로 올라온게 많아서 글을 작성하게 되었습니다. import { createApp } from 'vue' import App from './App.vue' import router from './router' import VueCookies from "vue-cookies" import globalMethods from "./globalMethods" createApp(App) .use(VueCookies,{ expireTimes: "30d", secure: true, }) .use(globalMethods) .use(router) .mount("#app") 참고자료 https://reactgo.com/vue-set-cookie/
-
Vue.js) global(전역) 함수 만들어서 콘솔 로고 사용하기Programing Language/Vue.js 2021. 11. 3. 13:51
개발중에 console.log를 사용했던것 들을 개발이 끝난뒤 일일히 지우기가 매우 번거로워 처음부터 전역 함수로 만들어서 사용하기로 하였습니다. 생성 방벙에 대해 적어보겠습니다. - 개발환경 (vue 3.0 with vue@Cli) 1. js 파일을 생성(파일명은 자유로이) const methods = { console_log(str){ console.log(str) } } export default { install(Vue) { Vue.config.globalProperties.$log = methods.console_log; } } 2. main.js 파일에서 생성한 파일 글로벌 선언하기 import { createApp } from 'vue' import App from './App.vue' im..
-
Vue.js) Component inside <Transition> renders non-element root node that cannot be animated. 에러 해결Programing Language/Vue.js 2021. 11. 2. 15:06
관련 링크 첨부합니다. https://stackoverflow.com/a/68561753 Vue 3 – renders non-element root node that cannot be animated App.vue has a transition tag to fade the pages out and in.
-
Vue) 사용자 지정 디렉티브 사용하여 image lazy loading 구현하기Programing Language/Vue.js 2021. 10. 25. 00:11
사용자 정의 지시자 생성 (설명 : https://kr.vuejs.org/v2/guide/custom-directive.html) // v-lazyload Vue.directive('lazyload', { mounted(el) { }, }); IntersectionObserver API 구현 (설명:https://velog.io/@katanazero86/Intersection-Observer-API) mounted(el) { function imageLoad(targetElement) { const imgElement = targetElement; // data-lazy 에 지정된 이미지 경로를 에 셋팅 합니다. imgElement.setAttribute('src', imgElement.getAttrib..
-
Vue.js) Unexpected mutation of "" prop 에러 원인 분석Programing Language/Vue.js 2021. 6. 8. 10:58
부모뷰에서 v-bind로 전달한 데이터를 자식 뷰에서 props로 받고 그 값을 변경했을때 나타나는 에러이다. 부모뷰에서 자식뷰로 전달한 데이터는 수정하지말고 따로 값을 변수화하여 사용한뒤 @emit을 이용해서 값을 동기화 시키는게 좋다. 참고 자료 ) https://kr.vuejs.org/v2/guide/components.html#%EB%8B%A8%EB%B0%A9%ED%96%A5-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%9D%90%EB%A6%84 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org
-
Vue.js) highcharts 사용하기Programing Language/Vue.js 2021. 6. 4. 11:11
https://github.com/smithalan92/vue3-highcharts smithalan92/vue3-highcharts Vue 3 component wrapper for Highcharts.js. Contribute to smithalan92/vue3-highcharts development by creating an account on GitHub. github.com 패키지는 해당 페이지에서 참고하고 사이트에서는 global, local component방법이있는데 필자는 local component방식으로 했다. 차트 모양은 는 반원 방식으로 하였다. http://www.w3big.com/try/try.php?filename=highcharts_pie_semicircle_donut T..
-
Vue.js) 카카오 로그인 api 구현하기Programing Language/Vue.js 2021. 6. 2. 11:10
0. 클라이언트 코드 (html) 1. 클라이언트 코트 methods: { kakoLoginBtn() { var self = this; //다른 method 사용하기 위해 사용 window.Kakao.init('asfasdfasdfasdf') //처음에 카카오 로그인 세션을 없애준다. if (window.Kakao.Auth.getAccessToken()) { window.Kakao.API.request({ url: '/v1/user/unlink', success: function (response) { console.log(response) }, fail: function (error) { console.log(error) }, }) window.Kakao.Auth.setAccessToken(undefi..
-
Vue.js) 네이버 로그인(네아로) api 구현하기Programing Language/Vue.js 2021. 6. 2. 11:06
0. 클라이언트 코드 1. 클라이언트 코드 naverLoginBtn() { var client_id = 'ㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇ'; var callbackUrl = 'https://locolhost/login';//서버 주소 var url = 'https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=' + client_id + '&redirect_uri=' + callbackUrl + '&state=1234'; window.location.replace(url); } 2. 클라이언트 코드 mounted() { var self = this; try{ //네이버로 로그인할때만 실행 if(this.$route.query.code.length ..