방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰/뷰(Vuejs)18 [Vue warn] Extraneous non-emits event listeners ... vuejs 3 [Vue warn]: Extraneous non-emits event listeners (.....) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. at at > at at at at at at at 뷰 환경에서 만날수 있는 경고문구 입니다. 해당 경고문구는 정의되지 않는 html element 이벤트를 사용자가 사용할 경우 발생 합니다. *.. 2023. 8. 23. Firebase FCM 뷰(vuejs)에서 알림 띄우기 브라우저에 내장된 알림(NOTI)을 활용하여 FCM 메시지를 수신받아 알림(NOTI)를 띄우는 기능 입니다. 이를 위해 먼저 라이브러리를 추가 합니다. yarn add firebase FCM을 사용하기 위해서는 당연히 파이어베이스 프로젝트가 추가되어야 하며, 웹 푸시 인증서가 발급되어 있어야 합니다. FCM을 수신받고 알림(NOTI)를 띄우기 위해서는 웹워커를 사용하여야 합니다. 필요한 파일은 기본적으로 3개 입니다. * 해당 파일의 내부 내용은 간단하기 때 문에 따로 기술하지 않았습니다. * sw.js : 웹워커를 설정하기 위한 파일 * firebase-message-sw.js : 파이어베이스 메시징을 위한 파일 * firebase-messaging-sw.js : 브라우저가 백그라운드 진입시 행동해야되.. 2023. 7. 18. [Vuejs] chartjs 오류(NS_ERROR_FAILURE, chart.js, vue-chartjs) 뷰 환경에서 무료 라이센스 차트의 최강자인 차트js를 설치 해 보았습니다. 물론 처음 개발을 하기에..가장 최신버전으로 설치를 하였습니다. * 23년도 4월 기준으로 아래 버전으로 설치 하였습니다. { "chart.js": "^4.2.1", "vue-chartjs": "^5.2.0" } 워낙 훌륭한 차트답게 사용법도 쉽고 레퍼런스가 많아서 적용하는 데 문제는 없었습니다. 바, 선형, 원형 등 기존의 chartjs에서 제공하는 모든 차트를 사용 가능 하였으며, 사용법과 옵션도 거의 비슷 했습니다. https://vue-chartjs.org/ 📈 vue-chartjs vue-chartjs.org 그런데 차트 1개를 컴포넌트에서 사용 할 때는 아무런 이상이 없었지만, 2개 이상의 차트를 화면에서 표출하는 경우.. 2023. 4. 5. [Vuejs] router view 그리고 transition 적용 잘 안될 때 vuejs 3버전에서 RouterView와 Transition을 힘들게 적용하여 보았습니다. 라우터 뷰(router-view) 에서 이넘의 트랜지션(transition)을 적용하는게 생각보다 어려웠었습니다. 공식 사이트에서도 정말 간단하게 설명해서..참.. 아래는 개발 환경에 사용된 package.json 파일의 일부 내용 입니다. * 파일이름 : package.json { "dependencies": { "vue": "^3.2.47", "vue-router": "^4.1.6", "vuex": "^4.1.0" }, "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", "vite": "^4.1.4" } } 그리고 아래 코드는 공식 사이트에 설명된 router에 tr.. 2023. 4. 4. [Vuejs] vuex보다 편한 pinia에서의 세션 스토리지(sessionStorage) 적용 방법 vuex 환경에서 세선스토리지(sessionStorage)나 로컬스토리지(localStorage)를 사용하기 위해서는 아래와 같은 방법을 사용 하였습니다. 1. window 객체인 sessionStorage를 직접 적용하여 줍니다. 2. vuex-persistedstate 모듈을 추가 합니다(npm i vuex-persistedstate) 3. pinia-plugin-persistedstate 모듈을 추가 합니다(npm i pinia-plugin-persistedstate) 첫번째 방법은 일단 손도 많이가고 간단한 설정을 할 수 없기에 두번째 방법을 주로 사용하는데.. vuex-persistedstate 모듈(라이브러리)을 사용하기 위해 npm에 접속 해 보았더니.. 디프리케이티(deprecated)드 .. 2023. 4. 3. [Vuejs] 타입스크립트(Typescript) 적용, 모듈 또는 해당 형식 선언을 찾을 수 없습니다. * 개발도구 : vs코드(VSCode) * 운영체제 : 윈도우 뷰에서 타입스크립트(typescript)를 적용해 보았는데 아무 행위도 안했는데 만났던 오류 입니다. 난 그저 단지 설치하고 소스코드를 눌러서 보려고 했을 뿐 인데.. 뭐...라는거지 이해가 안되었습니다. 아무것도 안했는데 저러한 오류가나니...프로젝트를 다시 생성 해 보기도하고, 캐쉬클린까지 해 보았었습니다. 좀더 당황스러운 것은 저 상황에서도 빌드나 실행은 잘 되었습니다. 그래서 문뜩 든 생각이 "개발 도구 설정에 문제가 있겠다" 였습니다. 구글링을 하여보니 역시나 위 현상은 개발도구에서의 문제로 설명하고 있으며, 개발도구가 VS코드 인 경우 만날수 있다고 나와 있습니다. 이를 해결하기 위해서는 아래 단계를 따라가도록 합니다. 1. Ctr.. 2023. 3. 24. 이전 1 2 3 다음
