본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


앵귤러, 리엑트, 뷰108

[Vuejs] Mock 적용하기(vite) vite 환경에서 mock 환경을 구성하여 보았습니다. * 타입스크립트를 사용하지 않았습니다. 필요한 모듈은 2개 입니다. yarn add mockjs yarn add vite-plugin-mock 먼저 응답에 사용될 함수를 만들어 줍니다. 함수는 익명함수로 만들되, 배열형태의 값을 반환하면 됩니다. 만약, 타입스크립트를 사용 한 다면 타입제한을 붙일 수 있습니다(MockMethod 타입 등) * 파일이름 : index.js //URL 목록 export default function () { return [ { url: '/api/get', //get 방식 method: 'get', response: ({ query }) => { console.log(query) return { code: 0, data.. 2023. 11. 21.
[Vuejs] setup function returned a promise, but no <Suspense> boundary was found in the parent component tree 뷰 개발 환경에서 만날 수 있는 경고문구 입니다. setup function returned a promise, but no boundary was found in the parent component tree 라우터 기반의 환경에서 라우팅 되어야 할 컴포넌트에 setup 부분에 반환 형태가 promise 인 경우 해당 경고문구와 함께 아무것도 뜨지 않을 수 있습니다. * 대상 : 샘플 vue 파일 이때 라우팅하는 파일에 keepAlive 노드를 붙여주믄 해당 문제는 해결 가능 합니다. 2023. 10. 16.
Vuejs 인덱스 파일 사용하기(index.js, index.ts) 파일 형식은 아래와 같습니다. * 파일 이름 : index.js export { default as 이름1 } from './이름1.vue' export { default as 이름2 } from './이름2.vue' export { default as 이름3 } from './이름3.vue' 해당 파일을 만들어준 뒤에 사용법은 기존 인덱스 파일 사용법과 동일 합니다. 간단 정리 끝! * 굳이 저렇게 사용하실꺼면..차라리 글로벌 컴포넌트로 등록하시는 걸 추천드립니다. 2023. 10. 16.
[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.